My label is not aligning with my select box. Instead, it is sitting below the previous div, which is in the middle of the page.
The select box sits to the far left. The for and name values match, so I don't understand why they are separated.
I am using style="display:inline;" on the previous div and style="display:inline-block;vertical-align:top" on the div following.
Even if I replace label with span it still sits under the previous div in the centre of the page. Any ideas?
This is the whole problem div.
<div class="form-group">
<div class="dropdown" dropdown>
<label class="label-text" for="unit" >Cm/Inch</label>
<select class="form-control" id="unit" style="width:150px;"
(ngModelChange)="onUnitChange($event)"
[(ngModel)]="job_entry.units" name="unit">
<option disabled hidden [value]="undefined">select unit </option>
<option value="cm">centimeters</option>
<option value="inch">inches</option>
</select>
</div>
Related
I have a simple parent div element containing multiple child div elements. When the page is loaded, these div elements are displayed on the left. I would like to display these items on the right. How can I achieve this?
Currently, my page elements look like this:
If I try style="float:right", I am getting compressed elements:
Here is the html code:
<div class="row">
<div class="col-md-2" style="text-wrap:none; width:11%">
<label>Requests Per Page: </label>
</div>
<div class="col-md-1" style="text-wrap:none">
<select id="RecordsPerPage">
<option value="10">10</option>
<option value="25" selected="selected">25</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="150">150</option>
<option value="200">200</option>
<option value="250">250</option>
</select>
</div>
<div class="col-md-3" style="text-wrap:none">
Go to Page #:
<input type="number" id="UserPageNumber" min="1" size="5" style="width:50px;" value="1" max="87">
of <span id="spTotalPages">87</span>
<button id="btnPage" onclick="handlePaging();">GO</button>
</div>
</div>
Add class justify-content-end to row element
<div class="row align-items-end">
I also recomend using bootstrap utility classes instead of inline styles. Here is your example - little adjusted: https://www.bootply.com/k7mrP9fHPz
Assumed you are using current version of Boostrap - v4
Multiple divs, each with a label and a dropdown. What is the simplest way to force the dropdown/label pair to always be on the same line, and force the next pair down to the next line depending on the size of the screen?
So far I have:
<div style="display:inline-block; vertical-align:middle; width:100%;">
<div style="float:left; width:40%; display:block;">
<label for="zone"><b><%=zonestr%></b></label>
<select id="zone" name="zone" onchange="getDIV();start();">
<option value=""><%=selectstr%><%=zonestr%></option>
<option value="1">value1</option>
<option value="2">value2</option>
<option value="3">value3</option>
</select>
</div>
<div style="float:left; width:60%;">
<label for="district"> <b><%=resultstr%></b> </label>
<select id="district" name="district">
<option value=""><%=selectstr%><%=resultstr%></option>
<option value=""></option>
</select>
</div>
</div>
You can use bootstrap grid as per codepen link have:
codepen.io/greatzspido/pen/YrvQry
If you don't want to include complete bootstrap, you can use ultimate light weight grid structure of https://neat.bourbon.io/.
I have a col-xs-8 column as follow:
<div class="col-xs-8">
<div>Every</div>
<select id="update-frequency"
ng-model="retentionSettings.triggers.date.repeat"
ng-disabled="!retentionSettings.triggers.dateStatus">
<option value="day">day</option>
<option value="week">week</option>
<option value="month">month</option>
</select>
<div ng-show="retentionSettings.triggers.date.repeat=='week'">
<div>on</div>
<select id="weekDayDropDown"
ng-model="retentionSettings.triggers.date.weekday"
ng-disabled="!retentionSettings.triggers.dateStatus">
<option ng-repeat="x in weekdaysList()">{{x}}</option>
</select>
</div>
</div>
The contents of this column with the above snippet pile up vertically like so:
I'd like to have them horizontally. Im avoiding using more columns inside this one because the spacing wont work for a sentence where the words should be near eachother. How do I achieve this?
The problem you're having is the divs for "Every" and "on" by default have a display: block. You could add custom styling to change the display value to fix this or you could not use div as demonstrated here:
<div class="col-xs-8">
<span>Every</span>
<select id="update-frequency"
ng-model="retentionSettings.triggers.date.repeat"
ng-disabled="!retentionSettings.triggers.dateStatus">
<option value="day">day</option>
<option value="week">week</option>
<option value="month">month</option>
</select>
<span>on</span>
<select id="weekDayDropDown"
ng-model="retentionSettings.triggers.date.weekday"
ng-disabled="!retentionSettings.triggers.dateStatus">
<option ng-repeat="x in weekdaysList()">{{x}}</option>
</select>
</div>
I have a multi-select box with size 3, when I scroll up using mouse inside the box the options scroll, as soon as the first element is at the top of the box, the page itself will scroll even though the mouse pointer is inside the box. same if I scroll down.
<div class="form-group">
<label >Speciality<span class="required">*</span></label>
<p style="font-size:11px;">Hold down Ctrl (windows) / Command (Mac) and click to select multiple options </p>
<select style="height: auto; "class="form-control" multiple size='3' required>
<option value="">None</option>
<option value="1">X</option>
<option value="2">Y</option>
<option value="3">z</option>
</select>
</div>
I have made three drop down menu. I want to align one after the other. Below is the code I am using. But its not coming in the same line. What I want is first should go on left, second should go on center and third should go on right.
First is
<div style="float:left;">
<FORM name="mapform" method="POST">
<SELECT name="jump" size="1">
<OPTION value="" SELECTED>Select the Category</option>
<OPTION value="http://www.fe dri.com/posting.php?mode=post&f=1">Ask a Question</option>
<OPTION value="http://www.fe dri.com/posting.php?mode=post&f=4">Vehicle for Sale</option>
</SELECT>
<INPUT type=button onClick= "location = '' + document.mapform.jump.options[ document.mapform.jump.selectedIndex ].value;" value="Place an Ad!">
</FORM>
</div>
Second is
<div style="float:center;">
<FORM name="mapform2" method="POST">
<SELECT name="jump2" size="1">
<OPTION value="" SELECTED>Select the Category</option>
<OPTION value="http://www.fe dri.com/discuss">General Discussion</option>
</SELECT>
<INPUT type=button onClick= "location = '' + document.mapform2.jump2.options[ document.mapform2.jump2.selectedIndex ].value;" value="Quick View !">
</FORM>
</div>
Third is
<div style="float:right;">
<FORM name="mapform1" method="POST">
<SELECT name="jump1" size="1">
<OPTION value="" SELECTED>Select the Category</option>
<OPTION value="http://www.fe dri.com/posting.php?mode=post&f=16">Start New General Discussion</option>
<OPTION value="http://www.fe dri.com/posting.php?mode=post&f=28">Start New Event</option>
</SELECT>
<INPUT type=button onClick= "location = '' + document.mapform1.jump1.options[ document.mapform1.jump1.selectedIndex ].value;" value="Start a Discussion!">
</FORM>
</div>
I am getting it as in the image
There is no float:center. Float your first two divs left, and the last one right. This should fix the problem, assuming you have enough space for all your elements on one line.
Here is a demonstration: http://jsfiddle.net/MCRUX/
In case you missed it in the example, I have set the width of each of the container divs to 30%:
<div style="float:left;width:30%;">
Use a table having 3 columns to align the drop down box.
<table width="100%">
<tr>
<td align="left">{drop down box 1}</td>
<td align="center">{drop down box 2}</td>
<td align="right">{drop down box 3}</td>
</tr>
</table>
As #Asad said, there is nothing called float:center. If the size of the parent element in which you are placing your divs has a fixed size, you can do some mathematical calculation and decide the size of the divs you are gonna place.
for example, if i have a parent box of 960px and want to place 3 divs inside it, i ll do something like this...
div.children {
width:313.33px;
margin-right:10px;
float:left;
}
div.children:last-child {
margin-right:0;
}
Since 313.33 X 3 ~ 940 plus total margin will be 20px and both will add upto 960px.