Make Fieldset border match TextArea - html

What's the best way to make the border around a fieldset more snug to a textarea? Consider:
<fieldset>
<legend>Note Edit</legend>
<textarea rows="30" cols="80" id="myTextArea">
</textarea>
</fieldset>
...unfortunately, the right-hand fieldset border extends all the way to the far-right of the browser screen, leaving a gap between the right-hand borders of the textarea and the fieldset.
What's the best way to resolve this? W3School's fieldset tag reference doesn't mention anything about sizing fieldsets or their borders.
Using IE9 on a Win7 machine.

Just add the following CSS:
fieldset {
padding:0;
display:inline;
}
The borders of the fieldset are almost 'attached' to the textarea.
You can see this here-> http://jsfiddle.net/Cu2Nv/1

Related

full box border with missing part on title of box css only

I am making a project that has may div and every div i have a full box border to determine or see the boundary for each div i want to make it look cooler by adding a title to each box in the border itself i want to achieve something like this image below
the image below is the thing i want to achieve using css. i search for a way but so far none is working almost all is saying to use image with the design of this kind of border but i am trying to make it using border-style but i am not sure if this is even possible any idea is appreciated
you would use the fieldset html tag with a legend to achieve this,
here is the code:
<div>
<fieldset>
<legend>Box title:</legend>
<span>foo</span>
<span>foo</span>
<span>foo</span>
</fieldset>
</div>
and here is a fiddle:
http://jsfiddle.net/oogley_boogley/kzn2g2nh/2/
you should use <fieldset> for that and you should change the fieldset css style to display:block for styling otherwise it will act as an inline element.
documentation
Fiddle DEMO
legend{
color:red;
}
fieldset{
display:block;
height:100px;
}

Valid to have span around legend in a fieldset?

I'm trying to style the legend in a fieldset and im running into a lot of troubles. As my site is responsive and the legend text length varies I can't achieve what I want consistently with margins, relative or absolute positioning.
<fieldset>
<legend>Title</legend>
<label>Label</label>
<input type="text">
</fieldset>
All I need is for the legend to behave like a normal block level. The only way ive found to do this is to wrap the legend in a span. Is this valid HTML? Im assuming that there arn't any CSS only solutions?
<fieldset>
<span>
<legend>Title</legend>
</span>
<label>Label</label>
<input type="text" />
</fieldset>
A legend element is only valid as the first child of a fieldset element. See the spec here.
I've created a fiddle here with your code that wraps the <legend> element in a <span>, and it causes an error in the W3C validator.
Another solution is to use CSS to hide the legend from view:
legend { display: none; }
Then you can create and style your own custom headings for the fieldset.

Space appears above form (in Chrome only)

I've got a form, which has a legend and a set of fields. I'm using Bootstrap 2.x to style it. For some reason, space appears above the form, but in Chrome only (it renders fine in IE10 and Firefox). I've pared it back to just the basics to demonstrate the issue I'm having:
<form>
<fieldset>
<legend>Legend</legend>
<div class="control-group">
<!-- This div results in the space appearing above the form -->
<label class="control-label">First Name</label>
<div class="controls">
<input type="text" />
</div>
</div>
</fieldset>
</form>
If I remove the class="control-group" from the div wrapping the input field, the space magically disappears, despite seemingly having nothing to do with this issue. I've checked all the margins and padding of everything in Chrome, and there's nothing, so I don't know where this spacing is coming from. I need to use this class on these field divs, as I'm implementing a horizontal form. I'm pulling my hair out trying to work out how to fix this issue - any ideas? Here's a jsfiddle to demonstrate: http://jsfiddle.net/christhecoder/kDrVH/3/
Any help would be much appreciated!
http://jsfiddle.net/kDrVH/10/
#import url("http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css");
legend+.control-group{
margin-top:0px;
}
you get 20 margin from this: legend+.control-group
This is because bootstrap CSS rules for <legend> has margin-bottom:20px
Just add a CSS rule:
legend {
margin-bottom: 0px;
}
Also you can add this only to your legend label:
<legend style="margin-bottom: 0px;">
// Whatever you want
</legend>
JSFIDDLE DEMO
Instead of
legend+.control-group {
margin-top: 20px;
}
Use this.
It will preserve your current layout and remove space above the form.
legend+.control-group {
padding-top: 20px;
}

