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;
}
Related
I have a fieldset markup with multiple fieldsets. Inside the container they are floating and create a form together.
Without any 'hacks' my fieldsets are not floating because they are block elements and therefor are aligned below each other. Right now I'm using a negative margin to get my 2nd fieldset up next to the last element of fieldset 1.
This is kinda hacky imo and is pretty annoying if you have several fieldsets and other forms which are a little bit different. Means I have to duplicate some css code and override it instead of having a fluidly floating form.
Is there any possibility to have the last element of fieldset 1 and the first item of fieldset 2 floating appropriately?
E: I created a small fiddle for the inline-block proposuals - not working for me in chrome: Fiddle
<fieldset>
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</fieldset>
<fieldset>
<input type="text" />
</fieldset>
fieldset {
border: none;
display: inline-block;
}
input {
display: inline-block;
}
Make sure fieldset1 and fieldset2's container is set as display: inline-block; and the fields themselves are also set as display: inline-block;
This will ensure that they aren't entirely blocks that will clear and set the other elements on to a new line.
Also, remove any floating since you can achieve what you want without floating. Floating will only complicate things at this point.
EDIT ------> Based on your jsfiddle, here is an updated one: http://jsfiddle.net/sty7gbnh/1/
There are margins/paddings around your fieldset. While you have set them as inline-blocks, you need to remove their initial margins/paddings still. For example, buildings (which would be fieldsets) with a margin of 5cm on each side will create a 10cm gap between each building... giving you that awkward space.
EDIT ------> Upon further inspection, I'm unsure as to how we can achieve this with just css and can only suggest using jquery:
fs = $("fieldset");
for (i = 0; i < fs.length; i++) {
var that = $(fs[i]);
var fieldsetContent = that.html();
that.replaceWith(''+fieldsetContent+'');
};
The above code will replace all field sets with nothing (therefore removing fieldsets) and leaving just the input fields alone. This could be edited to target a specific area/container.
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 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 />
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.
I have the following HTML:
<form action="http://localhost:2689/" method="post">
<span>
<label for="SearchBag.PowerSearchKeys" id="Label1"> Key words</label>
<input id="SearchBag.PowerSearchKeys" name="SearchBag.PowerSearchKeys" type="text" value="" />
<button id="powerSearchSubmitButton" class="fancySubmitButton" type="submit"><span><em>Search</em></span></button>
<span><em>Advanced</em></span>
</span>
</form>
The form's content needs to be centered over it's width (100% in this case).
The anchor needs to be directly under the button.
Because a picture can say a thousand words, here's the result of my awesome paint art skills:
(source: telenet.be)
And this whole block should be centered on the webpage.
--EDIT--
Because the content of all the controlls can varry greatly in length, I cannot give any element any width specifications (not even in %). Also, over estimating the width would leave confusing white spaces between elements. This too is not a desired effect.
Try setting 'display: block' on each element that you want on a separate line. You may also need to play with the margin and padding to get them centered (like margin-left: 50%; padding-left: -[1/2 width of element]) and text-align: center.
Why not just put a break in before the tag () then align the to the right?
I usually float form elements (left), and if I want to put the next one on a new line i use clear:left.
I'd replace the <span> with a <fieldset> for semantic correctness (I don't think span brings a lot to the table in terms of functionality), and apply some styling to that fieldset to the tune of
fieldset {
text-align: center;
width: 100%;
position: relative;
}
I can't tell for sure if that'll line up the anchor and the button correctly or not, but since the fieldset has position: relative set, you'll be able to position stuff if you need to with relative ease.
As much as i hate to say it, this is a case where use of tables might be considered.
But I would try positioning - i made a quick & dirty solution here
at JSbin
Basically you put your form into an element, center it with text-align and make the container position: relative. Then you use the id in the link to position it absolutely in reference to the parent. But it only works if the parent is an inline element.
Unless you change its display property (and you shouldn't), the span element should be an inline element, meaning that it exists in the flow of text. Putting block level elements inside an inline element isn't really a good idea.
You also have a lot of extraneous tags in there. Instead of this:
<button id="powerSearchSubmitButton" class="fancySubmitButton" type="submit">
<span><em>Search</em></span>
</button>
why not just do this:
<button id="powerSearchSubmitButton" class="fancySubmitButton" type="submit">
Search
</button>
The span does nothing, and the em can be emulated through CSS:
.fancySubmitButton { font-style: italic }`
Here's what I'd do:
<form>
<label for="SearchBag.PowerSearchKeys" id="Label1">Key words</label>
<input id="SearchBag.PowerSearchKeys" name="SearchBag.PowerSearchKeys" type="text" value="" />
<button id="powerSearchSubmitButton" class="fancySubmitButton" type="submit">Search</button>
Advanced
</form>
with the CSS:
form {
text-align: center;
}
.fancySubmitButton, .fancyLinkButton {
font-style: italic;
}
.fancyLinkButton {
display: block; /* this will put it on its own line */
}
Quick response to the comments: giving something the class "fancyLinkButton" doesn't imply that it has rounded corners. Anyway, if you want to put rounded corners on certain elements, I would still avoid using extraneous markup. If more wrapper elements are needed for whatever implementation you're using, then those should be added via Javascript. Remember that mozilla and webkit already support CSS rounded corners - eventually IE will too, and you'll be able to easily change your single javascript function, rather than wading through HTML to find everywhere where there are unneeded spans.