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.
ListIconGadget Restyle
-
- Posts: 284
- Joined: Fri Sep 22, 2017 7:02 am
Re: ListIconGadget Restyle
I copied the access to the header from Peter's ListIconGadgetEx code and changed it to Grid. But without success.
Does anyone have an idea how to add round corners and shadows to the ListIconGadget?
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)
-
- Posts: 284
- Joined: Fri Sep 22, 2017 7:02 am