I created a div to create this input area, however, it's evident that this div will run across the whole page. Whenever I try to style, say add a border under the legend, the border runs across the full page. What I want is to restrict the width of the div to the textarea box, so that even the border runs across only from the start of the textarea to the end of the textarea.
By default, a block element will grow to occupy the available inner width of it's parent. To have it shrink down to the size of it's largest child, use display: inline-block instead.
div {
border: 1px solid red;
display: inline-block;
}
<div id="input_area">
<fieldset>
<legend>Input Text</legend>
<textarea rows="10" cols="80"></textarea>
</fieldset>
</div>
you can put a wrapper around it assuming you wanted it on its own line:
<div>
<div id="input_area">
<fieldset>
<legend>Input Text</legend>
<textarea rows="10" cols="80"></textarea>
</fieldset>
</div>
</div>
and then with your css change your input area to an inline block.
#input_area {display: inline-block;}
Related
I want to display the unit of the input next to it.
I don't want the unit "g" to break into the next line when the size of the div changes.
The input should use all remaining space inside the div, as long as this does not cause a line break.
<div style="width:100px">
<input type="number" />
g
</div>
Just use display:flex and surround internal elements with a div tag. More on flex you can find on Mother Google.
Hope this helps.
<div style="width:100px;display:flex;">
<div><input type="number" /></div>
<div>g</div>
</div>
Easiest way and cross-browser supported way is using display - table and table-cell
You can wrap 'g' inside another <div>. Then you can get it in side-by-side irrespective of width by following CSS
body > div {
display: table;
}
body > div > * {
display: table-cell;
}
<div style="width:100px">
<input type="number" />
<div>g</div>
</div>
Try this.,
just give some room for the text to display
Change width of your div
<div style="width:200px;">
<input type="number" />
g
</div>
I have multiple fieldset elements within a single form element oriented using Bootstrap 3.0.0 such that I have three distinct columns. I am okay with the way the form displays in smaller viewport sizes. However, I would like the fieldsets to always align with one another as the viewport size changes. I am not tied to using Bootstrap 3.0.0 specifically. I am simply using it here as an example. Here is my jsfiddle. Once I started using Bootstrap panel within fieldset elements, I felt I was heading down the wrong path.
What is the correct way to achieve the alignment with Bootstrap 3.x+?
Solved this problem last week, but I thought I would update the answer. fieldset elements will not really "align" with one another where the height and widths conform to one another because when content changes, the fieldset size will change as well. A better way to achieve this effect though would be to remove the borders around each fieldset and contain everything within a Bootstrap 'container-fluid' div. Other 'container-fluid' div elements can then be stacked so that their containing fieldset elements line up.
Remove the border around each fieldset
fieldset.fs-border {
border: 1px groove #ddd;
...
}
Remove the references to panel classes (not sure why I added this in the first place. Using panel is more useful if I want to wrap all fieldset elements within a collapsable panel, for example.):
<fieldset class="col-sm-4 panel panel-primary fs-border">
<legend class="panel-heading legend-border">Primary Contact</legend>
Use display:table, remove the border, and specify this in a class referenced by the containing div.
.wide-container {
display: table;
background-color:#d7e0e2;
border: none;
width: 100%;
}
All fieldset elements would then be contained within that div if you wanted to stack "groups" of fieldset elements. Their borders will all appear to line up uniformly:
<div id="fieldsetGroup2" class="wide-container container-fluid">
<fieldset id="fieldset1" ...>
</fieldset>
<fieldset id="fieldset2" ...>
</fieldset>
...
</div>
<div id="fieldsetGroup2" class="wide-container container-fluid">
<fieldset id="fieldset3" ...>
</fieldset>
<fieldset id="fieldset4" ...>
</fieldset>
...
</div>
where container-fluid will make the content span the entire area contained within the div.
How can I have a textbox that inherits the width of it's container?
For example I have a div that has a textbox inside it.
<div id='content' style='width:100%;'>
<input type='text' name='txtUsername'>
</div>
What I wanted to do is when I resize my browser, the text box must follow the width of it's parent div.
With the code above, the textbox always overflow it's container whenever I resize the browser to a smaller width.
You should use box-sizing:border-box together with width:100%.
This way input will fit 100% of container's width but will not overflow it because of added input's padding:
#content input
{
width:100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
Live demo:
http://jsfiddle.net/745Mt/1/
More information about box-sizing CSS property with examples: http://css-tricks.com/box-sizing/
Just add style='width:100%;' (or how much % do you need) to the Input
<div id='content' style='width:100%;'> <input style='width:100%;' type='text' name='txtUsername'> </div>
Have you tried setting the width of the input to 100%? e.g.
input {width:100%;}
Not the most self explanatory title I've ever authored.
What I'm trying to do (see this fiddle) is for the text field and button to remain positioned right next to eachother (no margins), with the button to the right, and thetext field covering 100% of the remaining width of the container that the button isn't occupying. The relationship between the two should remain even if the containing element is resized.
Browser requirements: IE9+, Firefox, Webkit
Check out this little demo: little link. The code is pretty-self explaining, but here's the basic idea:
<div class = "container">
<div class = "cell">
<input type="text" placeholder="Glee's awesome!" />
</div>
<div class = "cell" style = "width: 1px"> <!--make sure it's only large enough to fit the button-->
<button type="submit">Glee</button>
</div>
</div>
CSS:
.container {
display: table;
width: 100%;
}
.cell {
display: table-cell;
}
Hope that helped!
Consider the following test case, in which a floated and an inline element are placed inside a <fieldset> versus a <div>:
.float {
float: right;
background-color: red;
height: 200px;
}
<h1>With fielset</h1>
<fieldset>
<span>Inline!</span>
<div class="float">Float!</div>
</fieldset>
<fieldset>
<span>Inline!</span>
<div class="float">Float!</div>
</fieldset>
<h1>With div</h1>
<div>
<span>Inline!</span>
<div class="float">Float!</div>
</div>
<div>
<span>Inline!</span>
<div class="float">Float!</div>
</div>
When rendered, fieldset containers are 200 pixels tall (they clear the floats?) while the div containers are only as tall as the inline elements. What is the cause of this behavior, and is there a workaround which allows the fieldset containers to behave as the div containers do?
Apparently <fieldset> elements are supposed to generate block formatting contexts for their contents:
The fieldset element is expected to establish a new block formatting context.
That's why floated elements don't float out of them. I would guess that this has to do with the nature of fieldsets as visual form control groups. There could be other reasons, but off the top of my head that sounds the most plausible.
There doesn't appear to be a way to undo this, but I wouldn't be surprised; you can't destroy a block formatting context after creating it.
By the way, <fieldset>s don't clear floats (unless you give them a clear style of something other than none). When an element clears floats (or is said to have clearance), it clears only the preceding floats that touch it within the same formatting context. A parent element doesn't clear its children's floats either, but it can establish a formatting context for them to float in. This is the behavior seen with <fieldset>, and it's also what happens when you set overflow to something other than visible on a parent element.
From the spec (emphasis mine):
This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. The 'clear' property does not consider floats inside the element itself or in other block formatting contexts.
Additionally, as mentioned in the comments, there is no clearing style defined by browsers for that element, so the default clearing style would already be the default value of none. This is shown in this demo, in which only one of the <fieldset>s coming after the floating box is defined to have clearing properties and is indeed the one clearing the float.
.float {
float: right;
background-color: red;
height: 200px;
}
.clear {
clear: right;
}
<div class="float">Float!</div>
<fieldset>
<legend>Fieldset!</legend>
</fieldset>
<fieldset class="clear">
<legend>Clearing fieldset!</legend>
</fieldset>
External link of the demo
Set height for wrapper div;
<html>
<head>
<style type="text/css">
.float {float:right; background-color:red; height:200px;}
</style>
</head>
<body>
<fieldset>
<span>Inline!</span>
<div class="float">Float!</div>
</fieldset>
<fieldset>
<span>Inline!</span>
<div class="float">Float!</div>
</fieldset>
<div style="height:200px">
<span>Inline!</span>
<div class="float">Float!</div> </div>
<div style="height:200px">
<span>Inline!</span>
<div class="float">Float!</div>
</div>
</body>
</html>