Center text vertically next to a one row textarea?

I want the text that sits next to a one row textarea to be centered vertically with the textarea.
This is the default behavior if I put text next to an input of type="text".
Id like to stick with the single row textarea rather than an input here because this field is there for the user to paste a fair amount of pre formatted data into. The user wont normally care what the data says or need to see it unless the program finds a problem. If a problem is found an error is shown, at which point its helpful if the user can drag out the text area to view the data and research the issue.
My Code:
<tr>
<td class="vert" > New PNR Info
<textarea rows="1" cols="20" name="origInfo1" id="origInfo1" style="overflow:hidden"> </textarea></td>
<td align="center">Change Fee
<input type="text" size="4" id="fee"name="fee"></td>
</tr>
Ive Tried:
css like this:
.vert {
vertical-align: middle;
}
and this vertical-align: top;
and wraping the two in a p tag like this
<p>New PNR Info<textarea rows="1" cols="20" name="origInfo1" id="origInfo1" style="overflow:hidden"> </textarea></p>
to no avail.
If my question is not clear maybe a screenshot will help. I want the offending text by the red arrow to be cetered like the text by the green arrow.
Apply the vertical alignment to all elements like this
Demo
<p class="whatever">
<label for="alignme">Label Text</label>
<textarea id="alignme"></textarea>
</p>
.whatever * {
vertical-align: middle;
}
.whatever * is equivalent to
.whatever label, .whatever textarea {
vertical-align: middle;
}
It doesn't seem logical at first, but the vertical-align property needs to go on the taller element:
http://jsfiddle.net/N5NuA/
textarea {
vertical-align: middle;
}
I believe the problem is you are setting the parent (td or p) to align to the top and since your textarea is inside that element it aligns according to parent, not the text.
What I think will work is setting the textarea vertical alignment.
<textarea style="vertical-alignment:middle">
If that does not work, also change the parent element to middle. Also try text-top or text-bottom for the text-area if those changes do not work also.

CSS WTF : form button not horizontally aligned (screwed up in FF but OK in Chrome)

OK here is what I found out, when I assign height to all my form elements, they will not be aligned horizontally, when they actually should.
Chrome rendered this OK, FF pushed the form button too far up.
Is there an elegant solution to this?
<form>
<input class="input_text" type="text" style="height:40px" value="some text">
<select style="height:40px">
<option value="0">0</option>
<option value="1">1</option>
</select>
<input type="submit" value="Search" style="height:40px">
</form>
Make sure the button has no padding/margin:
style="height:40px;margin:0;padding:0"
Each browser does its own thing regarding padding and margin.
Find out more about reset CSS and why/how to use them.
This is vertical align, not horizontal. Looks like this is bug in FF. As the work around add the "vertical-align:top" to the button
you can try to ditch input type button and use <button type="submit">Hello Button</button> then reset your form elements.
by using button tag you will have option to add nested elements. like <button><span>Funky Button!</span></button> for background image tricks and so on.
reset for form elements may look something like this:
/*remove ie side spacing(paddings)*/
button {position:relative; border:0; padding:0; cursor:pointer; overflow:visible;}
/*remove extra padding for firefox*/
button::-moz-focus-inner {border: none;}
button span {position:relative; display:block; white-space:nowrap;}
/*fix for webkit (safari-chrome)*/
#media screen and (-webkit-min-device-pixel-ratio:0) {button span {margin-top: -1px;}}
input {border:0; margin:0; padding:0;}
textarea {border:0; margin:0; padding:0;}
then you can add your borders styles backgrounds as you want and they should look identical in almost every modern browser
I've found this to be a bug in Firefox.
In the past I've fixed it with
1: a firefox specific hack.
2: not setting the height of the button ever. It remains vertically centered in all browsers.