I'm trying to have two or more columns worth of DIVs for input elements in a form. It's a very complex form, and some elements will be hidden and shown depending on some answers.
The problem is I can't get the DIVs to space accordingly in IE6 while having an effective hide/show. This is what mostly works:
.first_column
{
float:left;
clear:both;
}
.second_column
{
float:left;
}
And some HTML...
<div id="question1" class="first_column">
first row, column 1 <input type="text" id="asdf">
</div>
<br style="clear:both;" />
<div id="question2" class="first_column">
second row, column 1 <input type="text" id="asdf2">
</div>
<div id="question3" class="second_column">
second row, column 2 <input type="text" id="asdf3">
</div>
<br style="clear:both;" />
This works as expected. The problem is the show/hide. If I hide #question1, the line break remains. This isn't so bad for this small example, but if there are many questions depending on a show/hide, large gaps start to appear between rows of questions.
How can I achieve this without that line break?
Use margin-bottom on your divs instead of br
I suggest wrapping your complete rows in another div, and give it an id like row_1, row_2. This would include all questions plus the br. Then when you hide the row, the br hides too.
Use this pattern. Better semantics, simple code. Wrap these in DIVS for hide/show.
this.next('.question').toggle() - uses Prototype library. It finds the next element with the given class name and will hide/show that element.
open
<div class='question'>
<label>First Name</label>
<input .... />
<div class="formClear"></div>
</div>
...and this CSS
.label {
width:120px;
float:left;
margin-right:15px
}
.input {
float:left
}
.formClear {
clear:left;
height:15px;
}
For this problem, in my websites I use this:
In the CSS:
.spacer
{clear: both; visibility: hidden;}
In the HTML:
<div class="spacer"></div>
DIV is betther than BR (or HR) for this type of things because it do not move a pixel so you are free to apply margins to other content DIVs in order to have the perfect layout that you want. This work in all browsers, also in IE6.
This will fix also most of the floating problems. I do not find other solutions without this that are cross browser.
Unfortunately IE6 is unwavering in it's resolve to render HTML differently from every other browser. Unfortunately I wasn't able to come up with a simple enough solution with using the br's with clear. Oh well... time to fight with IE6 elsewhere.
Thanks for the suggestions.
Related
I have the following code in Angular:
<div class="center" style="margin-top:50px;">
<label class='input-w' for='start-date'>
<span class='label'><b>Start Date</b></span>
<input type="date" id="start-date" name="start-date" style="width: 200px;">
</label>
<label class='input-w' for='end-date' >
<span class='label'><b>End Date</b></span>
<input type="date" id="end-date" name="end-date" style="width: 200px;">
</label>
</div>
It produces this output:
I can't figure out how to separate the labels and boxes. I need them to be on the same line with some space between them so the start is midway left and the end is midway right.
Flex!
On the center class, you could have a center--horizontal class which uses flex to align all content in a row. You might need to rejig your elements so that the inputs are outside the labels.
Flex by default is a row so you don't need to define this
Here's a good resource for flexbox: https://flexboxfroggy.com/
.center--horizontal {
display: flex;
}
Extra: You might need to add some margin to one of the elements but that's just down to how much margin you want. Whenever I do anything with flex, I tend to put the children in divs (sometimes this isn't neccessary if you only outputting one element) if you are putting multiple elements together, this just makes it easier to to group elements together
You could add some css style info into your code, add margin to your code
Add a <style> section into your code, if you haven't already, and put a margin attribute to your label and add how much ever margin you want.
It should go something like this
.input-w {
margin: how much ever margin you want;
}
I have a dynamic form of sorts that I'm laying out with a css flexbox. I'm using flex because I don't know until runtime how many or what type/width the components are in the form. I'd prefer for the first "column" to have left-aligned labels and every subsequent column to have right-aligned ones, but I can't really think of any way to do this. Any suggestions?
Basic example of this form (with everything right-aligned). Be sure to pull the divider left to make the rendered output as large as possible to see what the form looks like with more than just one column: http://jsfiddle.net/27Gfd/
//basic markup for one form component (called a row). See JS fiddle for more
<div class="container">
<div class="row"> //I might stack next to another "row" because I have fixed width based on component type
<div class="miniflex"> //I'm another flex container to layout label/input
<div class="label">Label 1</div>
<div class="input">
<input type="text" />
</div>
</div>
</div>
at the moment no, you can't
example pseudo code (just an idea, it doesn't work!)
.flexContainer::first-flex-line > div {}
.flexContainer::last-flex-line > div {}
.flexContainer::nth-flex-line(odd) {}
.flexContainer::nth-flex-line(3n+1) {}
this doesn't exist yet for a precise reason
.flexContainer::nth-flex-line(3n+1) > div {width:100%}
changing the size of the flex-items may affect the container's wrapping. so that's a circular loop. not a nice thing! :P
if you can think of a solution and you want it implemented you could ask to the CSSWG using the newsgroup, or even on chrome's and firefox's bug trackers
Change the css:
.ex3 .label{
text-align: right;
/* ... */
}
to:
.ex3 .label{
text-align: left;
/* ... */
}
Or, if you're not certain that the first column is a label, use:
.miniflex div:first-child {
text-align: left !important;
}
(You should probably avoid using !important but I can't offer a precise alternative without knowing the logic behind the markup.)
Or if you might have labels in places other than the first column
.ex3 .label:first-child {
text-align: left;
}
Hello I have a problem with a fieldset in CSS.
I have this example
In this example you can see that left hand side the border
margin-left: 0px;
flushes exactly on one line/height with the dark frame. Right hand side you can see that the class fr has
margin-right: 0px;
But it does not flush with the frame border. I have tried to Google for it but I could not find anything on that. Is this phaenomenon normal or what am I doing wrong? are there some specific borders?
UPDATE
hello and thanks for answering this question. i tried to implement that code directly into my editor (dreamweaver cs6) and thought it used to be the same style as on jsfiddle. wrong. it seems like there is a problem with the editor because as a result i will get this:
it looks like there are automatically added tabs left hand side. so is there anybody who knows about that problem? thanks a lot.
UPDATE 2:
i had to reset the css default settings.
I would say the main one is that you have your labels set to 80px wide and your inputs are set to 180px wide.
Probably need them to be the same size. I'd also check your math to make sure it all adds up properly.
Add box-sizing: border-box to the inputs. (Also add -moz-box-sizing and -webkit-box-sizing for the relevant vendors)
use this instead, box-sizing:border-box causes the padding to be used from inside the input element rather than the outside.
#left #frame form fieldset ul input {
position:relative
color: #444444;
font-size: 10px;
width: 180px;
height: 18px;
padding-left: 5px;
outline:none;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box
}
yes box-sizing:border-box; is a good solution but simply reduce the size of input-box 7 pixel{5px for left-side padding and 2px for border of both left and right side border} so now final width of input-box is 173px
It looks like you want to put some input fields (a form, perhaps?) into columns and just don't seem to know the best way to do it?
I am working on a form right now, actually- here's how i do it when I want to have two columns within a div.
<form>
<fieldset>
<legend>The form to fill out</legend>
<p> Any instructions for the form. Fields marked with <span class="red">Red</span> are required.</p>
<div class="columnA">
<label for="fname">Label 1</label>
<input type="text" name="fname" tabindex="1" />
</div>
<div class="columnB">
<label for="address1">Address:</label>
<input type="text" name="address1" tabindex="10" />
</div>
<div class="fullwidth">
<input type="submit" value="Register"/>
</div>
</fieldset>
</form>
Then, make sure that these things are set (minimally) in your CSS for each of the above classes:
margin
padding
width
(advice: I actually set these first within every piece of my CSS- it gives me a structure if I have my own order of elements for my CSS. I am not saying use mine, but adopt your own- it saves time when you're troubleshooting)
Remember, if you want the parent element (whatever div is containing the form) all child elements have to be floated as well.
Now, you might think to float columnA to the left and columnB to the right, with both set at a width that adds up to 50% once you add in margins and padding. However, I've found that unless my content demands that much real estate, you can actually float both to the left and you'll get a better look for the form as a whole.
I want to do a simple form layout, labels and inputs, without tables. It works fine like this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
form {
display: table;
}
form>div {
display: table-row;
}
form>div>* {
display: table-cell;
}
</style>
</head>
<body>
<form>
<div>
<label>Hello</label>
<input type="text"/>
</div>
<div>
<label>World</label>
<input type="text"/>
</div>
</form>
</body>
</html>
However, it doesn't work in IE7. What is the cleanest way to make table layouts that display correctly in IE7, IE8, Firefox, Chrome and Safari?
Edit:
I've added a mock up of the layout I want to achieve:
How about absolute positioning?
HTML:
<form>
<h3> LOGIN </h3>
<p> <label> Username: <input type="text"> </label> </p>
<p> <label> Password: <input type="text"> </label> </p>
</form>
CSS:
p { position:relative; }
input { position:absolute; top:0; right:0; }
Live demo: http://jsfiddle.net/GCWWv/1/
Or this CSS:
p { position:relative; }
input { position:absolute; left:100px; }
Live demo: http://jsfiddle.net/GCWWv/9/
Use <table>. Most likely, you've heard it is bad practice to use tables in HTML. It is true that you should avoid using tables for layout. But, if you are actually displaying tabular data, then you should use a table. If you are displaying rows and columns of data, that sounds like a table to me. It would be inappropriate to try and spoof it with css.
A little bit on why. An HTML tag should describe its content, not its appearance. Eg, <p> represents a paragraph, not a block element with top and bottom margins, and not something to use when you need more white space. Some people like this because it feels right. It's clean and tidy and provides a nice separation between content and style. Done well, it can make it easier to re-skin a website.
But more importantly, it makes a HUGE difference for accessibility. Consider screen readers for the blind. When the screen reader encounters a <table>, it expects it to contain data. It allows the user to navigate the table by columns, rows, and headings. Using a table at the wrong time can be very confusing. Using it properly, can make it much easier for the user. Creating a table out of divs and fancy CSS tricks forces the user to navigate each element individually, instead of being able to skip to the row and column that is pertinent. To use your example, if a user was filling out a form, and certain fields were unnecessary, he could easily navigate by <th> to find the fields he needed to fill out.
There are other similar reasons to follow the "tags describe content" convention. Mostly, it is when anything other than a standard browser is consuming your page. Think search engines, feeds, etc. There are
many
lengthy
discussions
about
this
online.
HTML5 takes this concept further with the introduction of some new semantic tags.
I would do something whereby you don't use display: table
I would:
form div {
float: left;
width: 200px /* change this to whatever */
}
If you need help could you please outline what visual layout you're trying to achieve? Good luck.
I looked online for examples of implementation of the form using DIVs and all I see is pretty simple one column forms. I have some pretty complicated forms, here is a picture of one:
http://img835.imageshack.us/img835/8292/formn.jpg
It is easy to make it work with table (which I do), the only problem I have is that sometimes I need to not display some of the choices and move the values up one row to avoid gaps.
I started making some forms using divs, but they fall apart when I change the browser window size and it is not easy to align things.
This topic is helpful:
Is it bad design to use table tags when displaying forms in html?
but it doesn't address some of the concerns I have.
What would you propose as a solution? I can dynamically delete/insert values in the table or try to do the DIVs.
I would go the div route. As long as you're careful of your widths when you apply floats, it's actually pretty straightforward to get the layouts to work properly in different screen resolutions.
Here are a few rules:
Set a max width on your form or your form's wrapper element. If you want to float elements on one row make sure their width's added together does not exceed this width.
If you are adding horizontal padding/margins to your floated elements remember that these add to the total width of the element.
Avoid mixing percentage widths with pixel padding and margins. Apply the percentage width to a parent element and the pixel padding/margins to a child element.
Use clearing elements between your rows of elements to keep everything in line.
As to the markup, you can use the form elements along with CSS to create a semantic structure:
<fieldset>
<legend>Fieldset Title</legend>
<label for="input1">Input 1:</label>
<span><input type="text" id="input1" name="input1"/></span>
<label for="input2">Input 2:</label>
<span><input type="text" id="input2" name="input2"/></span>
<br/>
<label for="input3">Input 3:</label>
<span><input type="text" id="input3" name="input3"/></span>
<label for="input4">Input 4:</label>
<span><input type="text" id="input4" name="input4"/></span>
</fieldset>
And the CSS:
fieldset {
padding: 20px 0;
width: 600px;
margin: 0;
border: 0;
}
legend {
display: block;
width: 100%;
background: black;
color: white;
}
label, span{
float: left;
width: 150px;
}
input {
width: 120px;
}
br {
clear: both;
}
You can see the result here.
If it is a fixed-width table, it's trivial to lay out with divs and floats. Just set each width to exactly what you want.
For a liquid-layout table—and liquid layout is in general highly desirable—it is much harder to arrange a form without table-style-display, because float and position do not readily allow for calculations like “this cell is half the remaining width of the parent, after the fixed-width labels have been allocated”.
So in cases like this, which certainly includes the kind of two-column form you posted, the table-* CSS display values are your only possibility. If you are aiming only at IE8 and the other modern browsers, you can use divs and set display: table-row et al in the stylesheet. However for compatibility with IE6-7 and other older/mobile/niche browsers, you will have to use actual <table>/<tr>/<td> elements, as only the modern browsers support table-CSS independently of the table-elements.
There is no shame in this. A form is kind-of semi-tabular anyway and there is no practical accessibility disadvantage because the page content remains ordered appropriately.
Note: for liquid-layout forms you also have the issue of sizing input fields to match the parent element. input { width: 100%; } almost does it, but not quite, because the width is not including the border or padding that inputs get by default. You can use CSS3 box-sizing and the browser-specific versions of it to get around that for modern browsers, but if you want it to line up exactly to the pixel on IE6-7 too you would have to use padding on the parent elements equal to the border/padding on the child input field.
General information is some kind of list, key > value list to be exact - <dl /> would be probably the best structure for it
Issues values is a table,
Ratings is a table,
Both Redemption and Indicators are lists - unordered lists <ul />