I have multiple checkboxes and everyone is displayed on a row. I want to have 3 or 4 checkboxes on a row, but I can't do it.
Angular:
<div class="form">
<mat-label>Choose skills:</mat-label>
<div class="container">
<div *ngFor="let skill of listOfSkills; index as i" id="skills">
<input type="checkbox" (change)="getSkill($event,i)">{{skill}}
</div>
</div>
</div>
CSS:
.container input[type=checkbox]{
display:inline-block;
width: 200px;
text-align: center;
}
Base on your question, maybe I can understand as you try to align all checkbox inside a container div ? Not sure is this what you looking for ?
div{
display:flex;
align-items:center;
}
input{
margin-right:10px;
}
input:last-child{
margin-right:0px;
}
<div>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
Your css sets the display property to inline-block on the input tag, but the surrounding div tag is still a block element and therefore will always wrap.
Your css should look like this:
css:
.container .checkbox {
display:inline-block;
width: 200px;
text-align: center;
}
html:
<div class="form">
<mat-label>Choose skills:</mat-label>
<div class="container">
<div *ngFor="let skill of listOfSkills; index as i" class="checkbox">
<input type="checkbox" (change)="getSkill($event,i)">{{skill}}
</div>
</div>
</div>
Related
I am looking to achieve options as
But with current code, am getting it as below:
How to get options Yes and No next to each other
Below is my code:
For HTML
<div class="mycustom-radios">
<div class="mycustom-radios__item" *ngFor="let employeeType of employeeTypes">
<input class="mycustom-radios__input" id="e_employeetype" name="what-type-of-employee" type="radio" [value]="employeeType" [(ngModel)]="selectedemployeeType"/>
<label class="mycustom-label mycustom-radios__label" for="e_employeeType">
<p>{{employeeType}}</p>
</label>
</div>
</div>
For component.ts
selectedemployeeType: string;
employeeTypes: string[] = ['Yes', 'No'];
#Patty! Try using the display:flex CSS property, like this:
<div style="display:flex">
<div>div block 1</div>
<div>div block 2</div>
</div>
You need to apply the CSS styles like so.
// use this styling
div{
display:flex;
align-items:center;
}
input{
margin-right:5px;
}
input:last-child{
margin-right:0px;
}
<div>
<!-- nest your angular controls here -->
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
Change p to span and apply display:inline as in below example. In the example I have added 2 divs to mimic *ngFor="let employeeType of employeeTypes"
.mycustom-radios__item {
display: inline-flex;
}
<div class="mycustom-radios">
<div class="mycustom-radios__item" *ngFor="let employeeType of employeeTypes">
<input class="mycustom-radios__input" id="e_employeetype" name="what-type-of-employee" type="radio" [value]="employeeType" [(ngModel)]="selectedemployeeType" />
<label class="mycustom-label mycustom-radios__label" for="e_employeeType">
<span>No</span>
</label>
</div>
<div class="mycustom-radios__item" *ngFor="let employeeType of employeeTypes">
<input class="mycustom-radios__input" id="e_employeetype" name="what-type-of-employee" type="radio" [value]="employeeType" [(ngModel)]="selectedemployeeType" />
<label class="mycustom-label mycustom-radios__label" for="e_employeeType">
<span>Yes</span>
</label>
</div>
</div>
This will do the trick:
.mycustom-radios {
display: flex;
flex-direction: row;
}
Or:
You can change display of your elements to inline-block like this:
.mycustom-radios__item {
display: inline-block;
}
If you use the flex display, make sure to add flex-wrap for smaller screens (like phones for instance):
.mycustom-radios {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
I am trying to align a list of labels, input radios and icons. The alignment should be:
Label Icon
() LongLabel Icon
() Label Icon
Here my code:
div.mygrid {
display:grid;
grid-template-columns: max-content max-content;
grid-gap:5px;
}
div.mygrid > div > label { text-align:left; }
<div class="mygrid">
<div>
<label> Long Text #1</label>
<i>Colum2</i>
</div>
<div>
<label><input type="radio">Label #2</label>
<i>Colum2</i>
</div>
<div>
<label><input type="radio">Label #3</label>
<i>Colum2</i>
</div>
</div>
Also I find awful to define spaces to replace the space of the radiobutton:
<label> Long Text #1</label>
Any idea how can I achieve that?
If you don't insist on using Grid, I propose a solution similar to the following (should be self-explanatory). Adjust values (width and padding) as needed.
label {
text-align: left;
display: inline-block;
width: 160px;
}
label.L1 {
padding-left: 30px;
}
input[type="radio"] {
width: 30px;
margin: 0;
}
i {
width: 200px;
}
<div class="mygrid">
<div>
<label class="L1">Long Text #1</label>
<i>Colum2</i>
</div>
<div>
<input type="radio"><label>Label #2</label>
<i>Colum2</i>
</div>
<div>
<input type="radio"><label>Label #3</label>
<i>Colum2</i>
</div>
</div>
div.mygrid {
display:flex;
flex-direction: column;
}
div.mygrid > div > label { text-align:left; }
.ml-3 {
margin-left: 17px;
}
<div class="mygrid">
<div class="ml-3">
<label>Long Text #1</label>
<i>Colum2</i>
</div>
<div>
<label><input type="radio">Label #2</label>
<i>Colum2</i>
</div>
<div>
<label><input type="radio">Label #3</label>
<i>Colum2</i>
</div>
</div>
In my project, I have a dialog div with four labels, four text input, one submit button and one shutdow button.
I want it appears like this:
AAAAAAAA:input text
BBBBBBBB:input text
CCCCCCCC:input text
DDDDDDDD:input text
submit shutdown
But acturally, it does not appear format, it likes this:
AAAAAAAA:input text
BBBBBBBB:
input text
CCCCCCCC:input text
DDDDDDDD:
submit input text
shutdown
It is ugly, I don't want it like that.
Here is my css and html code:
<style>
.addDiv{width:25%;height:20%;position:absolute;top:35%;left:35%;border:2px solid #ffffff;color:white;display:none;border-radius:15px;background:rgba(0,0,0,0.7);}
.firDiv{height:80%;width:100%}
.firDiv label{float:left;margin-left:10%;margin-top:2%;width:20%}
.firDiv input{float:right;border:1px solid #99ccff;background:rgba(0,0,0,0.35);margin-right:10%;
margin-top:2%;color:white;width:45%}
.secDiv{height:20%;text-align:center;width:100%;margin-top:5%}
</style>
<div id="addCnt" class="addDiv">
<form action="mng.php?act=add&table=IDC" method="POST">
<div class="firDiv">
<label>AAAAAAA:</label><input type="text" name="prdSty"><br />
<label>BBBBBBB:</label><input type="text" name="diffLvl"><br />
<label>CCCCCCC:</label><input type="text" name="repTm"><br />
<label>DDDDDDD:</label><input type="text" name="fixTm"><br />
</div>
<div class="secDiv">
<input type="submit" value="add" /><input id="sdnBt" type="button" value="shutdown" >
</div>
</form>
</div>
Who can help me?
may be something like this?
* {
box-sizing: border-box;
}
.firDiv label {
padding: 5px;
text-align: right;
float: left;
width: 17%;
}
.firDiv .control {
float: left;
width: 83%;
}
.form-group {
clear: both
}
.secDiv {
margin-left: 16%;
padding-top:10px;
}
<form action="mng.php?act=add&table=IDC" method="POST">
<div class="firDiv">
<div class='form-group'>
<label>AAAAAAA:</label>
<div class='control'><input type="text" name="prdSty"></div>
</div>
<div class='form-group'>
<label>BBBBBBB:</label>
<div class='control'><input type="text" name="prdSty"></div>
</div>
<div class='form-group'>
<label>CCCCCCCC:</label>
<div class='control'><input type="text" name="prdSty"></div>
</div>
<div class='form-group'>
<label>DDDDDDDDD:</label>
<div class='control'><input type="text" name="prdSty"></div>
</div>
</div>
<div class="secDiv">
<input type="submit" value="add" />
<input id="sdnBt" type="button" value="shutdown">
</div>
</form>
Two things you need to do here. First you have to clear the floats after the first Div completed. Second is apply float left to your input fields.
.firDiv input{float:left;border:1px solid #99ccff;background:rgba(0,0,0,0.35);margin-right:10%;
margin-top:2%;color:white;width:45%;}
.secDiv{height:20%;text-align:center;width:100%;margin-top:10%; clear:both;}
I have applied clear:both in secDiv and float:left in firDiv.
DEMO
add this to your css fiddle
.secDiv input {
width: 50%;
}
Rather try adding each input and label to their own div, something like this:
https://jsfiddle.net/ba0cL61b/5/
What this does is adds a div .row inside your firDiv div and inside the .row adds a div for your label and one for your input. So it would look like this:
<div class="row">
<div class="label">
<label>AAAAAAA:</label>
</div>
<div class="input">
<input type="text" name="prdSty">
</div>
</div>
This is a bit easier to understand and style.
Here's an example of the problem I am facing:
https://jsfiddle.net/v10un11s/1/
This is my HTML:
<div>
<div class="component">
<div>
<label for="test1" id="short-label">Short label: </label>
</div>
<div>
<input type="text" id="test1" />
</div>
</div>
<div class="component">
<div>
<label for="test2" id="long-label">This is my very very very very very very very very very very very very very very very very very very long label: </label>
</div>
<div>
<input type="text" id="test2" />
</div>
</div>
</div>
My css:
.
component > div:first-child {
width: 150px;
text-align: right;
margin-right: 5px;
margin-bottom: 10px;
}
.component > div {
display: inline-block;
}
This results in the input field lining up to the right of the labels. This is what I want, however, it lines at the end of the line of a very long label.
What I really want is that the input field line to the right AND to the relative middle of the label.
So in the JS Fiddle example above, I would want the input field to line up to the right of the third line of the long label.
I've been playing around with margins, paddings, line-height, etc etc, and I've not been able to figure out the correct solution.
Just one line of CSS should do the trick!
.component > div {
display: inline-block;
vertical-align: middle;
}
Just remember, this works both ways - so if your input is taller than your label, the label will center to the input.
You can use Flexbox and set align-items: center on .component
.component {
display: flex;
align-items: center;
}
.component > div:first-child {
width: 150px;
text-align: right;
}
<div>
<div class="component">
<div>
<label for="test1" id="short-label">Short label:</label>
</div>
<div>
<input type="text" id="test1" />
</div>
</div>
<div class="component">
<div>
<label for="test2" id="long-label">This is my very very very very very very very very very very very very very very very very very very long label:</label>
</div>
<div>
<input type="text" id="test2" />
</div>
</div>
</div>
Following is the code :
in this code the 1st box is not coming in a row else other 2 are having no problem
<div class="foo">
<div class="bar">1<input id="J" type="textt" style="width:40% height:20%" autocomplete="off" autofocus class="textboxx"/>
</div>
<div class="bar"><input type="submit"></div>
</div>
</br>
<div class="bar">2<input id="J" type="textt" style="width:40% height:20%" autocomplete="off" autofocus class="textboxx"/>
</div>
<div class="bar"><input type="submit"></div>
</div>
</br>
<div class="bar">3<input id="J" type="textt" style="width:40% height:20%" autocomplete="off" autofocus class="textboxx"/>
</div>
<div class="bar"><input type="submit"></div>
</div>
& the CSS
.foo {
display: table;
width: 100%;
}
.bar {
display: table-cell;
}
.bar:first-child, input[type="text"] {
width: 20%;
}
input {
box-sizing: border-box;
}
Help regarding this asap.
Check this Fiddle
CSS:
.foo {
display: block;
width: 100%;
}
.row
{
display:block;
}
.bar {
display: inline-block;
}
input {
box-sizing: border-box;
}
HTML:
<div class="foo">
<div class = "row">
<div class="bar"> 1
<input id="J" type="text" style="width:40% height:20%" autocomplete="off" autofocus class="textboxx"/>
</div>
<div class="bar"><input type="submit"/></div>
</div>
<div class = "row">
<div class="bar"> 2
<input id="J" type="text" style="width:40% height:20%" autocomplete="off" autofocus class="textboxx"/>
</div>
<div class="bar"><input type="submit"/></div>
</div>
<div class = "row">
<div class="bar"> 3
<input id="J" type="text" style="width:40% height:20%" autocomplete="off" autofocus class="textboxx"/>
</div>
<div class="bar"><input type="submit"/></div>
</div>
just change the width from 20px to 29.5%
.bar:first-child, input[type="text"] {
width: 29.5%;
}
DEMO:http://jsfiddle.net/LrshX/
use table instead of div. give every input in a
<td> <input type ="text"\> <\td>
tag
Change foo class from display:table to display:inline
I think you are overcomplicating things for no reason. And you have messed up (somewhat) your HTML tags, your CSS styles etc.
What (I believe) you are after, could be achieved (among many ways) like this:
HTML
<div class="foo">
<div class="bar">
1
<input type="text" id="J1" class="textbox"
autocomplete="off" autofocus />
</div>
<div class="bar"><input type="submit" /></div>
</div>
<br />
...
CSS
.foo {
display: table;
width: 100%;
}
.bar { display: table-cell; }
.bar:first-child { width: 20%; }
input[type="text"] { width: 80%; }
See, also, this short demo.
Some additional remarks:
Do not use the same id on multiple elements in your DOM, or you're very likely to experience unexpected behaviour.
If you use autofocus on all text-fields, the ladt one will receive the focus.
If you want your submit buttons to actually do something, don't forget to include them in form or bind them using JavaScript.