I have an AngularJS app on which I need to collect Day preferences from the user. I'm having trouble getting it laid out how I want it.
The days array has 8 items (7 + "All"), and I want it arranged in 2 rows of 4. How can I get it to split itself so it's inline for the 4, but then breaks into a new row? I'd like to do this without hard coding all of the days since it's easier to relate to my model this way.
And here's the incorrect (current) layout, and how I want it to look...
<div class="form-group checkbox">
<p class="h2">When do you usually like to lunch?</p>
<label ng-repeat="day in days" class="sm" ng-click="dayClicked(day)">
<input type="checkbox"
value="{{day.name}}"
ng-model="day.selected">
{{day.name}}
</label>
</div>
Try something like this.
label.sm {
display: block;
float: left;
width: 25%;
}
label.sm:last-child:after {
clear: both;
content: " ";
display: block;
height: 0px;
overflow: hidden;
}
Added explanation
The first rule, label.sm, targets each of your labels. It modifies the default display of a label so it will have a specific width. You can technically use display: inline-block, but some older browsers (cough cough IE) don't respect that. Combine display: block with float: left to emulate display: inline-block. Specifying width: 25% makes each label one-fourth (100% / 4 = 25%) the width of the available space in its container.
The second rule, label.sm:last-child:after targets the last of the labels in the group and creates a pseudo-element (an element that isn't in the HTML). The pseudo-element has a single space for its contents, spans the width of its container, has no height, hides anything outside of the space it's been given (which is nothing), and clears the float flag set by the labels.
Related
How can i get input radio and input text on one line always. They won't stay in the same line when i change resolution.
<fieldset>
<label>
<input type="radio" name="radio" value="url" <?php checked( $this->options['shortcode_link_type'], 'url' ); ?> />
<input type="url" name="shortcode_url" class="input-text" value="<?php echo $this->options['shortcode_url']; ?>" />
</label>
</fieldset>
As some people suggested, the usual in inputs its to use the float: left style in the radio input.
input[type=radio]{
float:left;
}
However, I don't really like to use "float" in the styles due its side-effects. Also, I think it won't make it not to jump down when you change resolutions or make the windows smaller.
So I will write here some alternative suggestions:
you can use flexbox in the parent block:
label{
display: flex;
}
This would force both elements to be in the same line as long as you
don't use the flex-wrap: wrap property. However, although flex is
widely used nowadays, it might not be compatible with older
browsers.
you can place the radio input in an absolute position:
label{
position: relative;
}
input[type=radio]{
position: absolute;
right: -20px;
}
this will make the radio always to be 20px after the label - to use
20 was arbitrary for this example, you should use the number it fits
more your needs, usually the width of the element with some extra
space for margins. This has the con that the radio input will become
its own entity and if something goes after this block, it might go
on the top of it. You can fix that issue with the next suggestion.
use position absolute, but leave the proper padding in the right of
the label:
label{
position: relative;
padding-right: 20px; }
input[type=radio]{
position: absolute;
right: 0;
}
this would solve the last method's con. - remember to adapt the
padding from 20 to the number that suits your style
you can simply force the parent block to not wrap and its children
to inline:
label {
word-wrap: no-wrap;
white-space: nowrap
}
label input{
display: inline;
}
Those 3 options should force the input to not jump to the next line.
Ps: I should say, I find weird to use a label as parent of inputs, let alone 2 of them. Semantically speaking, the tag label is supposed to describe a what an associated input functionality is, and also to put the focus into that input when clicking to the label, not to wrap inputs... Also, the default style that the labels have might be messing with the default styling of the inputs.
You can float your input fields.
input[type=radio]{
float:left;
}
input[type=url]{
float:right;
}
Edit: Mistake has been explained. I will look into other ways to build multi-column forms with input-elements, hopefully in a 2016 fashion.
I'm new to HTML/JS/CSS. I did the w3school tutorials and am no stranger to so.com either - but while this is a great side, applying already posted solutions to my problem is rather tricky for a beginner.
Task: building simple websites for basic database access (think of VBA-Forms in Access, if no other means were available). IE11 will be used as Browser in a protected company environment.
Layout-wise there are to be several Rows with Labels in Col1, and one to X input-elemets in Col2 - ColX+1.
Problem: Oddly, labels and inputs behave different, even if assigned to the same class.
"Appending" labels works in the expected way (new labels are "appended" to the right in new columns/new cells).
"Appending" input-elements displayes them in the same row and column as the last one (see code for example. basically: the height of the label-cell in column1 now spans 2 cells in column2).
I understand setting up forms in CSS tables is consideres bad practice.
I am not yet sure if this also applies if i need a multi-row, multi-column (3+) layout. I figure non-tabular solutions get messy rather fast. The Examples i found on w3school and in stackoverflow-comments use at most two columns, one for the label and one for the input-element.
To my undestanding, "display: table-columns" can only be used to format cells with a certain position in each row (like in a spreadsheet), and not to actually "add" a empty column that can be filled.
https://jsfiddle.net/9cjf1465/
The CSS: apart from some formatting, I create a class for forms (table), paragraphs (row), and individual labels/input (cell). Took out most of the formatting-stuff.
<style type="text/css">
div.mydiv {
background-color: #f2f2f2;
padding: 20px;
}
form.myform {
display: table;
}
p.myrow {
display: table-row;
}
/* class can used for both label and input? */
.mycell {
display: table-cell;
}
label {
text-align: left;
vertical-align:middle;
padding: 5px;
}
input{
vertical-align:middle;
width: 100%;
padding: 8px;
margin: 5px;
border: 1px solid #ccc;
border-radius: 2px;
box-sizing: border-box;
}
</style>
The Example-HTML, simplified: Note how Inputs and Labels behave differently as mentioned above - despite being assigned to the same class.
<div class="mydiv">
<form class="myform" id="form1" onsubmit="event.preventDefault();getPnr()">
<p class="myrow">
<label class="mycell" for="pnr">Label 1</label>
<input class="mycell" type="number" id="pnr" placeholder="Pnr" required >
<input class="mycell myimp1" type="submit" id="btn1">
</p>
<p class="myrow">
<label class="mycell" for="pnr">Label 2</label>
<label class="mycell" for="pnr">Label 3</label>
<input class="mycell" type="number" id="pnr" placeholder="Pnr" required >
</p>
</form>
</div>
I hope my question came across right and I kept myself short enough - already lookin forward to get some suggestions!
Cheers,
Martin
As far as i know labels & inputs cannot be treated the same.
Labels are a container element (more info).
Elements which self close, such as inputs, images, etc are not containers and therefore cannot behave like a <td> or have display:table-cell;
This question covers the same area, stating that use of display:table-cell; with an input would be experimental according to W3.org
I am trying to put two components on the same line and have wrapped it like this. I am trying to keep this as reusable as possible and so I am trying to get as general of a solution as possible.
HTML:
<div class="form-group">
<span class="component-parent">
<label for="driversLicense.num">Driver's License #</label>
<input type="text" class="form-control" id="driversLicense.num"></input>
</span>
<span class="component-parent">
<label for="driversLicense.state">State</label>
<select id="driversLicense.state" class="form-control"></select>
</span>
</div>
CSS:
label {
display: block;
}
.component-parent {
display: inline-block;
}
.form-control {
width: 100%;
padding: 6px 12px;
}
The width: 100% is inherited from Bootstrap and if I remove it it cause all kinds of problems with rest of my layout.
The problem is the input is underneath the select and I would like them to have a little bit of space in between them. If I remove width: 100% then it looks correct and if I remove my padding then the two components touch with no space in between them but then my insertion point is in the wrong place.
Here is a fiddle showing the phenomena.
Is there some way to change the CSS of the form-group that will solve this problem? I can add an additional container(s) if need be but I would rather not change the CSS or html of either of the component-parent elements or their children.
It was an issue with the padding you were applying to the select! I added
box-sizing:border-box;
which solved this problem, you will however need to float the spans to clear the gap!
Let me know if you have another question! :) all the best!
DEMO
http://jsfiddle.net/graHw/6/
I ended up adding a new span in between the two component-parent elements. The span has a margin-left that is equal to the horizontal padding.
Here is the new fiddle
How can I get a <label> that has lots of text to display next to a radio input, without wrapping that text around the input.
In this jsfiddle: http://jsfiddle.net/JXrHh/1/
I use display: inline block; to get the format I want. But that will only work if the text is broken up with <br/> tags. Otherwise the text will drop below the radio input.
Without display: inline block; the text will wrap around the radio input.
I must be missing some small detail somewhere, can anyone help point it out?
You can alternatively use display: table-cell; on the <label> elements and there is no need to specify a width as the content will determine it:
http://jsfiddle.net/JXrHh/5
If you set a fixed width to your inline-block element then you do not need explicit line breaks:
http://jsfiddle.net/JXrHh/3/
label.inline {
display: inline-block;
width: 200px;
}
it's just a small thing.
if you have enough space you don't want to be a limited.
you can spread as wide as you wish .so limit it
label.inline {
display: inline-block;
width:200px;
}
I can't figure out how to do this with CSS. If I just use a <br> tag, it works flawlessly, but I'm trying to avoid doing that for obvious reasons.
Basically, I just want the .feature_desc span to start on a new line, but:
If I make it an inline element, it won't have a line-break.
If I make it a block element, it will expand to fit the entire line, putting each of these icons on its own line, and wasting tons of space on the screen (each .feature_wrapper will be a slightly different size, but none will ever be as wide as the entire screen.)
Example code: This works, but uses a br tag:
<li class='feature_wrapper' id='feature_icon_getstart'>
<span style='display: none;' class='search_keywords'>started</span>
<span class='feature_icon spriteicon_img' id='icon-getstart'><a href='getstarted/index.html' class='overlay_link'></a></span><br/>
<span class='feature_desc'><a href='getstarted/index.html' >Getting Started Wizard</a></span>
</li>
I want to style this with CSS to achieve the same result:
<li class='feature_wrapper' id='feature_icon_getstart'>
<span style='display: none;' class='search_keywords'>started</span>
<span class='feature_icon spriteicon_img' id='icon-getstart'><a href='getstarted/index.html' class='overlay_link'></a></span>
<span class='feature_desc'><a href='getstarted/index.html' >Getting Started Wizard</a></span>
</li>
Any ideas? Or am I going about this the wrong way?
You can give it a property display block; so it will behave like a div and have its own line
CSS:
.feature_desc {
display: block;
....
}
Even though the question is quite fuzzy and the HTML snippet is quite limited, I suppose
.feature_desc {
display: block;
}
.feature_desc:before {
content: "";
display: block;
}
might give you want you want to achieve without the <br/> element. Though it would help to see your CSS applied to these elements.
NOTE. The example above doesn't work in IE7 though.
I think floats may work best for you here, if you dont want the element to occupy the whole line, float it left should work.
.feature_wrapper span {
float: left;
clear: left;
display:inline
}
EDIT: now browsers have better support you can make use of the do inline-block.
.feature_wrapper span {
display:inline-block;
*display:inline; *zoom:1;
}
Depending on the text-align this will appear as through its inline while also acting like a block element.
For the block element not occupy the whole line, set it's width to something small and the white-space:nowrap
label
{
width:10px;
display:block;
white-space:nowrap;
}
Using a flex parent works too.
Setting flex-direction to column will put each child on a new line and setting align-items will make them not take up the whole width.
Here is a small example:
<div class="parent">
<a>some links</a>
<a>that should be on their own lines</a>
<a>but not take up the whole parent width</a>
</div>
.parent {
display: flex;
flex-direction: column;
align-items: flex-start;
}
span::before { content: "\A"; white-space: pre; }
I was running into a similar situation on our WooCommerce site. The "Add to cart" button was right next to a custom product field, and I needed to drop the product field below the button. This is the CSS that ended up doing the trick for me
#product-57310 label[for="wcj_product_input_fields_local_1"] { display: -webkit-box!important; margin-top: 80px; }
where "#product-57310" is the ID of the product in woocommerce, so that it only applies to the specific product page and not every product page, and where "label[for="wcj_product_input_fields_local_1"]" is targeting the first label specifically to get under the "Add to cart" button.
I had a similar issue where I had something like this:
<span>
<input>
<label>
<input>
<label>
...
</span>
I didn't wanna mess with the source html generator (even tho this html is pretty bad). So the way I fixed it is use a display: grid on the top span. Then grid-template-columns: auto auto;
Anyone looking to do something similar, grid is a good solution now (in 2021).
For example, for this particular problem, applying
display: grid; grid-template-columns: auto auto; to li and grid-column: 1 / 3; to last span will do it.
Use two CSS rules
word-break: break-all;
display: list-item;
inside of a CSS selector and body
Note:
If only dealing with text that needs to be put on separate lines.
Try using word-break like so (note stack overflow code automatically does this but I included it to help clarify usage in other environments:
word-break: break-all;
If only dealing with in-line HTML elements like a <span>
Then see this answer as to how to convert non text elements (like an anchor tag) to line separated elements using a display: list-item also on the html tag
Link
How to make text in <a> tag wordwrap
Example (For HTML inline elements like span)
span {
display: list-item;
word-break: break-word;
}
<span>Line 1</span>
<span>Line 2</span>
<span>Line 3</span>
<span>Line 4</span>
<span>Line 5</span>
Example (For Text Content)
function makePerson(name, age) {
// add code here
let person = Object.create({});
person.name = name;
person.age = age;
return person;
}
const person = makePerson('Vicky', 24);
const outputDiv = document.querySelectorAll("body .output");
const keys = Object.keys(person);
outputDiv.forEach((div,key) => {
div.innerHTML = person[keys[key]];
});
body #output{
word-break: break-all;
}
<div>
<div class="output"></div>
<div class="output"></div>
</div>