CutCodeDown

Web Development => HTML / CSS => Topic started by: GrumpyYoungMan on 8 Jan 2021, 11:51:18 am

Title: MentalBlock - CollapsibleSections
Post by: GrumpyYoungMan on 8 Jan 2021, 11:51:18 am
How can I get the header "MOT Information" and the toggle on the same line - I am having a Friday... I want the heading in the middle with the toggle on the right?


My CodePen (https://codepen.io/GrumpyYoungMan/pen/mdrjmPR)



Title: Re: MentalBlock - CollapsibleSections
Post by: coothead on 8 Jan 2021, 01:05:46 pm
Hi there GrumpyYoungMan,

does this help...

Full Page View:-

https://codepen.io/coothead/full/oNzMwYo (https://codepen.io/coothead/full/oNzMwYo)

Editor View:-

https://codepen.io/coothead/pen/oNzMwYo (https://codepen.io/coothead/pen/oNzMwYo)

Note:-

I have commented the amendments.  8)

coothead
Title: Re: MentalBlock - CollapsibleSections
Post by: GrumpyYoungMan on 8 Jan 2021, 01:31:48 pm
Perfect!

Thank you! I was having a massive mental block!! Thank you for taking the time again to help me! I do appreciate it!!

When the kids go to bed I’ll get the laptop... homeschooling is no fun!
Title: Re: MentalBlock - CollapsibleSections
Post by: GrumpyYoungMan on 8 Jan 2021, 01:34:56 pm
Could I use the :after tag to change the symbol from say a plus to expand and a minus to collapse the section via CSS?

Could I use the CSS :checked attribute and content:? 
Title: Re: MentalBlock - CollapsibleSections
Post by: coothead on 8 Jan 2021, 02:13:55 pm
Hi there GrumpyYoungMan,

check out the links in my previous post.  8)

coothead
Title: Re: MentalBlock - CollapsibleSections
Post by: GrumpyYoungMan on 8 Jan 2021, 02:16:42 pm
Hi there GrumpyYoungMan,

check out the links in my previous post.  8)

coothead
Thank you! THANK YOU!!

So I was kind off right, I appreciate the help, again!!!
Title: Re: MentalBlock - CollapsibleSections
Post by: GrumpyYoungMan on 8 Jan 2021, 02:17:11 pm
Hi there GrumpyYoungMan,

check out the links in my previous post.  8)

coothead
I owe you big time!!
Title: Re: MentalBlock - CollapsibleSections
Post by: coothead on 8 Jan 2021, 02:27:29 pm
Quote from: GrumpyYoungMan
I owe you big time!!

Au contraire, the pleasure is all mine.

I do this stuff for mental stimulation with the hope
that it might help stave off senile dementia.

coothead
Title: Re: MentalBlock - CollapsibleSections
Post by: GrumpyYoungMan on 8 Jan 2021, 03:20:40 pm
Quote from: GrumpyYoungMan
I owe you big time!!

Au contraire, the pleasure is all mine.

I do this stuff for mental stimulation with the hope
that it might help stave off senile dementia.

coothead
Well you say that now, butI have another problem!

