Trouble keeping the rows and columns line up :(

[ronpat]

I can’t seem to convince the code run successfully on my PC. Possibly calling jQuery incorrectly.
Is there supposed to be a “content” row showing after a button is clicked? Firefox and Chrome.

[PaulOB]

@ronpat

I can’t seem to convince the code run successfully on my PC.

Hi Ron,

Do you mean codepen or have you copied it all locally?

Codepen is working fine in Firefox, Chrome and Edge (it would work in ie11 also but ie11 doesn’t supprt @supports). Here’s a stand-alone version outside of codepen.

http://www.pmob.co.uk/temp/tabs-and-flex.html

The responsive view is only enabled for flexbox users using @supports but the desktop version will work for everyone.

All the js does is toggle a class on and off to reveal the content. It could be done without js using :target or perhaps the checkbox hack but I just forked this from an old demo so left the js in place. Jquery could easily be replaced with vanilla js if needed also.

[PaulOB]

Just updated it a little so that only the link is the trigger rather than the whole box which I assume will be the way it is required.

http://www.pmob.co.uk/temp2/tabs-and-flex2.html

and with fallback using :target if js is disabled:

http://www.pmob.co.uk/temp2/tabs-and-flex3.html

[ronpat]

My rendering problem involved the cdn “cloudflare”. I thought it was permanently enabled, but turned out not to have been, which is why the demo didn’t work on CodePen either. Fixed now.

Thank you for posting the pmob link. It worked “out of the box”.

[mp5163093]

Hello All, it does work great, Wow you people are amazing thank you so much for your help and your patience
PaulOB, ronpat, Mittineague, WebMachine, and c3williams
It was hard, I tested on Firefox, Chrome and it works Wonderful !!!
IE11 it doesn’t switch to a two and one column, but is ok no need

[mp5163093]

Hi All,
I being studying it in how it works and is very impressive the functionallity you made it run
Sorry I know i said no worries about IE but it be cool if it could also switch from three to a two column and one column in IE, if and only if possible.
How can that be done ? I know you PaulOB mention IE does not support “@supports” or how can we go around it?

Thanks again for you help Great challenge

[PaulOB]

Hi,

You can make IE11 work but then you lose the fallback for older browsers that don’t support flexbox. IE11 basically supports most of flexbox but does have a few bugs (you could probably also make ie10 work if you add all the old prefixes).

This codepen should work in IE11, edge and all other modern browsers.

IE11 has some bugs with box-sizing combined with flex and makes the flex items too big when padding and borders are added so we have to use width instead of flex:1 0 49% etc. This means we lose the fallback I had for older browsers.

You could re-jig the code so that padding is on inner elements and then you could go back to the flex:1 0 49% (and the like) rules and that would allow older browsers to just get the three column layout while the flexbox enabled browsers use the flex rules to switch to columns as required.

[PaulOB]

@PaulOB

You could re-jig the code so that padding is on inner elements and then you could go back to the flex:1 0 49% (and the like) rules and that would allow older browsers to just get the three column layout while the flexbox enabled browsers use the flex rules to switch to columns as required.

Ok, I did that for you and this version adds the padding to inner elements instead.

That should work in browsers that support flexbox and older browsers will get the 3 column version although the columns will be next to each other as we can’t really add margins into the mix…

[mp5163093]

This is really cool thanks so much PaulOB, i am looking and understanding the code.