Page 1 of 1
ListIconGadget Restyle
Posted: Fri May 12, 2023 4:05 pm
by Dirk Geppert
Hi folks, I use the ListIconGadget () very often to visualize data contents. But I need that it looks like more modern.
How to improve the gadget style? I need mainly rounded corners and shadow.
I did some tests with the browser debugger, but css changes like 'border-radius: 10px;' seems to be ignored inside LIG elements.
There is also some stuff from peter to change rows and header, but this is to difficult for me, to adapt it for my needs.
Re: ListIconGadget Restyle
Posted: Sun May 14, 2023 10:48 am
by Dirk Geppert
I copied the access to the header from Peter's
ListIconGadgetEx code and changed it to Grid. But without success.
Code: Select all
Macro GetGadgetID(ListIconGadget)
If IsGadget(ListIconGadget) = 0 : ProcedureReturn : EndIf
If GadgetType(ListIconGadget) <> #PB_GadgetType_ListIcon : ProcedureReturn : EndIf
Protected GadgetID = GadgetID(ListIconGadget)
EndMacro
Macro GetGrid
GetGadgetID(ListIconGadget)
! var grid = v_gadgetid.gadget;
EndMacro
Procedure SetListIconStyles(ListIconGadget)
GetGrid
! $('#dgrid_' + grid.id).remove();
! var style = "<style type='text/css' id='dgrid_" + grid.id + "'>" +
! " #" + grid.id + " [role='grid'] {border-radius: 10px; color: red;}" +
! "</style>"
! $(style).appendTo("head");
EndProcedure
Enumeration
#Window
#ListIconGadget1
EndEnumeration
OpenWindow(#Window, #PB_Ignore, #PB_Ignore, 800, 800, "ListIcon Example", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
; #ListIconGadget1
ListIconGadget(#ListIconGadget1, 10, 10, 400, 400, "Column 0", 200, #PB_ListIcon_FullRowSelect | #PB_ListIcon_AlwaysShowSelection)
AddGadgetColumn(#ListIconGadget1, 1, "Column 1", 100)
SetListIconStyles(#ListIconGadget1)
Does anyone have an idea how to add round corners and shadows to the ListIconGadget?
Re: ListIconGadget Restyle
Posted: Mon May 15, 2023 1:31 pm
by Dirk Geppert