Check my codepen (https://codepen.io/GrumpyYoungMan/pen/mdrjmPR) the MOT Information header is about double what it should be... whay am I missing...

Maybe I shouldn't have posted it without my headers... I am so sorry... but I did get very close...
Title: Re: MentalBlock - CollapsibleSections
Post by: GrumpyYoungMan on 8 Jan 2021, 03:28:54 pm
I've seen the problem - for some reason the background is being attached to the section header...

I think I may have messed up the CSS...
Title: Re: MentalBlock - CollapsibleSections
Post by: GrumpyYoungMan on 8 Jan 2021, 03:33:26 pm
Now the "float" on the label is ignoring the body width from the main tag...

Could I put that into a flex display? maybe a three boxes? a left, right and center? put the heading into the center flexbox and then label into the right hand flexbox?
Title: Re: MentalBlock - CollapsibleSections
Post by: coothead on 8 Jan 2021, 04:15:59 pm
Hi there GrumpyYoungMan,

I have looked at your codepen, but am unable to
understand what your problems are.   ???  :-\

coothead
Title: Re: MentalBlock - CollapsibleSections
Post by: GrumpyYoungMan on 8 Jan 2021, 04:32:54 pm
The label for the “MOT Information” collapse and expand is going outside the page width (which is set by the main width which is 80%)  - I guess this is because it’s a float?
Title: Re: MentalBlock - CollapsibleSections
Post by: coothead on 8 Jan 2021, 04:57:34 pm
Hi there GrumpyYoungMan,

I don't see that as a problem.  ::)

Here is a screenshot at 20em - ( 320px ) width...

(https://www.coothead.co.uk/images/320x455-screenshot.png)

...but it does show problems with the table element. :o

My test browsers are Firefox and Vivaldi.

coothead
Title: Re: MentalBlock - CollapsibleSections
Post by: GrumpyYoungMan on 8 Jan 2021, 05:08:20 pm
Strange!!

I’ll test again - maybe it’s a cached CSS problem...

I spotted the table problem too, I’ll sort that!!

Thank you again and sorry!
Title: Re: MentalBlock - Collapsible Sections
Post by: GrumpyYoungMan on 8 Jan 2021, 05:40:34 pm
(http://grumpyyoungman.co.uk/CutDownCode/images/CollapsedSections/2021-01-08.png)

Does this help?

Gap to big between the headers, and the header is out of center line - caused by the label? would a flexbox help here? also the label is out of line with the rest?
Title: Re: MentalBlock - CollapsibleSections
Post by: coothead on 8 Jan 2021, 06:30:20 pm
Hi there GrumpyYoungMan,

does this amended version look any better...

Full page View:-

https://codepen.io/coothead/full/oNzMwYo (https://codepen.io/coothead/full/oNzMwYo)

Editor View:-

https://codepen.io/coothead/pen/oNzMwYo (https://codepen.io/coothead/pen/oNzMwYo)

coothead
Title: Re: MentalBlock - CollapsibleSections
Post by: GrumpyYoungMan on 9 Jan 2021, 01:36:21 am
Hi there GrumpyYoungMan,

does this amended version look any better...

Full page View:-

https://codepen.io/coothead/full/oNzMwYo (https://codepen.io/coothead/full/oNzMwYo)

Editor View:-

https://codepen.io/coothead/pen/oNzMwYo (https://codepen.io/coothead/pen/oNzMwYo)

coothead
Thank you!!

Did you add comments?

I appreciate your help, sorry for being such a pain!
Title: Re: MentalBlock - CollapsibleSections
Post by: coothead on 9 Jan 2021, 04:23:36 am
Quote from: GrumpyYoungMan
Did you add comments?

I hadn't,  but  I have now.  :)  8)

coothead
Title: Re: MentalBlock - CollapsibleSections
Post by: Jason Knight on 9 Jan 2021, 06:56:39 am
One thing:
 class="visually-hidden"

NO!

We don't use classes for that anymore, we have the hidden attribute.

<input type="checkbox" id="toggle_motInformation" hidden>

Unrelated to your problem, but related to what you're doing, you might find this handy:

https://levelup.gitconnected.com/overcoming-css-not-calculating-auto-height-for-transitions-f98a7e062f07

When/if you want to animate that show/hide. Requires an  extra containing wrapping DIV, but lets you animate them by height without significant scripting. Scripting off/blocked the unknown property reverts it back to "auto" so it still works without the animation in old UA's.
Title: Re: MentalBlock - CollapsibleSections
Post by: GrumpyYoungMan on 9 Jan 2021, 07:04:59 am
One thing:
 class="visually-hidden"

NO!

We don't use classes for that anymore, we have the hidden attribute.

<input type="checkbox" id="toggle_motInformation" hidden>

Unrelated to your problem, but related to what you're doing, you might find this handy:

https://levelup.gitconnected.com/overcoming-css-not-calculating-auto-height-for-transitions-f98a7e062f07

When/if you want to animate that show/hide. Requires an  extra containing wrapping DIV, but lets you animate them by height without significant scripting. Scripting off/blocked the unknown property reverts it back to "auto" so it still works without the animation in old UA's.
Thanks! Appreciate it! I knew you when and if you read my post you would spot that and in all honestly I stole the concept from somewhere else and tweaked the concept to be more minimalist and missed that class!

I am sorry for being the resident forum idiot!
Title: Re: MentalBlock - CollapsibleSections
Post by: coothead on 9 Jan 2021, 07:22:41 am
Quote from: GrumpyYoungMan
I am sorry for being the resident forum idiot!

No need to apologise.  ;)

Personally, I absolutely adore self deprecation, but then,
I've always been naff for as long as I can remember   8)

coothead
Title: Re: MentalBlock - CollapsibleSections
Post by: GrumpyYoungMan on 9 Jan 2021, 03:45:14 pm
Well I am stuck again!

CodePen (https://codepen.io/GrumpyYoungMan/pen/yLaqrJM)

I need the MOT table to alternate the row color - but not be effected by the MOT advisory row when its hidden - needs to be a clickable link like the MOT information maybe...?

This will be tricky as not all records will have a MOT advisory... hopefully my pen will make it easier to understand and see what I am trying to do?
Title: Re: MentalBlock - CollapsibleSections
Post by: GrumpyYoungMan on 9 Jan 2021, 03:54:40 pm
I am really not sure that I can do this - as each row would need its own CSS style via the checkbox CSS trick and that will not work as the list is dynamically generated?
Title: Re: MentalBlock - CollapsibleSections
Post by: Jason Knight on 9 Jan 2021, 05:04:57 pm
nth-child

tbody tr:nth-child(even) td { background:your_different_background_color_here }

Since these all appear to be separate tables, not sure what that has to do with it... or what the "advisory row" is. Is that something that should be in tfoot or thead instead of TBODY?

remember, there are more tags that go into a table than just TR and TD... in fact you seem to have TD doing TH's job.
Title: Re: MentalBlock - CollapsibleSections
Post by: GrumpyYoungMan on 10 Jan 2021, 03:14:56 am
nth-child

tbody tr:nth-child(even) td { background:your_different_background_color_here }

Since these all appear to be separate tables, not sure what that has to do with it... or what the "advisory row" is. Is that something that should be in tfoot or thead instead of TBODY?

remember, there are more tags that go into a table than just TR and TD... in fact you seem to have TD doing TH's job.
Sorry! Not sure the nth-child will works - as not all the MOTs will have an advisory so not all the records will have that extra row... and that is why my already alternating row colours won’t work correctly.

Also it won’t work via checkbox as each row would need a unique ID and an associated CSS styles and as it’s generates dynamically this wouldn’t be possible...

I guess maybe via JavaScript? Or Xajax?

The “advisory” row is for faults that are found on the yearly statutory MOT (roadworthy) test which are not classed as bad enough to fail but will require attention.

I guess maybe I could add the records to a database? Instead of just pulling them out of a file...

Title: Re: MentalBlock - CollapsibleSections
Post by: Jason Knight on 10 Jan 2021, 04:57:27 am
That doesn't sound like body data, which should be of uniform nature. Again, can you isolate those to their own separate table if there would be multiples, or if singles would they be more appropriate in thead/tfoot.

Don't really know enough about what an "advisory" is, where you are placing them, or what the PROPER markup would be to come up with any styling advice.
Title: Re: MentalBlock - CollapsibleSections
Post by: GrumpyYoungMan on 10 Jan 2021, 09:43:57 am
That doesn't sound like body data, which should be of uniform nature. Again, can you isolate those to their own separate table if there would be multiples, or if singles would they be more appropriate in thead/tfoot.

Don't really know enough about what an "advisory" is, where you are placing them, or what the PROPER markup would be to come up with any styling advice.
I’m sure, but think it is? Date of test, expiry date, mileage, and test status and then weather or not an advisory has been issue? And then in the next row I was listing what the advisory items were issue for that test? Obviously not all MOTs will have an advisory issue...

I can’t think of a way to make that row be hidable by using the checkbox cheat so maybe just bin it off...
Title: Re: MentalBlock - CollapsibleSections
Post by: coothead on 10 Jan 2021, 01:03:45 pm
Quote from: GrumpyYoungMan
I can’t think of a way to make that row be hidable by
using the checkbox cheat so maybe just bin it off...
Perhaps this will help...

Full page View:-
https://codepen.io/coothead/full/mdrGPjm (https://codepen.io/coothead/full/mdrGPjm)

Editor View:-
https://codepen.io/coothead/pen/mdrGPjm (https://codepen.io/coothead/pen/mdrGPjm)

coothead
Title: Re: MentalBlock - CollapsibleSections
Post by: GrumpyYoungMan on 10 Jan 2021, 01:40:18 pm
Quote from: GrumpyYoungMan
I can’t think of a way to make that row be hidable by
using the checkbox cheat so maybe just bin it off...
Perhaps this will help...

Full page View:-
https://codepen.io/coothead/full/mdrGPjm (https://codepen.io/coothead/full/mdrGPjm)

Editor View:-
https://codepen.io/coothead/pen/mdrGPjm (https://codepen.io/coothead/pen/mdrGPjm)

coothead
You are a genius, especially if that is dynamically generatable!

THANK YOU!!

I may have to add the failure items too... and not just the advisory items!



Title: Re: MentalBlock - CollapsibleSections
Post by: coothead on 10 Jan 2021, 02:15:16 pm
Quote from: GrumpyYoungMan
  • You are a genius
  • especially if that is dynamically generatable!
Unfortunately

cothead
Title: Re: MentalBlock - CollapsibleSections
Post by: GrumpyYoungMan on 11 Jan 2021, 03:11:37 am
Quote from: GrumpyYoungMan
  • You are a genius
  • especially if that is dynamically generatable!
Unfortunately
  • is not true
  • is not possible

cothead

Thanks, but actually I can, as long as I have the #expand* in the CSS - is there not a way in CSS to make a range say #expand[1-10]?

Thanks again!
Title: Re: MentalBlock - CollapsibleSections
Post by: coothead on 11 Jan 2021, 06:45:31 am
Quote from: GrumpyYoungMan
...is there not a way in CSS to make a range say #expand[1-10]?

Well,   what  I do is code this snippet...
Code: [Select]
#expand1:checked ~ table tbody tr:nth-of-type(2) ul,

...using my digits and the keyboard,  and C&P it.

I then  increase the value of #expand by 1 and
change the value of type() to suit.

I repeat this process until  I have the desired
number of items. Finally I remove trailing
comma of this last item.

In the HTML I numbered all the tr elements to
help with the type() value changing.

That's about as dynamic as get.  ;D

Of course, you must bear in mind that, unlike
many others, I have nothing better to do.  8)

coothead
Title: MentalBlock - CollapsibleSections II
Post by: GrumpyYoungMan on 12 Nov 2021, 12:15:20 pm
Sorry to raise such an old topic, but the issue didn't seem worthy of raising a new topic but

CodePen (https://codepen.io/GrumpyYoungMan/full/PoKdBXY)

Trying to get the text to change, depending on the checkbox being selected/unselected...

it has been a long week and I am having a mental block again...
Title: Re: MentalBlock - CollapsibleSections
Post by: coothead on 12 Nov 2021, 12:50:07 pm
Hi there GYM,

change this..
Code: [Select]
    <label for="toggle" class="toggleText"></label>
    <input type="checkbox" id="toggle" name="group">

...to this...
Code: [Select]
   <input type="checkbox" id="toggle" name="group">
   <label for="toggle" class="toggleText"></label>

...with this slightly amended CSS...
Code: [Select]
html,
body {
    height: 100%;
    padding: 0;
    margin: 0;
}

body {
    background: #000;
    color: greenyellow;
    font: normal 1em "Verdana";
    display: flex;
    flex-direction: column;
}

input {
    display:none;
}

header,
footer {
    flex: 0;
    padding: 0.5em 0;
}

main {
    flex: 1;
}

#content {
    display:none;
    border: 1px solid red;
    border-radius: 0.5em;
    background: #222;
    margin: 1em;
    padding: 0.5em;
}

#toggle:checked ~ #content {
    display: block;
}

.toggleText::before {
    content: "show"
}

#toggle:checked ~ .toggleText::before {
    content: "Hide";
 }

