upssjw
(Steve W)
17 November 2024 15:41
21
further progress, removed as much as I can from the code, rely now on Elements
Added switch between tailwind columns and px width, all responsive (fingers crossed)
still working through Tailwind docs
download Columns Component here with the examples shown
elementsapp://downloadDocument/jR3GvKC5vZqM
1 Like
upssjw
(Steve W)
17 November 2024 18:14
22
@dan background colour container does not work in my columns
1 Like
upssjw
(Steve W)
17 November 2024 18:31
23
@dan works ok in Element but not in safari
set a background for columns and that works in safari just the Container does not work
1 Like
dan
(Dan C.)
18 November 2024 09:31
24
Nice work I know a few potential Element users wanted flowing column support and this looks super good
I wonder if the color not showing is just a coding error, or the browser being awkward - does it work in Chrome?
upssjw
(Steve W)
18 November 2024 09:49
25
@dan could weāll be a coding, I added an option to but a background colour directly into the columns that works. It is just the container element that does not work if I use a background colour directly in the columns it works in safari, itās the container does not work. Columns work in safari and chrome but not the container. If I set my own container it works. I will replicate in tailwind play and see if it works in there.
dan
(Dan C.)
18 November 2024 10:01
26
Good stuff, let me know how you get on!
upssjw
(Steve W)
18 November 2024 12:46
27
@dan created it in tailwind play no issues
just using outer div as a container
copied from tailwind play into Elements no issues
upssjw
(Steve W)
18 November 2024 12:55
28
@dan strange behaviour with borders as well
upssjw
(Steve W)
18 November 2024 14:45
29
@dan added own controls to columns and it works
1 Like
upssjw
(Steve W)
18 November 2024 17:03
30
Any idea why when dropping in an Elements container width background and borders go haywire
upssjw
(Steve W)
18 November 2024 17:12
31
@dan the colour is from Elements container background colour
dan
(Dan C.)
18 November 2024 17:13
32
Seems like a code issue, something clashingā¦ but itās hard to tell without seeing the codeā¦
Maybe share the project again showing the issue and we can have a little look!
upssjw
(Steve W)
18 November 2024 17:23
33
@dan the link is about 12 posts up
elementsapp://downloadDocument/jR3GvKC5vZqM
add padding to container then set width to full
set background colour in the container
upssjw
(Steve W)
18 November 2024 17:53
34
@dan not sure what is going on here but looking at view source on the safari page I can do this
dan
(Dan C.)
18 November 2024 18:25
35
Ah-ha! Youāve got too many closing div tags, remove one and it works just fine
Hereās a quick video explaining the changeā¦
upssjw
(Steve W)
18 November 2024 18:29
36
@dan Simple things I had another div at the start to try something else, forgot to remove the closing div, can finish now thanks for spotting I was about to remove one bit at a time
upssjw
(Steve W)
18 November 2024 19:05
37
@dan
now it is starting to get there
download below
elementsapp://downloadDocument/zAe71z02dwoh
upssjw
(Steve W)
19 November 2024 06:40
39
blank Columns component
elementsapp://downloadDocument/urqkh4hpi7to
Didnāt add all of the classes to the notes
Columns Options to add to Elements components if required
Break After
break-after-auto
break-after-avoid
break-after-all
break-after-avoid-page
break-after-page
break-after-left
break-after-right
break-after-column
Break Before
break-before-auto
break-before-avoid
break-before-all
break-before-avoid-page
break-before-page
break-before-left
break-before-right
break-before-column
Break Inside
break-inside-auto
break-inside-avoid
break-inside-avoid-page
break-inside-avoid-column
upssjw
(Steve W)
19 November 2024 11:22
40
Still need to add a few more options