How to align a text outside of the legend in a fieldset

How to align a text outside of the legend in a fieldset

Asked By: user194076
Originally Asked On: 2014-01-07 03:45:19
Asked Via: stackoverflow

I want to align a text outside of a legend element, but I cannot figure out a way to calculate the width of the legend.

This example works exactly as I want, but it uses a hard-coded top and left dimensions. This breaks as soon as the width of the legend changes. Is there an easy way to do this? (Latest browsers are fine. No need to support old versions):

<fieldset>
    <legend style="border:3px solid red">
        Legend legend legend
        <span style="position:absolute; top:0; left:180px;">Aligned Text</span>
    </legend>
    text text text
</fieldset>

http://jsfiddle.net/JS6dP/

He received 4 answers
without selecting any answers.

If the selected answer did not help you out, the other answers might!

All Answers For: How to align a text outside of the legend in a fieldset

sivakarthik’s answer to

How to align a text outside of the legend in a fieldset

Are you expecting legend alignment or anything else?,
It’s very hard to understand what you’r asking.

Karthikeyan Siva.

tewathia’s answer to

How to align a text outside of the legend in a fieldset

Wrap span tags around the ‘legend legend legend’ text in the legend tag, and the other position:absolute span tag and display:inline-block them.

<fieldset>
    <legend style="">
        <span style="border:3px solid red; display:inline-block;">Legend legend legend</span>
        <span style=" display:inline-block;"><span style="position:absolute; top:0px; padding-left:5px; ">Aligned Text</span></span>
    </legend>
    text text text
</fieldset>

DEMO

Abhitalks’s answer to

How to align a text outside of the legend in a fieldset

Easiest way would be to assign a position:relative to your legend and position:absolute to your child span.

See this fiddle: http://jsfiddle.net/JS6dP/14/

Remember, the trick is to use a right value which is just higher than the width of this span.

HTML:

<fieldset>
    <legend style="border:3px solid red">
        Legend legend legend legend
        <span class="legendText">Aligned Text</span>
    </legend>
    text text text
</fieldset>

CSS :

legend { position: relative; }
.legendText { 
    display: inline-block;
    position: absolute;
    width: 92px;
    top: -16px;
    right: -96px;
}

Hope that helps.

GCyrillus’s answer to

How to align a text outside of the legend in a fieldset

since ever form tags are difficult to style and even more if you want it cross-browsers.

when you face a legend that needs a peticular style, best is to drop the legend for a hx tag to preserve semantic as much as possible.

From then, hx tags are easy to style and your fieldset should make no fuss about it

<fieldset>
    <h1 class="legend">
        Legend legend legend
        <span>Aligned Text</span>
    </h1>
    text text text
</fieldset>

fieldset {
  margin-top:1.25em;/* if no legend, increase margin-top*/
}
h1.legend {
  font-size:1em;
  display:table;/* to shrink on its content */
  margin-top:-1em;/* go up where legend stands usally */
  background:white;/* hide fieldset beneath */
  border:solid red;
}
.legend span {
  position:absolute;
  margin:-0.7em 0 0 0.5em;/* climb a little more */
  /* no coordonates needed, it shows where it is suppose too */
}

result : http://codepen.io/anon/pen/wirLd

Of course, you should really check out the original question.

The post How to align a text outside of the legend in a fieldset appeared first on Tech ABC to XYZ.