.toggleText {
    cursor: pointer;
 }

.toggleText:hover,
.toggleText:active {
    color: red;
 }

coothead
Title: Re: MentalBlock - CollapsibleSections
Post by: GrumpyYoungMan on 12 Nov 2021, 12:53:35 pm
Thank You!! :D

So I should have done it via ID basically? and switched the label and input around - the input first?
Title: Re: MentalBlock - CollapsibleSections
Post by: coothead on 12 Nov 2021, 01:04:23 pm
So I should have done it via ID basically?

No, the real problem was the order of the label and input elements.
The order needed to be reversed.

I only removed  a few unnecessary  CSS properties...
Code: [Select]
#toggle:not(:checked) ~ #content {
    display: none;
}

#toggle:not(:checked) ~ .toggleText label::before {
    content: "Show";
}

coothead
Title: Re: MentalBlock - CollapsibleSections
Post by: GrumpyYoungMan on 12 Nov 2021, 03:17:16 pm
Another strange problem, I can only get left padding so to get top and bottom padding do I need to create a container and pad that?
Title: Re: MentalBlock - CollapsibleSections
Post by: GrumpyYoungMan on 12 Nov 2021, 03:33:40 pm
‘Pen updated!
Title: Re: MentalBlock - CollapsibleSections
Post by: coothead on 12 Nov 2021, 05:38:23 pm
...I can only get left padding ...

