Date with bootsrap in 3 drop downs in form - html

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

Text field looking option inside my select tag

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>

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

Tooltip hover on selected field in angular 2

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

How to set bootstrap drop down size?

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

How do I have both my drop down list divs sit side by side to each other

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.