Align contents of col-xs - html

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>

Related

Moving elements of a div to the right

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

Dropdown changes its size when page size is changed

I have a select element in my form. When i zoom in or zoom out my browser ,the select element gets resized and changes its position. Kindy help me out. I will attach the code also.
<div class="form-group">
<select class="form-control" style="height:50px;" id="search_color">
<option value=" " hidden>Color</option>
<option value="0">Red</option>
<option value="1">Green</option>
<option value="2">Blue</option>
<option value="3">Yellow</option>
<option value="4">Orange</option>
<option value="5">Purple</option>
<option value="6">Grey</option>
<option value="7">Multicolor</option>
</select>
</div>
Basically, bootstrap classes have some behavior that varies depending on the size of the screen. In your case, You can actually apply a basic HTML center tag to override bootstrap class behavior and retain your dropdown option to the center of the screen.
Try this one:
<div class="form-group">
<center>
<select class="form-control" style="height:50px;" id="search_color">
<option value=" " hidden>Color</option>
<option value="0">Red</option>
<option value="1">Green</option>
<option value="2">Blue</option>
<option value="3">Yellow</option>
<option value="4">Orange</option>
<option value="5">Purple</option>
<option value="6">Grey</option>
<option value="7">Multicolor</option>
</select>
</center>
</div>

Multiple divs in online first and force the next pair down to the next line depending on the size of the screen?

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/.

bootstrap 3 show label in inline selectbox

I set label for select box menu in bootstrap 3 like this :
<div class="col-lg-2">
<label>Filter</label>
<select class="form-control" name="sort">
<option value="1">1</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
</select>
</div>
in output in see label in top of select box menu:
I need to show label inline of select box menu like this :
how do show label in inline ?!
DEMO JSFIDDLE
You need put your label and your select inside of a "group", so we have this:
<div class="form-group">
<label for="sort" class="col-sm-2 control-label"> Filter </label>
<div class="col-sm-10">
<select class="form-control" name="sort" id="sort">
<option value="1">1</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
</select>
</div>
</div>
You want form-inline - This example works in full screen mode (not sure why this code snippet wraps when not in full screen mode) but give it a whirl it should work for you.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
<div class="form-group">
<label for="dashboard-filter">Filter By</label>
<select id="dashboard-filter" class="form-control">
<option>1</option>
<option>2</option>
</select>
</div>
</form>
Docs are here: https://getbootstrap.com/docs/3.4/css/#forms-inline

Align rendered option text in a select tag

I have this html:
<div class="form-group">
<label for="catId">Category</label>
<select class="form-control" id="catId" ng-model="intCategory"
ng-options="c.Id as c.Category for c in intCategories">
<option value="">--Select--</option>
</select>
</div>
I am using bootstrap for css and angularjs to render the options. Everything is working except that the option text appears to be aligned to the left. How can I center the option text?
Well seems like if I include a display of inline-block in the parent div tag it then works. Really weird.
Here is the updated html:
<div class="form-group" style="display: inline-block;">
<label for="catId">Category</label>
<select class="form-control" id="catId" ng-model="intCategory"
ng-options="c.Id as c.Category for c in intCategories">
<option class="" value="">--Select--</option>
</select>
</div>
You can try using "text-center" class, like this:
<div class="form-group">
<label for="catId">Category</label>
<select class="form-control text-center" id="catId" ng-model="intCategory" ng-options="c.Id as c.Category for c in intCategories">
<option value="">--Select--</option>
</select>
</div>
or
<option class="text-center" value="">--Select--</option>
It works fine with Bootstrap.