Columns practice

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

@dan background colour container does not work in my columns

1 Like

@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

Nice work :star_struck: I know a few potential Element users wanted flowing column support and this looks super good :raised_hands:

I wonder if the color not showing is just a coding error, or the browser being awkward - does it work in Chrome?

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

Good stuff, let me know how you get on!

@dan created it in tailwind play no issues
just using outer div as a container

copied from tailwind play into Elements no issues

@dan strange behaviour with borders as well

@dan added own controls to columns and it works

1 Like

Any idea why when dropping in an Elements container width background and borders go haywire

@dan the colour is from Elements container background colour

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!

@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

@dan not sure what is going on here but looking at view source on the safari page I can do this

Ah-ha! Youā€™ve got too many closing div tags, remove one and it works just fine :smiling_face:

Hereā€™s a quick video explaining the changeā€¦

@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

@dan

now it is starting to get there

download below

elementsapp://downloadDocument/zAe71z02dwoh

Working in a page

1 Like

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

Still need to add a few more options