I have an issue I have a form, where i would like to have a 3 drop downs for day / month / year, but all does drop down are placed big one under another but i would like to have it small and horizontal.
Any idea how to do it?
<div class="form-group">
Date:
<Select ... />
<Select ... />
<Select ... />
</div>
This gives me this:
But i would like to have it smaller and next to each other ...
you have to read bs3 Docs
Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.
this would work in your case:
<div class="form-group">
Date:
<div class="col-xs-4"><select /></div>
<div class="col-xs-4"><select /></div>
<div class="col-xs-4"><select /></div>
</div>
You could use form-inline..
<form class="form-inline">
<div class="form-group">
Date:
<select class="form-control"><option>One</option></select>
<select class="form-control"><option>Two</option></select>
<select class="form-control"><option>Three</option></select>
</div>
</form>
http://www.bootply.com/126815
Related
I cannot seem to quite search for the correct term to solve my issue but, I have this weird text field like thing above my select list:
<div class="col-md-4">
<div class="form-group">
<select class="form-control w-100 config_view_type">
<option value="P">Public</option>
<option value="R">Restricted</option>
</select>
</div>
</div>
what's causing it to appear?
I think you have positioned your form using css. Can you elaborate your code a bit more? I just placed your code inside a template and it seems to be working fine.
<!DOCTYPE html>
<html>
<body>
<h1>The select element</h1>
<p>The select element is used to create a drop-down list.</p>
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<div class="col-md-4">
<div class="form-group">
<select class="form-control w-100 config_view_type">
<option value="P">Public</option>
<option value="R">Restricted</option>
</select>
</div>
</div>
what's causing
<br><br>
<input type="submit" value="Submit">
</form>
<p>Click the "Submit" button and the form-data will be sent to a page on the
server called "action_page.php".</p>
</body>
</html>
Your code Worked fine, maybe the issue with which bootstrap you linked the document with. try the bootstrap link I used
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="col-md-4">
<div class="form-group">
<select class="form-control w-100 config_view_type">
<option value="P">Public</option>
<option value="R">Restricted</option>
</select>
</div>
</div>
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
html code
<td >
<input type="text" class="form-control" value="create.qty[i]" (mouseenter)="toggle()" (mouseleave)="toggle()" name="qty" [(ngModel)]="this.create.qty[i]" #qty="ngModel" (change)="onqtyadd($event.target.value,i)" >
<div *ngIf="show">
<div *ngIf="show" style="border-radius: 6px;z-index: 8;position: absolute; background-color:black;height: 15%;padding-left:10px;color:white; width: 5%;"><p>{{qtyhover[i]}}</p></div>
</div>
</td>
I just want to show the selected field but it show hover in every field in dynamic table
enter image description here
instead use boolean property use number like show:number
and set an index (the current) to show on mouseenter/leave and in html ask if show==index
in HTML:
(you do not have to ask twice ngIf only in wrap div)
<input type="text" class="form-control" (mouseenter)="show=i" (mouseleave)="show=0">
<div *ngIf="show==1">
<div>your tooltip 1 </div>
</div>
See example:https://stackblitz.com/edit/hello-angular-6-eu5ecu?file=src/app/app.component.html
I am very new to designing .
My requirement is I want set the col-mg-2 for my select box.
but it's not adujestble Here I attached fiddle link
http://jsfiddle.net/soumyagangamwar/pno7xojh/2/
If I increse the option length the select box size also increaing. I want to fix it as col-mg-2, if drop down option lenght is much then it i=split two lines.
my code is like
<div class="form-group">
<div class="col-md-3">
<select class="form-control" ng-model="sourceColumn"
ng-options="column.label for column in operationColumn">
<option value="">Source Columns</option>
</select>
</div>
Please Help me?
wrap your select box one div with col-*-2
<form class="form-inline" role="form" name="joinGeneralInfo">
<div class="col-xs-2">
<select class="form-control" ng-model="sourceTable"
ng-options="tabelName.label for tabelName in operationData"
ng-change="getOperationColumns(sourceTable)">
<option value=""> Source Tables</option>
</select>
</div>
<div class="col-xs-2">
<select class="form-control" ng-model="sourceColumn"
ng-options="column in operationColumn">
<option value="">Source Columns</option>
</select>
</div>
</form>
http://jsfiddle.net/pno7xojh/4/
Try This:
You can adjust the width CSS
Add and id to your select
<select class="form-control" ng-model="sourceColumn" id="tableID"
ng-options="column.label for column in operationColumn">
Then use CSS to adjust the size:
#tableID
{
width:30%;//You can adjust the width to your required size.
}
Cant seem to get these two lists to sit side by side rather than on top of each other , here is my code, any guidance would be much appreciated!
Here is my code
<div class="panel-body">
<div class="monthSelect">
<div class="form-group">
<label for="yearValues">Select Year</label><br /> <!--Delete if necessary-->
<div class="yearSelector" >
<select ng-model="selected.year" ng-options="year.year for year in yearValues">
<option value="" disabled>Select year</option>
</select><!--Select ng-model-->
</div><!--YearSelector Div-->
<label for="exampleInputPassword1">Select Period</label>
<div class="periodSelector">
<!--periodValues must correspond with the name of the array-->
<select ng-model="selected.period" ng-options="period.period for period in periodValues">
<option value="" disabled>Select Month</option>
</select> <!-- select ng-model -->
</div><!--close periodselector-->
</div><!--Div class form-group-->
</div><!--Div class: Month Select-->
</div><!--Div class: Panel Body-->
</div><!--Div class panel: Default-->
</div><!--Div class col-md-12-->
</div><!--Div class: Row-->
<!--Customer report Generator-->
<!--LynchReport Generator-->
There are may ways you can achieve this try any of these
use a table
wrap your contents in one single HTML table row.
<table>
<tr>
<td> field 1 </td>
<td> field 2 </td>
</tr>
</table>
or
use style="float:left" for each element you need on a single line. use proper margin to have enough spacing between them
<div style="float:left;margin:2px;">
field 1
</div>
<div style="float:left;margin:2px;">
field 2
</div>
Another way is to use bootstrap as your code already look like you are already using that,
check this link on how to align your divs. http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
can very well align your code. your can change the number 6 to other values say 1-12 for proper alignment.