You do not mention the element to which you
wish to apply top and bottom padding.   ::)

If you were referring  to...
Code: [Select]
    <div id="content">

...then this...
Code: [Select]
#content {
    display: none;
    border: 1px solid lightskyblue;
    border-radius: 0.75em;
    background: #222;
    margin: 1em;
    padding: 2em 0.5em;
}

...worked OK for me.

coothead
Title: Re: MentalBlock - CollapsibleSections
Post by: GrumpyYoungMan on 13 Nov 2021, 03:54:55 am
...I can only get left padding ...

You do not mention the element to which you
wish to apply top and bottom padding.   ::)

If you were referring  to...
Code: [Select]
    <div id="content">

...then this...
Code: [Select]
#content {
    display: none;
    border: 1px solid lightskyblue;
    border-radius: 0.75em;
    background: #222;
    margin: 1em;
    padding: 2em 0.5em;
}

...worked OK for me.

coothead
I'm so sorry, that is what you get for using your phone and then getting distracted, I refer to the padding on the "show" and "hide" options.
Title: Re: MentalBlock - CollapsibleSections
Post by: coothead on 13 Nov 2021, 07:55:19 am
Hi the GYM,

the label element is by default an inline element
The cure is to simply change that property, thus...
Code: [Select]
.toggleText {
    display: block;
    padding: 1em;
    cursor: pointer;
}

