Please note the following HTML for a Tabbed display (for an option page):
I would like to maintain the same height as tab1 for tab2 and tab3
<article>
<nav> <!-- content --> </nav>
<section id="tab1"> <!-- content --> </section>
<section id="tab2"><iframe src=""></iframe></section>
<section id="tab3"><iframe src=""></iframe></section>
</article>
tab1 always loads first with display: block; and both tab2 & tab3
have display: none;
tab1 has variable content, so it is not practical to set a fixed height or min-height
Setting display: flex; on article interferes with nav
Setting display: flex; also interferes with display: none;
nav can not be moved to outside article
Both tab2 & tab3 display with shorter height which results in unsightly resizing of the overall box
N.B. The HTML is used in a Firefox/Chrome Extension's Options page, and NOT a web page. Since Chrome uses Panels and Firefox uses Options page, Pixel based solutions might not work as expected. There might also be Firefox/Chrome specific solutions.
To have dynamic equal height elements without script, you could use CSS Flexbox.
Here I added a couple of input's and label's to do the actual tabbing, and an extra div as a wrapper for the section's.
By setting overflow: hidden on the article, give the div the size times amount of section's, one can simply slide it back and forth, sideways, to achieve your requirements.
Fiddle demo
Here done as a Stack snippet with a twist, animated the slide and, as commented, with 4 sections
article {
overflow: hidden;
}
article > input {
display: none;
}
article nav {
width: 100%;
background: lightgreen;
}
article nav label {
display: inline-block;
padding: 3px 10px;
}
article > div {
display: flex;
width: 400%;
transition: transform 1s; /* added to animate the slide */
}
article section {
width: 100%;
padding: 3px 10px;
box-sizing: border-box;
background: lightblue;
}
article input[id="tab1"]:checked ~ div {
transform: translateX(0);
}
article input[id="tab2"]:checked ~ div {
transform: translateX(-25%);
}
article input[id="tab3"]:checked ~ div {
transform: translateX(-50%);
}
article input[id="tab4"]:checked ~ div {
transform: translateX(-75%);
}
<article>
<!-- added inputs and labels for this demo -->
<input type="radio" name="radiotabs" id="tab1" checked>
<input type="radio" name="radiotabs" id="tab2">
<input type="radio" name="radiotabs" id="tab3">
<input type="radio" name="radiotabs" id="tab4">
<nav>
<label for="tab1">Tab 1</label>
<label for="tab2">Tab 2</label>
<label for="tab3">Tab 3</label>
<label for="tab4">Tab 4</label>
</nav>
<!-- this extra wapper is needed to solve this without script -->
<div>
<section id="stab1">
Section 1
</section>
<section id="stab2">
Section 2
<br>this has more content
<br>this has more content
<br>this has more content
</section>
<section id="stab3">
Section 3
</section>
<section id="stab4">
Section 4
</section>
</div>
</article>
You could do it easily with a bit of jquery like this:
$(document).ready(function() {
$(window).resize(function() {
$(".div1").height("auto");
$(".div2").height("auto");
$(".div3").height("auto");
var height = Math.max($(".div1").outerHeight(), $(".div2").outerHeight(), $(".div3").outerHeight());
$(".div1").height(height);
$(".div2").height(height);
$(".div3").height(height);
}).resize();
});
The variable height will be highest height of any of the 3 elements and then you apply it to all 3.
FIDDLE
I added the "resize" function to make it work if user resizes the window as the height may change while doing it.
In a responsive design website, I need to show four links presented side-by-side and have the collection of those 4 links enclosed within a self-resizing border. If all four links can't all fit horizontally on one line without overwriting each other, those links that can't fit should drop down to subsequent lines and the bounding border box should increase in size.
My main problem is that the bounding box... doesn't surround the links or resize properly. What am I doing wrong?
Here's the code and CSS that I've tried: http://jsfiddle.net/K3jyD/
HTML:
<div class="boundingbox">
<div class="boundeditem">
<div style="text-align: center;"><a title="Link Number One" href="http://www.abc.com/1/"><span><strong>NUMBER ONE</strong></span></a>
</div>
</div>
<div class="boundeditem">
<div><a title="Link Number Two" href="http://www.abc.com/2/"><span><strong>NUMBER TWO</strong></span></a>
</div>
</div>
<div class="boundeditem">
<div><a title="Link Number Three" href="http://www.abc.com/3/"><span><strong>NUMBER THREE</strong></span></a>
</div>
</div>
<div class="boundeditem">
<div style="text-align: center;"><a title="Link Number Four" href="http://www.abc.com/4/"><span><strong>NUMBER FOUR</strong></span></a>
</div>
</div>
</div>
CSS:
.boundingbox {
border: 1px solid red;
padding:10px;
margin:10px;
clear:both;
}
.boundeditem {
width:25%;
min-width:25%;
max-width:25%;
float:left;
padding:10px;
}
.boundeditem div {
text-align: center;
}
.boundeditem a {
text-decoration: underline;
}
I am not permitted to use jquery or external javascript libraries other than plain old html and css on this project.
The float:left is bringing your links outside the bounding box. Try this instead:
.boundeditem {
width:25%;
min-width:25%;
max-width:25%;
display: inline-block;
padding:10px;
}
If you want four links next to each other rather than three, make the width slightly smaller than 25% and put the padding in the div inside boundeditem rather than boundeditem itself.
.boundeditem {
width:24%;
min-width:24%;
max-width:24%;
display: inline-block;
}
.boundeditem div {
text-align: center;
padding: 10px;
}
add this to the .boundingbox
.boundingbox {
position: absolute;
height: auto;
}
Not sure if that's exactly what you're looking for.
I have the following HTML:
<div class="columns clearfix">
<div class="xl float-left gutter-right"
data-ng-show="modal.data.createdDate">
<span class="label">Created</span>
<input class="full-width" type="text" value="{{modal.data.createdDate }}" />
</div>
<div class="xl float-left"
data-ng-show="modal.data.modifiedDate">
<span class="label">Modified</span>
<input class="full-width" type="text" value="{{modal.data.modifiedDate }}"/>
</div>
</div>
I am looking for a way to simplify this HTML with some CSS. Can someone tell me how I could remove the gutter-right and inline and make it so that this is introduced with a class in the top-level <div>? Somehow I want to specify gutter-right but just have it for the first inside <div>. Note I am using IE9 browsers and above. Also if it's possible I would like to have it so I don't need to specify the span.label and the input.full-width.
Note the reason I am trying to do this is because I have many fields set up like that with two fields on a row and a label above each field.
CSS:
.float-left {
float: left;
}
.gutter-right {
margin-right: 2rem;
}
.form label, .form .label {
display: block;
margin-bottom: 0.5rem;
}
.full-width {
box-sizing: border-box;
width: 100%;
}
Just use element:nth-child(1){ /*whatever*/ }
or element:first-child { /*whatever*/ }
You can also use element:nth-of-type(1){ /*whatever*/ }
You can just use E:first-child css selector.
The :first-child selector is used to select the specified selector, only if it is the first child of its parent.
Example
List of CSS selectors
Instead of a rule for .gutter-right, go for .xl:first-child:
.xl:first-child {
margin-right: 2rem;
}
Fiddle first-child on MDN
I am designing a web page with multi line Label name & input type file. i tried very hard to arrange in same line sequence but failed to do. Is there any idea about it?
please take a look enter link description here , it looks very ugly and
I am not really sure what you are looking for, but check out the jsfiddle changes I had made. I modified both CSS classes a little bit.
Have a look at this tutorial: http://www.websiteoptimization.com/speed/tweak/forms/
You can check this fiddle with the following modifications:
removing deprecated attributes align from div and moving inlined CSS style (style attribute) to the CSS file
same for b element used for the text of the label: span is better, and it's already bold as its parent. Or font-weight: bold; would be added in CSS
display: inline-block; is used instead of floats. No need to clear them afterward. IE7 and 6 need a fix (in comment) if you support them. This allow you to give the element a width (like you could do with any block element) and still get them on the same horizontal line (like you could do with any inline element). You'll have 4px due to whitespace in your HTML code, because whitespace shows up in inline element like two span separated by a space but there's a fix.
HTML code
<div id="divid1">
<p>
<label class="labelname"> <span> select Image* :</span>
<input type="file" name="file1" class="hide-file" />
</label>
</p>
<p>
<label class="labelname"> <span>XML File* :</span>
<input type="file" name="file2" class="hide-file" />
</label>
</p>
</div>
CSS
#divid1 {
padding: 50px;
}
.labelname {
width: 100%; /* or at least approx. 380px */
min-height: 30px;
display: block;
background: lightgreen;
font-weight: bold;
margin-bottom: 2px;
}
/* Only for IE7 */
/*.labelname span,
.hide-file {
display: inline;
zoom: 1;
}
*/
.labelname span {
display: inline-block;
width: 140px;
text-align: right;
background-color: lightblue;
}
.hide-file {
display: inline-block;
opacity:0.5;
}
now it looks good :)
html
<div id="divid1" align="center" style="padding:50px;">
<div class="formrow">
<label class="labelname" for="hide-file">Select Image* :</label>
<input type="file" name="file1" class="hide-file" />
</div>
<div class="formrow">
<label class="labelname" for="hide-file">XML File* :</label>
<input type="file" name="file2" class="hide-file" />
</div>
</div>
css
.labelname {
background: green;
font: bold 2px;
margin-bottom: 2px;
font-weight: bold;
float: left
}
.hide-file {
position: relative;
opacity: 0.5;
float: right
}
.formrow {
width: 400px
}
I'm trying to let an <input type="text"> (henceforth referred to as “textbox”) fill a parent container by settings its width to 100%. This works until I give the textbox a padding. This is then added to the content width and the input field overflows. Notice that in Firefox this only happens when rendering the content as standards compliant. In quirks mode, another box model seems to apply.
Here's a minimal code to reproduce the behaviour in all modern browsers.
#x {
background: salmon;
padding: 1em;
}
#y, input {
background: red;
padding: 0 20px;
width: 100%;
}
<div id="x">
<div id="y">x</div>
<input type="text"/>
</div>
My question: How do I get the textbox to fit the container?
Notice: for the <div id="y">, this is straightforward: simply set width: auto. However, if I try to do this for the textbox, the effect is different and the textbox takes its default row count as width (even if I set display: block for the textbox).
EDIT: David's solution would of course work. However, I do not want to modify the HTML – I do especially not want to add dummy elements with no semantic functionality. This is a typical case of divitis that I want to avoid at all cost. This can only be a last-resort hack.
With CSS3 you can use the box-sizing property on your inputs to standardise their box models.
Something like this would enable you to add padding and have 100% width:
input[type="text"] {
-webkit-box-sizing: border-box; // Safari/Chrome, other WebKit
-moz-box-sizing: border-box; // Firefox, other Gecko
box-sizing: border-box; // Opera/IE 8+
}
Unfortunately this won't work for IE6/7 but the rest are fine (Compatibility List), so if you need to support these browsers your best bet would be Davids solution.
If you'd like to read more check out this brilliant article by Chris Coyier.
Hope this helps!
You can surround the textbox with a <div> and give that <div> padding: 0 20px. Your problem is that the 100% width does not include any padding or margin values; these values are added on top of the 100% width, thus the overflow.
Because of the way the Box-Modell is defined and implemented I don't think there is a css-only solution to this problem. (Apart from what Matthew described: using percentage for the padding as well, e.g. width: 94%; padding: 0 3%;)
You could however build some Javascript-Code to calculate the width dynmically on page-load... hm, and that value would of course also have to be updated every time the browserwindow is resized.
Interesting by-product of some testing I've done: Firefox does set the width of an input field to 100% if additionally to width: 100%; you also set max-width to 100%. This doesn't work in Opera 9.5 or IE 7 though (haven't tested older versions).
How do I get the textbox to fit the container in 2019?
Just use display: flex;
#x {
background: salmon;
padding: 1em;
display: flex;
flex-wrap: wrap;
}
#y, input {
background: red;
padding: 0 20px;
width: 100%;
}
<div id="x">
<div id="y">x</div>
<input type="text"/>
</div>
This is unfortunately not possible with pure CSS; HTML or Javascript modifications are necessary for any non-trivial flexible-but-constrained UI behavior. CSS3 columns will help in this regard somewhat, but not in scenarios like yours.
David's solution is the cleanest. It's not really a case of divitis -- you're not adding a bunch of divs unnecessarily, or giving them classnames like "p" and "h1". It's serving a specific purpose, and the nice thing in this case is that it's also an extensible solution -- e.g. you can then add rounded corners at any time without adding anything further. Accessibility also isn't affected, as they're empty divs.
Fwiw, here's how I implement all of my textboxes:
<div class="textbox" id="username">
<div class="before"></div>
<div class="during">
<input type="text" value="" />
</div>
<div class="after"></div>
</div>
You're then free to use CSS to add rounded corners, add padding like in your case, etc., but you also don't have to -- you're free to hide those side divs altogether and have just a regular input textbox.
Other solutions are to use tables, e.g. Amazon uses tables in order to get flexible-but-constrained layout, or to use Javascript to tweak the sizes and update them on window resizes, e.g. Google Docs, Maps, etc. all do this.
Anyway, my two cents: don't let idealism get in the way of practicality in cases like this. :) David's solution works and hardly clutters up HTML at all (and in fact, using semantic classnames like "before" and "after" is still very clean imo).
This behavior is caused by the different interpretations of the box model. The correct box model states that the width applies only to the content and padding and margin add on to it. So therefore your are getting 100% plus a 20px right and left padding equaling 100%+40px as the total width. The original IE box model, also known as quirks mode, includes padding and margin in the width. So the width of your content would be 100% - 40px in this case. This is why you see two different behaviors. As far as I know there is no solution for this there is however a work around by setting the width to say 98% and the padding to 1% on each side.
#Domenic this does not work. width auto does nothing more then the default behavior of that element because the initial value of width is auto ( see page 164, Cascading Style Sheets Level 2 Revision 1 Specification). Assigning a display of type block does not work either, this simply tell the browser to use a block box when displaying the element and does not assign a default behavior of taking as much space as possible like a div does ( see page 121, Cascading Style Sheets Level 2 Revision 1 Specification). That behavior is handled by the visual user agent not CSS or HTML definition.
i believe you can counter the overflow with a negative margin. ie
margin: -1em;
The default padding and border will prevent your textbox from truly being 100%, so first you have to set them to 0:
input {
background: red;
padding: 0;
width: 100%;
border: 0; //use 0 instead of "none" for ie7
}
Then, put your border and any padding or margin you want in a div around the textbox:
.text-box {
padding: 0 20px;
border: solid 1px #000000;
}
<body>
<div id="x">
<div id="y">x</div>
<div class="text-box"><input type="text"/></div>
</div>
</body>
This should allow your textbox to be expandable and the exact size you want without javascript.
To make the input fill up width of parent, there're 3 attributes to set: width: 100%, margin-left: 0, margin-right: 0.
I just guess zero margin setting can help, and I had tried it, however I don't know why margin (left and right; of course top and bottom margins don't affect here) should to be zero to make it works. :-)
input {
width: 100%;
margin-left: 0;
margin-right: 0;
}
Note: You may need to set box-sizing to border-box to make sure the padding don't affect the result.
I use to solve this with CSS-only tables. A little bit long example but
important for all who wants to make entry screens for large amount of fields
for databases...
// GH
// NO JAVA !!! ;-)
html {
height: 100%;
}
body {
position: fixed;
margin: 0px;
padding: 0px;
border: 2px solid #FF0000;
width: calc(100% - 4px);
/* Demonstrate how form can fill body */
min-height: calc(100% - 120px);
margin-top: 60px;
margin-bottom: 60px;
}
/* Example how to make a data entry form */
.rx-form {
display: table;
table-layout: fixed;
border: 1px solid #0000FF;
width: 100%;
border-collapse: separate;
border-spacing: 5px;
}
.rx-caption {
display: table-caption;
border: 1px solid #000000;
text-align: center;
padding: 10px;
margin: 10px;
width: calc(100% - 40px);
font-size: 2.5em;
}
.rx-row {
display: table-row;
/* To make frame on rows. Rows have no border... ? */
box-shadow: 0px 0px 0px 1px rgb(0, 0, 0);
}
.rx-cell {
display: table-cell;
margin: 0px;
padding: 4px;
border: 1px solid #FF0000;
}
.rx-cell label {
float: left;
border: 1px solid #00FF00;
width: 110px;
padding: 4px;
font-size: 1em;
text-align: right;
font-family: Arial, Helvetica, sans-serif;
overflow: hidden;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rx-cell label:after {
content: " :";
}
.rx-cell input[type='text'] {
float: right;
border: 1px solid #FF00FF;
padding: 4px;
background-color: #eee;
border-radius: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
/* Fill the cell - but subtract the label width - and litte more... */
width: calc(100% - 130px);
overflow: hidden;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
input[type='submit'] {
font-size: 1.3em;
}
<html>
<meta charset="UTF-8">
<body>
<!--
G Hasse, gorhas at raditex dot nu
This example have a lot of frames so we
can experiment with padding and margins.
-->
<form>
<div class='rx-form'>
<div class='rx-caption'>
Caption
</div>
<!-- First row of entry -->
<div class='rx-row'>
<div class='rx-cell'>
<label for="input11">Label 1-1</label>
<input type="text" name="input11" id="input11" value="Some latin text here. And if it is very long it will get ellipsis" />
</div>
<div class='rx-cell'>
<label for="input12">Label 1-2</label>
<input type="text" name="input12" id="input12" value="The content of input 2" />
</div>
<div class='rx-cell'>
<label for="input13">Label 1-3</label>
<input type="text" name="input13" id="input13" value="Content 3" />
</div>
<div class='rx-cell'>
<label for="input14">Label 1-4</label>
<input type="text" name="input14" id="input14" value="Content 4" />
</div>
</div>
<!-- Next row of entry -->
<div class='rx-row'>
<div class='rx-cell'>
<label for="input21">Label 2-1</label>
<input type="text" name="input21" id="input21" value="Content 2-1">
</div>
<div class='rx-cell'>
<label for="input22">Label 2-2</label>
<input type="text" name="input22" id="input22" value="Content 2-2">
</div>
<div class='rx-cell'>
<label for="input23">Label 2-3</label>
<input type="text" name="input23" id="input23" value="Content 2-3">
</div>
</div>
<!-- Next row of entry -->
<div class='rx-row'>
<div class='rx-cell'>
<label for="input21">Label 2-1</label>
<input type="text" name="input21" id="input21" value="Content 2-1">
</div>
<div class='rx-cell'>
<label for="input22">Label 2-2</label>
<input type="text" name="input22" id="input22" value="Content 2-2">
</div>
<div class='rx-cell'>
<label for="input23">Label 2-3</label>
<input type="text" name="input23" id="input23" value="Content 2-3">
</div>
</div>
<!-- And some text in cells -->
<div class='rx-row'>
<div class='rx-cell'>
<div>Cell content</div>
</div>
<div class='rx-cell'>
<span>Cell content</span>
</div>
</div>
<!-- And we place the submit buttons in a cell -->
<div class='rx-row'>
<div class='rx-cell'>
<input type="submit" name="submit1" value="submit1" />
<input type="submit" name="submit2" value="submit2" />
</div>
</div>
<!-- End of form -->
</div>
</form>
</body>
</html>