Page 1 of 2
fieldset code
Posted: Sat Feb 05, 2022 7:10 pm
by ReneH4
I just found the fieldset code.
I entered it in a few modules, but somehow it does not display a box.
Is it overwritten by other classes? Running 1079.
Code: Select all
<fieldset style=" border-radius: 8px; border: 1px solid black; width: 500px; margin: 1em auto;">
<legend style="width: 100%; padding: 0;">
<div style="display: inline-block; line-height: 1.2;">
<div style="float: left; padding: 0 5px;">Legend</div>
<div style="float: left; height: 1px; background-color: black; width: 359px; margin-top: 11px;"></div>
<div style="float: left; padding: 0 5px;">Other Stuff</div>
</div>
</legend>
Some tect or variable here......
</fieldset>
Re: fieldset code
Posted: Sat Feb 05, 2022 10:15 pm
by ecartz
ReneH4 wrote: ↑Sat Feb 05, 2022 7:10 pm
Is it overwritten by other classes? Running 1079.
What you've written is pure HTML with the style attributes set. You don't say where you put it, so we can't say anything about PHP classes. But you can't override it with CSS classes, because CSS can't override the style attribute. In general, it won't play nice with Bootstrap, so it will likely look odd in things where Bootstrap is expecting to be able to apply its own sizing. It would be better to use a Bootstrap-based example rather than the style attribute. But that's unlikely to cause it not to appear.
The more likely problem is that you're ending up with invalid HTML and browsers are just skipping over it entirely. Throw the page in a validator and see what it says.
Re: fieldset code
Posted: Sun Feb 06, 2022 7:47 am
by ReneH4
Will try, thanks Matt!
ecartz wrote: ↑Sat Feb 05, 2022 10:15 pm
ReneH4 wrote: ↑Sat Feb 05, 2022 7:10 pm
Is it overwritten by other classes? Running 1079.
What you've written is pure HTML with the style attributes set. You don't say where you put it, so we can't say anything about PHP classes. But you can't override it with CSS classes, because CSS can't override the style attribute. In general, it won't play nice with Bootstrap, so it will likely look odd in things where Bootstrap is expecting to be able to apply its own sizing. It would be better to use a Bootstrap-based example rather than the style attribute. But that's unlikely to cause it not to appear.
The more likely problem is that you're ending up with invalid HTML and browsers are just skipping over it entirely. Throw the page in a validator and see what it says.
Re: fieldset code
Posted: Sun Feb 06, 2022 10:24 am
by heatherbell
ReneH4 wrote: ↑Sat Feb 05, 2022 7:10 pm
I entered it in a few modules, but somehow it does not display a box.
I *think* you cannot have a <div> as a child of <legend> and those <div>s are breaking it so try without those <div>s
Re: fieldset code
Posted: Sun Feb 06, 2022 11:17 am
by ReneH4
I tried that already.
The text is there but not the pretty box.....
I had it entered in the products description like in the attachement.
Code, no more no less:
Code: Select all
<fieldset><legend>TEST:</legend> TEXT</fieldset>
heatherbell wrote: ↑Sun Feb 06, 2022 10:24 am
ReneH4 wrote: ↑Sat Feb 05, 2022 7:10 pm
I entered it in a few modules, but somehow it does not display a box.
I *think* you cannot have a <div> as a child of <legend> and those <div>s are breaking it so try without those <div>s
Re: fieldset code
Posted: Sun Feb 06, 2022 11:20 am
by ReneH4
I saw the idea on this site and like the boxes:
https://www.123inkt.nl/Inkt-cartridges/ ... p2969.html
Wanted to play around a bit an see if it's usefull...
Re: fieldset code
Posted: Sun Feb 06, 2022 11:28 am
by ecartz
ReneH4 wrote: ↑Sun Feb 06, 2022 11:17 am
Code, no more no less:
Code: Select all
<fieldset><legend>TEST:</legend> TEXT</fieldset>
Maybe
Code: Select all
<fieldset class="border border-3 rounded-pill"><legend>TEST:</legend> TEXT</fieldset>
Re: fieldset code
Posted: Sun Feb 06, 2022 11:59 am
by ReneH4
That shows the "bucket" (with a radius of 50), but not the cover of the "bucket".
Image 1 shows with radius 50 on, the second with radius off.
ecartz wrote: ↑Sun Feb 06, 2022 11:28 am
Maybe
Code: Select all
<fieldset class="border border-3 rounded-pill"><legend>TEST:</legend> TEXT</fieldset>
Re: fieldset code
Posted: Sun Feb 06, 2022 12:54 pm
by ReneH4
I also tried to insert this code into the order confirmation message, but unfortunately it is not supported for mail....
Sometimes things look so easy
Re: fieldset code
Posted: Mon Feb 07, 2022 6:25 am
by heatherbell
ReneH4 wrote: ↑Sun Feb 06, 2022 12:54 pm
Sometimes things look so easy
LOL - I know that feeling well!
A quick Google shows on Stackoverflow that others also have issues with <fieldset> and Bootstrap
https://stackoverflow.com/questions/459 ... -bootstrap
so you might have to rethink your approach.