coothead
Title: Re: MentalBlock - CollapsibleSections
Post by: GrumpyYoungMan on 13 Nov 2021, 01:02:34 pm
Thanks!

I left this alone for too long, didn’t I!

I am sorry - and thanks!
Title: Re: MentalBlock - CollapsibleSections
Post by: coothead on 13 Nov 2021, 02:26:47 pm
Quote from: GrumpyYoungMan
I left this alone for too long, didn’t I!

I cannot agree.  :)

You should always feel free to ask questions
when the time is  exactly right for you.

coothead
Title: Re: MentalBlock - CollapsibleSections
Post by: GrumpyYoungMan on 16 Nov 2021, 06:00:16 am
Quote from: GrumpyYoungMan
I left this alone for too long, didn’t I!

I cannot agree.  :)

You should always feel free to ask questions
when the time is  exactly right for you.

coothead

Thanks, well (https://codepen.io/GrumpyYoungMan/full/YzxRBBp), what do you think?

I have nearly finished the layout/styling...
Title: Re: MentalBlock - CollapsibleSections
Post by: coothead on 16 Nov 2021, 06:47:08 am
Hi there GYM,

your page design looks OK to me though it does have
some accessibility issues that need your attention.

For example, in the "Quick Search" panel you have set
the background-color to #222 and the text color to
datkgreen- (#006400) , which is a total failure.

You should always use this tool, or similar...

Contrast Checker (https://webaim.org/resources/contrastchecker/)

...to check your choice of layout colours.

]coothead
Title: Re: MentalBlock - CollapsibleSections
Post by: GrumpyYoungMan on 16 Nov 2021, 02:54:32 pm
Thanks!

I get what you mean, looks okay on my screen buts it’s a 27” panel…

The biggest problem I find is filling it as lots of empty space?

I was impressed with my radio option hide/show…

Any suggestions on colour?

Thank you! :)
Title: Re: MentalBlock - CollapsibleSections
Post by: coothead on 16 Nov 2021, 04:57:48 pm
Quote from: GrumpyYoungMan
Any suggestions on colour?

As long as you ensure that all your colours work perfectly
accessibility wise, I see no reason to change your design.

As you will see from this example page of mine...

https://www.coothead.co.uk/the-pale-blue-dot/ (https://www.coothead.co.uk/the-pale-blue-dot/)

...my colour scheme choices are rather different to yours.

So follow your heart.  8)

coothead
Title: Re: MentalBlock - CollapsibleSections
Post by: John_Betong on 17 Nov 2021, 12:19:41 am
Any suggestions on colour?
I've been playing about with Swatch Colours and the idea is to create half-a-dozen colours in the CSS file then to use the colours in the style sheet:

https://this-is-a-test-to-see-if-it-works.tk/sp-a/jb-swatch/index.php (https://this-is-a-test-to-see-if-it-works.tk/sp-a/jb-swatch/index.php)

File: style.css
Code: [Select]
:root {
  --gff: #4285F4;
  --dad: #FBBC05;
  --son: #34A853;
  --bby: #EA4335;
  --wht: WHITE;
}
/* the colours above are grandfather, father, son, baby, white */
/* Use above colours as shown */
header {
 background-color: var(--dad);
 color: var(--wht);
}
nav,
footer {
 background-color: var(--son);
 color: var(--wht);
}
nav a {
 color: var(--wht);
}
nav a:hover {
 background-color: var(--bby);
 color: var(--wht);
}

