CUTCODEDOWN
Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, or have issues with using the registration form, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Author Topic: MentalBlock - CollapsibleSections  (Read 3017 times)

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 653
  • Karma: +8/-0
    • GrumpyYoungMan
MentalBlock - CollapsibleSections
« 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



Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

coothead

  • Sr. Member
  • ****
  • Posts: 322
  • Karma: +79/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: MentalBlock - CollapsibleSections
« Reply #1 on: 8 Jan 2021, 01:05:46 pm »
Hi there GrumpyYoungMan,

does this help...

Full Page View:-

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

Editor View:-

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

Note:-

I have commented the amendments.  8)

coothead
« Last Edit: 8 Jan 2021, 01:07:20 pm by coothead »
~ the original bald headed old fart ~

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 653
  • Karma: +8/-0
    • GrumpyYoungMan
Re: MentalBlock - CollapsibleSections
« Reply #2 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!
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 653
  • Karma: +8/-0
    • GrumpyYoungMan
Re: MentalBlock - CollapsibleSections
« Reply #3 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:? 
« Last Edit: 8 Jan 2021, 01:59:56 pm by GrumpyYoungMan »
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

coothead

  • Sr. Member
  • ****
  • Posts: 322
  • Karma: +79/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: MentalBlock - CollapsibleSections
« Reply #4 on: 8 Jan 2021, 02:13:55 pm »
Hi there GrumpyYoungMan,

check out the links in my previous post.  8)

coothead
~ the original bald headed old fart ~

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 653
  • Karma: +8/-0
    • GrumpyYoungMan
Re: MentalBlock - CollapsibleSections
« Reply #5 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!!!
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 653
  • Karma: +8/-0
    • GrumpyYoungMan
Re: MentalBlock - CollapsibleSections
« Reply #6 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!!
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

coothead

  • Sr. Member
  • ****
  • Posts: 322
  • Karma: +79/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: MentalBlock - CollapsibleSections
« Reply #7 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
~ the original bald headed old fart ~

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 653
  • Karma: +8/-0
    • GrumpyYoungMan
Re: MentalBlock - CollapsibleSections
« Reply #8 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 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...
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 653
  • Karma: +8/-0
    • GrumpyYoungMan
Re: MentalBlock - CollapsibleSections
« Reply #9 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...
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 653
  • Karma: +8/-0
    • GrumpyYoungMan
Re: MentalBlock - CollapsibleSections
« Reply #10 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?
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

coothead

  • Sr. Member
  • ****
  • Posts: 322
  • Karma: +79/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: MentalBlock - CollapsibleSections
« Reply #11 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
~ the original bald headed old fart ~

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 653
  • Karma: +8/-0
    • GrumpyYoungMan
Re: MentalBlock - CollapsibleSections
« Reply #12 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?
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

coothead

  • Sr. Member
  • ****
  • Posts: 322
  • Karma: +79/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: MentalBlock - CollapsibleSections
« Reply #13 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...



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

My test browsers are Firefox and Vivaldi.

coothead
« Last Edit: 8 Jan 2021, 05:12:49 pm by coothead »
~ the original bald headed old fart ~

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 653
  • Karma: +8/-0
    • GrumpyYoungMan
Re: MentalBlock - CollapsibleSections
« Reply #14 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!
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

 

SMF spam blocked by CleanTalk

Advertisement