upssjw
(Steve W)
November 17, 2024, 3:41pm
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
upssjw
(Steve W)
November 17, 2024, 6:14pm
22
@dan background colour container does not work in my columns
upssjw
(Steve W)
November 17, 2024, 6:31pm
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
dan
(Dan)
November 18, 2024, 9:31am
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)
November 18, 2024, 9:49am
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)
November 18, 2024, 10:01am
26
Good stuff, let me know how you get on!
upssjw
(Steve W)
November 18, 2024, 12:46pm
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)
November 18, 2024, 12:55pm
28
@dan strange behaviour with borders as well
upssjw
(Steve W)
November 18, 2024, 2:45pm
29
@dan added own controls to columns and it works
upssjw
(Steve W)
November 18, 2024, 5:03pm
30
Any idea why when dropping in an Elements container width background and borders go haywire
upssjw
(Steve W)
November 18, 2024, 5:12pm
31
@dan the colour is from Elements container background colour
dan
(Dan)
November 18, 2024, 5:13pm
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)
November 18, 2024, 5:23pm
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)
November 18, 2024, 5:53pm
34
@dan not sure what is going on here but looking at view source on the safari page I can do this
dan
(Dan)
November 18, 2024, 6:25pm
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)
November 18, 2024, 6:29pm
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)
November 18, 2024, 7:05pm
37
@dan
now it is starting to get there
download below
elementsapp://downloadDocument/zAe71z02dwoh
upssjw
(Steve W)
November 19, 2024, 6:40am
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)
November 19, 2024, 11:22am
40
Still need to add a few more options