I have two <fieldset>s inside a single div (nothing else), that are positioned next to eachother (positon: absolute, div is set to relative).
Is there any way to make these fieldsets both the same height without setting a fixed height?
I have some idea that maybe I can make both have a max height of the parent, and a min height of auto?
Also, would it then be possible to make the content of the fieldsets position centred vertically?
I'm not concerned if it works with IE, but needs to work on Firefox and Webkit, and if possible Opera.
Thanks
Edit: You can see the page here: https://dl.dropbox.com/u/2318402/SO/login.html
You can put them in a parent container like a table or div, and have the two children be at height=100%.
The only other two options are the ones you didn't want, at a fixed height like height=59px, or you can do it via javascript.
For the vertical positioning, you can stick them in a parent container like a table or div and then slap on there a vertical-align:center
I'm a bit late but you can always use tables (don't like those either but well.. table works in this situation).
<table>
<tr>
<td style="vertical-align:top">
<fieldset></fieldset>
</td>
<td style="vertical-align:top">
<fieldset></fieldset>
</td>
</tr>
</table>
The following works, without using js/jQuery, but does rely on -in this example- using a css3 psuedo-element :nth-of-type(odd), though this could be replaced by applying a css class to the odd-numbered fieldsets.
It also relies on using height: 100% for the fieldsets, which itself is dependant upon the parent element (in this case the form) having a specified height. If that's a problem then, for the purpose of demonstration, I've used overflow-y: auto; on the fieldsets to restrict their dimensions to that of their parent, but with a scroll behaviour to reveal the overflow.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="http://davidrhysthomas.co.uk/mindez/css/stylesheet.css" />
<style type="text/css" media="all">
form {
width: 50%;
height: 200px;
}
fieldset {
width: 30%;
height: 100%;
margin: 0 1em 0 0;
padding: 0.5em 1em;
overflow-y: auto;
}
fieldset:nth-of-type(odd)
{
float: left;
}
label {
display: inline-block;
width: 30%;
}
input[type=text]
{
display: inline-block;
width: 50%;
}
</style>
</head>
<body>
<div id="wrap">
<form enctype="form/multipart" method="post" action="">
<fieldset>
<label for="one">Label 1</label><input id="one" name="one" type="text" />
<label for="two">Label 2</label><input id="two" name="two" type="text" />
</fieldset>
<fieldset>
<label for="three">Label 3</label><input id="three" name="three" type="text" />
<label for="four">Label 4</label><input id="four" name="four" type="text" />
<label for="five">Label 5</label><input id="five" name="five" type="text" />
<label for="six">Label 6</label><input id="six" name="six" type="text" />
</fieldset>
</form>
</div>
</body>
</html>
Demo online at: http://www.davidrhysthomas.co.uk/so/fieldsets.html.
Obviously, if there's any questions or problems feel free to raise them in the comments and I'll try my best to help you out. =)
Related
I have this page with 1st row having 2 text boxes and 2nd row having a text box. I want to make their width same, the
below code works fine in chrome, but in firefox and IE (tested in IE9) width are different. How can I make the width same
in all browsers?
JS Bin
<!doctype html>
<html>
<body>
<form>
<input type="text" name="cnop" size="2"/><input type="text" name="cno" style="width:122px;"/><br>
<input type="text" name="cpono"/>
</form>
</body>
</html>
Chrome
Firefox
You can use box-sizing: border-box; to make alignment of input widths easier cross browser (it takes into account the padding, border, and content widths). It also makes calculations of widths in a pre-processor like Sass really simple.
input[type="text"] {
box-sizing: border-box;
}
input[name="cnop"] {
width: 33px;
}
input[name="cno"] {
width: 122px;
}
input[name="cpono"] {
width: 155px;
}
Check the fiddle: https://jsfiddle.net/mshtacea/
You can assign a width to all the 3 input tag, it is sufficient that the sum of the first two is equal to the value of the third. You must also reset the browser's input default styles.
<!doctype html>
<html>
<body>
<form>
<input type="text" name="cnop" style="width:30px;border:0;margin:0;padding:0"/><input type="text" name="cno" style="width:122px;border:0;margin:0;padding:0"/><br>
<input type="text" name="cpono" style="width:152px;border:0;margin:0;padding:0"/>
</form>
</body>
</html>
If you use the box-sizing attribute, set a fixed width on your form and percentage widths on your form inputs, everything should align nicely.
<form style="width: 200px;">
<input type="text" name="cnop" size="2" style="width: 25%;box-sizing: border-box;"><input type="text" name="cno" style="width: 75%;box-sizing: border-box;"><br>
<input type="text" name="cpono" style="width: 100%;box-sizing: border-box;">
</form>
Obviously it's best to put these style attributes into a style tag or your stylesheet but this is a cut and dry example of the solution.
You are better off using CSS to format your controls.
<form>
<div class="container">
<input type="text" name="cnop" class="input1"/>
<input type="text" name="cno" class="input2"/>
</div>
<div class="container">
<input type="text" name="cpono"/>
</div>
</form>
In a style sheet, add these classes
div.container {
display: block;
width: 200px; /* or whatever overall width you need */
}
div.container input {
width: 100%;
}
div.container .input1 {
width: 30px; /* or whatever width or percentage you need */
}
div.container .input2 {
width: 170px; /* or whatever width or percentage you need */
}
Consider the following HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="border-style: solid; border-width: thin; width:100%">
<input type="button" style="width:20px;float:right;" value="a" />
<div style="padding-right:35px;">
<input type="text" style="width: 100%;" />
</div>
</div>
</body>
</html>
This is the correct layout, and how it looks in IE 9 in normal mode. If you stretch the browser, the button remains on the right of the input box, and the input box stretches accordingly.
This is how it looks in IE 9 in compatibility mode. As you can see, the input box jumps onto the next line:
So, is there a way to fix this, so that it works regardless of whether or not compatibility mode is set?
Obviously I'm looking for a solution with minimal hackiness :)
Thanks!
Try this HTML:
<div class="search"><input name="btn" type="button" value="a" /><span><input type="text" name="search_input" /></span></div>
With this CSS:
.search > span {
display: block;
overflow: hidden;
padding-right: 10px;
}
.search input[type=text] {
width: 100%;
}
.search input[type=button] {
float: right;
}
Here's a jsfiddle to test it out for yourself:
http://jsfiddle.net/KVhUC/
I was able to get it to work with FF, IE9 (with/without compatibility mode)
http://jsfiddle.net/Cytkx/4/
<div style="border-style: solid; border-width: thin;">
<input type="button" style="width:20px;float:right;overflow:hidden;" value="a" />
<div style="overflow:hidden;padding-right:10px;">
<input type="text" style="display:block;width:100%;" />
</div>
</div>
I believe this is close to what you're looking for. Note this may not be backwards compatible.
You can try using <Table> </Table> instead of Div. They are better containers compared with divs.
I'm trying to reduce the amount of html markup related to presentation in my front end code. In a form I'm currently working on, I want to have 2 column of form fields. One way that will definitely do what I want is this:
<html>
<head>
<style>
body {width:400px;}
.col {width:200px; height: 100px; float:left; display:block;}
label, input {display:block;}
</style>
</head>
<body>
<div class="col">
<label>Field1:</label>
<input>
</div>
<div class="col">
<label>Field2:</label>
<input>
</div>
</body>
</html>
I want to achieve the same results when rendered in browser WITHOUT the div tags in the mark up. So I did something like this:
<html>
<head>
<style>
body {width:400px;}
label,input {width:200px; height: 30px; float:left; display:block;}
</style>
</head>
<body>
<label>Field1:</label>
<label>Field2:</label>
<input>
<input>
</body>
</html>
This is close, but I want the <label> markup tag to appear before each <input> markup tag in the code like so:
<label>field1</label>
<input>
<label>field2</label>
<input>
But problem here is that I can't think of maintainable css code that will make the label appear on top of each input field. Is there a good way to make both the mark up and the rendered result appear the way I want to?
One solution is to put the input inside the label..
<label>Field1:<input></label>
<label>Field2:<input></label>
then example CSS..
label {width:200px; height: 30px; display:inline-block;}
input {display: block;}
or
label,input {width:200px; height: 30px; display:inline-block;}
Seem's hacky, but this works.
http://jsfiddle.net/pxfunc/VCaMe/1/
using class="col1" or class="col2"...
HTML:
<form>
<label for="i1" class="col1">Label 1</label>
<input id="i1" class="col1" type="text" value="Input 1" />
<label for="i2" class="col2">Label 2</label>
<input id="i2" class="col2" type="text" value="Input 2" />
</form>
CSS:
form {width:600px;background-color:#eee;overflow:hidden;}
.col1 {display:block;float:left;line-height:30px;width:301px;height:30px;background-color:#f00;border:0;}
.col2 {position:relative;top:-30px;display:block;float:right;line-height:30px;width:299px;height:30px;background-color:#ff0;border:0;}
That said I still agree with the first comment under the question, seems like over-thinking a solution that could use div's or some kind of <label> & <input> wrapper
I want to position this HTML snippet
<div id="D1">
<div id="D1.1">HeaderText</div>
<div id="D1.2"> From
<input id="from" name="from" value=""/>
</div>
<div id="D1.3"> To
<input id="To" name="To" value=""/>
</div>
</div>
this way
+-(D1)-------------------------------------------------------------------------+
|+-(D1.1)---------------------------++-(D1.2)-------------++-(D1.3)-----------+|
|| || +-(from)-------+|| +-(to)---------+||
|| HeaderText ||From| |||To| |||
|| || +--------------+|| +--------------+||
|+----------------------------------++--------------------++------------------+|
+------------------------------------------------------------------------------+
using CSS
Things I need:
D1.1 must be left aligned and D1.2 y D1.3 must take only the space they need and must be right aligned.
Even though I represented here the width of D1.1 to take all the remaining horizontal space, it's not required to do that.
D1 should grow vertically to contain D1.1, D1.2, D1.3 completely. (No overflow, all divs completely visible)
The design must be fluid (i.e. if I change the font sizes of the text inside the divs, the layout adjust itself accordingly.
Is it possible to do all of this using only CSS and no tables? How?
Yanko,
Your ID names have periods in them and that'll be a problem in CSS since period is reserved. Best thing is to not use reserved characters in names but if you must have them, then you have to escape the periods with a backward slash. Markup can stay as is.
Here is the CSS:
#D1 {
background-color: gold;
padding: 10px;
overflow: auto;
}
#D1\.1 , #D1\.2 , #D1\.3 {
float: left;
padding: 10px;
}
If you need help understanding overflow property, here's a tutorial that discusses it.
===
Layout Gala is a pretty good reference for CSS based layouts.
You might want to take a look at this layout, or possibly this layout since they both look roughly like what you're asking for.
Good luck, and hope this helps some.
#D1 {
background-color: gold;
padding: 10px;
overflow: auto;
}
#D1\.1 {
float: left;
padding: 10px;
}
#D1\.2 , #D1\.3 {
float: right;
padding: 10px;
}
</style>
</head>
<body>
<div id="D1">
<div id="D1.1">HeaderText</div>
<div id="D1.3"> To
<input id="To" name="To" value=""/>
</div>
<div id="D1.2"> From
<input id="from" name="from" value=""/>
</div>
</div>
</body>
</html>
I have the following HTML
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<style>
.box
{
border:solid black 1px;
padding:0px;
margin:0px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<input class="box" style="width:300px;" /><br />
<input class="box" style="width:150px;" />
<input class="box" style="width:150px;" /><br />
<input class="box" style="width:100px;" />
<input class="box" style="width:100px;" />
<input class="box" style="width:100px;" />
</form>
</body>
</html>
The idea is that the textboxes should finish pixel perfect on the right hand side.
I will eventually add spacing on rows 2 and 3 enlarging the widths to compensate, but for the moment I would like to get this simple sample to render.
So how can I remove the margins of these textboxes such that the align properly?
They're not lining up because of the whitespace between them.
If you were to remove all the newlines and tabs between the <input> elements, it would display as you want.
I found adding float: left; to .box did what you wanted.
.box {
padding:0px;
margin:0px;
float: left;
}
Are you talking about right justifying all the textboxes?
If so, that's not a margin question. That's simply putting the textboxes in a containing element. Perhaps a and then set the text-align: right; css style on the div.
The border is not included in the width, so a box with a 1px border and a width of 150px will actually be 152 px wide.