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
Related
So I'm creating an exercise for schools so a teacher can fill in a form which makes an exercise for their students. Now I'm trying to use a bootstrap columns to make things look better and more understandable where I'm going for this format:
SELECT1 - QUESTION
SELECT2
Now I thought I could achieve this by giving SELECT1 a col-md-3, QUESTION a col-md-7 and SELECT2 a col-md-10 which also gives them appropriate lengths for what they show. Now for some reason this stacks them vertically while giving them the appropiate length for their given cols. To make it even weirder if I shorten SELECT2 to for example col-md-3 like SELECT1 it will put QUESTION and SELECT2 on the same line. I tried putting them in a form with the class form-inline but that somehow made it like this:
QUESTION - SELECT1
SELECT2
which makes even less sense to me. I should note this is all inside a row which is inside a class with the styling for 10px padding left and right which is inside a panel panel-body which is inside a container.
Here is the relevant HTML code at the point where they're all just stacked vertically:
<span id="spanid">
<div class="form-group input-group col-md-3">
<select class="form-control">
<option disabled="" selected="">Choose</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div class="well well-sm col-md-7">
<h5 id="eQuestion">A question</h5>
</div>
<div class="form-group input-group col-md-10">
<select class="form-control">
<option disabled="" selected="">Choose the correct answer</option>
<option>Option 1</option>
<option>Option 2</option>
</span>
TL;DR: To get to the point as suggested how do I fix my code to get my page to look like this:
SELECT1 - QUESTION
SELECT2
EDIT for new code:
<span id="vqaspan" class="row">
<div class="form-group col-md-3">
<select class="form-control">
<option disabled="" selected="">Choose</option>
</select>
</div>
<div class="well well-sm col-md-7">
<h5 id="eQuestion">Question</h5>
</div><div class="form-group col-md-10">
<select class="form-control">
<option disabled="" selected="">Choose</option>
</span>
This gives me:
SELECT2
SELECT1 - QUESTION
I don't understand why SELECT2 is now being placed above the rest
All the element are coming in stack due to properties of class input-group. You can remove that to make it works as per your design requirement.
<span id="spanid">
<div class="form-group col-md-3">
<select class="form-control">
<option disabled="" selected="">Choose</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div class="well well-sm col-md-7">
<h5 id="eQuestion">A question</h5>
</div>
<div class="form-group col-md-10">
<select class="form-control">
<option disabled="" selected="">Choose the correct answer</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
</span>
Since you are using col-md-3 column grid will works only at or above medium level devices
As per your modification in code.This works well at my end.
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<span id="vqaspan" class="row">
<div class="form-group col-md-3">
<select class="form-control">
<option disabled="" selected="">Choose1</option>
</select>
</div>
<div class="well well-sm col-md-7">
<h5 id="eQuestion">Question</h5>
</div>
<div class="form-group col-md-10">
<select class="form-control">
<option disabled="" selected="">Choose2</option>
</select>
</div>
</span>
It is giving unexpected behavior cause you might have missed to close select and div at the end.
I know that you are asking about bootstrap here specifically, but if I may indulge in a little "you should use this instead", how about just using pure HTML capabilities (flexbox)? This type of scenario is what it's for (indeed, bootstrap 4 is now built with flexbox), and as you can see it's actually much simpler than bootstrap's infuriatingly hard to get right and darn near unreadable "col-md-x" css approach.
In this example, pared down for readability, we put flex-grow:2 on the select in the first row and flex-grow:1 on the h5, which achieves, more or less, the 2/3 and 1/3 ratios that you appear to want:
.row {
display: flex;
align-items: center;
}
#row1 select {
flex-grow: 2;
}
#row1 h5 {
flex-grow: 1;
}
#row2 select {
flex-grow: 1;
}
<div class="row" id="row1">
<select>
<option>Choose</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<h5>A question</h5>
</div>
<div class="row" id="row2">
<select>
<option>Choose the correct answer</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
I am using Select box and I want to make My select box to the right Side of the div.. here is my Code:
<div class="row">
<div class="col-md-12">
<div class="col-md-8">
Some Text
</div>
<div class="col-md-4 text-right">
<select class="selectpicker alibaba" id="graphdate">
<option value="Daily">Daily</option>
<option value="Weekly">Weekly</option>
<option value="Monthly">Monthly</option>
</select>
</div>
</div>
</div>
Add some CSS, it's up to you how you reference the select element but the basis is here:
select{
float: right;
}
https://jsfiddle.net/51rhsnwa/
From the row and column layout, I'll assume you're using the Bootstrap Grid layout.
To align an element to the right of the element that it is a child of, you can simply add the class pull-right to the element in question.
For example, in this case you would change your <select> tag to be:
<select class="selectpicker alibaba pull-right" id="graphdate">
Add class pull-right to your select.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-12">
<div class="col-md-8" style="border:1px solid red;">
Some Text
</div>
<div class="col-md-4" style="border:1px solid blue;">
<select class="selectpicker alibaba pull-right" id="graphdate">
<option value="Daily">Daily</option>
<option value="Weekly">Weekly</option>
<option value="Monthly">Monthly</option>
</select>
</div>
</div>
thanks all for the reply.. but i have not found anyone's answer helpful. i tried this and it solved my problem
<div class="col-md-offset-10 col-md-2 padding-left-0">
<select class="selectpicker alibaba" id="graphdate">
<option value="Daily">Daily</option>
<option value="Weekly">Weekly</option>
<option value="Monthly">Monthly</option>
</select>
</div>
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 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.