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 3015 times)

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 653
  • Karma: +8/-0
    • GrumpyYoungMan
Re: MentalBlock - Collapsible Sections
« Reply #15 on: 8 Jan 2021, 05:40:34 pm »


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?
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 #16 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

Editor View:-

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

coothead
~ the original bald headed old fart ~

GrumpyYoungMan

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

Editor View:-

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

coothead
Thank you!!

Did you add comments?

I appreciate your help, sorry for being such a pain!
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 #18 on: 9 Jan 2021, 04:23:36 am »
Quote from: GrumpyYoungMan
Did you add comments?

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

coothead
~ the original bald headed old fart ~

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 854
  • Karma: +162/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: MentalBlock - CollapsibleSections
« Reply #19 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.
I'll fix every flaw, I'll break every law, I'll tear up the rulebook if that's what it takes. You will see, I will crush this cold machine.

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 653
  • Karma: +8/-0
    • GrumpyYoungMan
Re: MentalBlock - CollapsibleSections
« Reply #20 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!
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 #21 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
~ the original bald headed old fart ~

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 653
  • Karma: +8/-0
    • GrumpyYoungMan
Re: MentalBlock - CollapsibleSections
« Reply #22 on: 9 Jan 2021, 03:45:14 pm »
Well I am stuck again!

CodePen

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?
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 #23 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?
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...

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 854
  • Karma: +162/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: MentalBlock - CollapsibleSections
« Reply #24 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.
I'll fix every flaw, I'll break every law, I'll tear up the rulebook if that's what it takes. You will see, I will crush this cold machine.

GrumpyYoungMan

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

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

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 854
  • Karma: +162/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: MentalBlock - CollapsibleSections
« Reply #26 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.
I'll fix every flaw, I'll break every law, I'll tear up the rulebook if that's what it takes. You will see, I will crush this cold machine.

GrumpyYoungMan

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

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

coothead
~ the original bald headed old fart ~

GrumpyYoungMan

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

Editor View:-
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!



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