Remove black frame around ListView item

Just starting out? Need help? Post your questions and find answers here.
User avatar
Kurzer
Posts: 90
Joined: Mon May 26, 2014 9:33 am

Remove black frame around ListView item

Post 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.

Image

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
SB 2.32 x86, Browser: Iron Portable V. 88.0.4500.0 (Chromium based), User age in 2023: 55y
"Happiness is a pet." | "Never run a changing system!"
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: Remove black frame around ListView item

Post by Peter »

Code: Select all

! $("head").append("<style>.dgrid-cell:focus{outline: none;}</style>");
User avatar
Kurzer
Posts: 90
Joined: Mon May 26, 2014 9:33 am

Re: Remove black frame around ListView item

Post by Kurzer »

Great, thanks Peter. Image
I guess I can't find this kind of hacks with the element inspector of the browser?

Markus
SB 2.32 x86, Browser: Iron Portable V. 88.0.4500.0 (Chromium based), User age in 2023: 55y
"Happiness is a pet." | "Never run a changing system!"
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: Remove black frame around ListView item

Post 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).

Image

Sometimes you have to play around a bit until it fits. :P
User avatar
Kurzer
Posts: 90
Joined: Mon May 26, 2014 9:33 am

Re: Remove black frame around ListView item

Post 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.
SB 2.32 x86, Browser: Iron Portable V. 88.0.4500.0 (Chromium based), User age in 2023: 55y
"Happiness is a pet." | "Never run a changing system!"
Post Reply