Title: Re: MentalBlock - CollapsibleSections
Post by: Jason Knight on 17 Nov 2021, 04:46:08 am
Thanks, well (https://codepen.io/GrumpyYoungMan/full/YzxRBBp), what do you think?
Why is your first page heading a H2? What makes a list of actions a DIV separated by a vertical break? What makes the title of a section a LI and not a heading? What makes the side column a literary ASIDE inside MAIN? Why are you using DIV to do ARTICLE's job? Where are your FIELDSET?

And if you're having trouble with colours, try using HSL. It's still possible to screw it up, but if you keep your lightness out of the following ranges:

hue   light
blue  10..90
red   20..80
green 25..75

You can be "mostly" safe.
Title: Re: MentalBlock - CollapsibleSections
Post by: GrumpyYoungMan on 17 Nov 2021, 08:03:01 am
Thanks, well (https://codepen.io/GrumpyYoungMan/full/YzxRBBp), what do you think?
Why is your first page heading a H2? What makes a list of actions a DIV separated by a vertical break? What makes the title of a section a LI and not a heading? What makes the side column a literary ASIDE inside MAIN? Why are you using DIV to do ARTICLE's job? Where are your FIELDSET?

And if you're having trouble with colours, try using HSL. It's still possible to screw it up, but if you keep your lightness out of the following ranges:

hue   light
blue  10..90
red   20..80
green 25..75

You can be "mostly" safe.
This was what I was after, thanks Jason!

Also thanks Coothead and John! :)


How can I spilt the page to that layout without using the “main” to fill the gap for the header/footer? As what you are saying is use header, footer, aside (or Nav) and article? And in the header use h1?
Title: Re: MentalBlock - CollapsibleSections
Post by: GrumpyYoungMan on 17 Nov 2021, 08:30:20 am
Demo (https://codepen.io/GrumpyYoungMan/full/abyPaRY)

I have spilt it like you said (or the way I thought you meant?), but how do I get the left (aside) and right (main) to be actually the left and right columns?
Title: Re: MentalBlock - CollapsibleSections
Post by: coothead on 17 Nov 2021, 08:39:59 am
Hi there GYM,

you just need to change flex-direction: column to flex-direction: row.

coothead
Title: Re: MentalBlock - CollapsibleSections
Post by: GrumpyYoungMan on 17 Nov 2021, 08:49:23 am
Hi there GYM,

you just need to change flex-direction: column to flex-direction: row.

coothead
Thanks, but that doesn’t give me a header/footer with 2 rows that gives me 4 rows…
Title: Re: MentalBlock - CollapsibleSections
Post by: coothead on 17 Nov 2021, 09:32:43 am
Hi there GYM,

does this help...

Full Page View

https://codepen.io/coothead/full/JjyweLR (https://codepen.io/coothead/full/JjyweLR)

Editor View

https://codepen.io/coothead/pen/JjyweLR (https://codepen.io/coothead/pen/JjyweLR)

coothead
Title: Re: MentalBlock - CollapsibleSections
Post by: GrumpyYoungMan on 17 Nov 2021, 09:53:23 am
Perfect! Thanks Coothead!


So the only way to do it, was to put it in to a container?
Title: Re: MentalBlock - CollapsibleSections
Post by: coothead on 17 Nov 2021, 10:05:12 am
Hi there GYM,

I just used the basic full page layout that jason provided some while ago.

HTML
Code: [Select]
<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Flex full page</title>

<link rel="stylesheet" href="screen.css" media="screen">

</head>
<body>

 <header>
     <h1>Site Title</h1>
 </header>
   
 <main>
     <p>Lorem ipsum</p>

 </main>
   
 <footer>
     <p>footer</p>
 </footer>

</body>
</html>

screen.css
Code: [Select]
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
 }

html, body {
    height: 100%;
    background-color: #f0f0f0;
    font: normal 1em / 1.5em sans-serif;
}

body {
    display: flex;
    flex-direction: column;
}

body > header,
body > footer {
    flex: 0 0 auto;
    padding: 1em;
    background-color: #ace;
}

body > header {
    border-bottom: 1px solid #999;
}

body > footer {
    border-top: 1px solid #999;
}

main {
    flex: 1 0 auto;
    padding: 1em;
    background-color: #def;
}

coothead