Page 1 of 1
Remove black frame around ListView item
Posted: Tue Oct 06, 2020 2:31 pm
by Kurzer
Hi all,
is it a browser thing that when clicking into a Listview gadget, the current cell is displayed with a black border even if #PB_ListIcon_FullRowSelect is specified? (browser = iron, chromium based)
I have not yet found out how to get rid of this frame.
Code: Select all
If OpenWindow(0, 100, 100, 400, 400, "ListIcon Example", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
ListIconGadget(0, 5, 5, 390, 390, "Name", 100, #PB_ListIcon_FullRowSelect | #PB_ListIcon_AlwaysShowSelection)
AddGadgetColumn(0, 1, "Address", 250)
AddGadgetItem(0, -1, "Harry Rannit"+Chr(10)+"12 Parliament Way, Battle Street, By the Bay")
AddGadgetItem(0, -1, "Ginger Brokeit"+Chr(10)+"130 SpiderBasic Road, BigTown, CodeCity")
EndIf
Markus
Re: Remove black frame around ListView item
Posted: Tue Oct 06, 2020 3:35 pm
by Peter
Code: Select all
! $("head").append("<style>.dgrid-cell:focus{outline: none;}</style>");
Re: Remove black frame around ListView item
Posted: Tue Oct 06, 2020 3:54 pm
by Kurzer
Great, thanks Peter.
I guess I can't find this kind of hacks with the element inspector of the browser?
Markus
Re: Remove black frame around ListView item
Posted: Tue Oct 06, 2020 5:37 pm
by Peter
kurzer wrote:I guess I can't find this kind of hacks with the element inspector of the browser?
This can be determined indirectly.
Open the developer console of your browser (here in Chrome) and click first on the Elements tab and then on the left icon (see below). This allows you to display the position of individual elements in the page. With a little experience you can locate the class that is responsible for the appearance of the element (here: dgrid-cell). Since the element gets a different appearance when it gets the focus, you need to edit this property (here .dgrid-cell:focus).
Sometimes you have to play around a bit until it fits.
Re: Remove black frame around ListView item
Posted: Wed Oct 07, 2020 10:37 am
by Kurzer
Thank you very much for the explanation, Peter.
I got that far in the Inspector, but I couldn't find a CSS file for the class and I didn't recognize the focus property. When my current project is finished, I will have more time to deal with these things. But at the moment I have a lot of time pressure.
So far I just played around with try and error in existing CSS properties.
But as I see, the outline property is a "user agent stylesheet". Therefore I would have failed at this point.