I want to display dropdown list from table in database.But it appear to many. I attach picture
image1
My Script is like this
#foreach($jenis as $jns)
<div class="form-group row">
<label for="example-text-input" class="col-md-2 col-form-label form-control-label">Jenis Kad</label>
<div class="col-md-10">
<label class="form-control-label" for="exampleFormControlSelect1"Jenis Penerimaan</label>
<select class="form-control" id="exampleFormControlSelect1" name="jenis">
<option class="dropdown-item" value="{{$jns->kod}}">{{$jns->nama}}</option>
</select>
</div>
[enter image description here][2]</div>
#endforeach
Related
I use bootstrap3. What is the correct way to align my right blue text (name) with input field below it?
<form id="myform" class="form-horizontal">
<div class="box-body">
<div class="form-group form-group-sm">
<label class="col-sm-3 form-control-static">Name</label>
<div class="col-sm-9 form-control-static">
<p class="text-primary">Samir Nasri</p>
</div>
</div>
<div class="form-group form-group-sm">
<label for="title" class="col-sm-3 form-control-static">Title<span class="mandatory"> *</span></label>
<div class="col-sm-9">
<input type="text" class="form-control" id="title" name="title" value="" placeholder="Title">
</div>
</div>
</div>
</form>
Thanks in advance.
Hi everyone im trying to add the possibility that the user can get the latitude and longitude from a click and get the lat and longitude in the fields : this is my html part :
<div class="col-sm-4">
<div class=" panel panel-primary" style="background-color: darkgray;" >
<div class="panel-heading">Position :</div>
<div class="panel-body">
<div class="form-group">
<label class="control-label">Adresse :</label>
<input type="text" class="form-control" [(ngModel)]="pan.adresse"/>
</div>
<div class="form-group">
<label class="control-label">Latitude</label>
<input type="text" class="form-control" [(ngModel)]="pan.latitude"/>
</div>
<div class="form-group">
<label class="control-label">Longitude :</label>
<input type="text" class="form-control" [(ngModel)]="pan.longitude"/>
</div>
<div class="form-group">
<label class="control-label">Etat :</label>
<input type="text" class="form-control" [(ngModel)]="pan.etat"/>
</div>
</div></div>
</div>
<div class="col-sm-8">
<div class=" panel panel-primary" >
<div class="panel-heading">Map :</div>
<div class="panel-body">
<agm-map [latitude]="36.718241" [longitude]="3.091969" [zoom]="6">
</agm-map>
</div></div>
</div>
so i have the map and the input related to latitude and longitude, instead of writing the informations i want to replace that by a click on the map and the fields will be full automatically
thanks guys.
You can use mapClick event to retrieve lat and lng of place where the user has clicked, and assign that information to variables which are being accessed in template
<agm-map (mapClick)="mapClick($event)" [latitude]="36.718241" [longitude]="3.091969" [zoom]="6">
</agm-map>
In .ts file add
mapClick($event) {
this.pan.latitude = $event.lat();
this.pan.longtitude = $event.lng();
}
mapClick Latlng
I can't seem to get my checkboxes to align with the labels and select options inside a well using bootstrap 3.3.5. My code is:
<div class="well">
<div class="row">
<div class="col-md-6">
<label class="control-label">Checkboxes</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="checkbox">
<input type="checkbox" id="1">1
</div>
<div class="checkbox">
<input type="checkbox" id="2">2
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Select</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<select id="2" class="form_control">
<option value="A">A</option>
<option value="B">B</option>
</select>
</div>
</div>
</div>
Fiddle illustrating misalignment:
https://jsfiddle.net/dwzvsoax/
I'm pretty new to bootstrap, so I'm probably doing something dumb! Thank you in advance.
Wrap your form elements and labels together with a .form-group element.
jsFiddle
Also, you should read the Boostrap Documentation on Forms
<div class="well">
<div class="form-group">
<label>Check Boxes</label>
<div class="checkbox">
<label>
<input type="checkbox" /> 1
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" /> 2
</label>
</div>
</div>
<div class="form-group">
<label>select</label>
<select id="2" class="form-control">
<option value="A">A</option>
<option value="B">B</option>
</select>
</div>
</div>
you could add in to the .checkbox class an attribute margin-left:22px; in the css file and that should give you the desired effect. If it's just on one page though, just add it in style tags at the top of the page, as it may not be desirable everywhere.
I updated your fiddle
I have code like below. How to make buttons in-line with input ? Now buttons are inline with adjacent column and looks ugly. Live demo here
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="x" class="control-label">Function</label>
<input type="text" id="x" class="form-control" placeholder="x"/>
</div>
</div>
<div class="col-md-1">
Get
</div>
<div class="col-md-1">
Stat
</div>
</div>
You can use an input group (though bootstrap say you shouldn't use input groups with selects because it doesn't always behave)
http://getbootstrap.com/components/#input-groups-buttons
edit: for the label above the input group:
<div class="container" style="width: 600px;">
<form id="form" role="form">
<div class="row">
<label for="x" class="control-label">Function</label>
<div class="input-group">
<select id="x" class="form-control" placeholder="x">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<span class="input-group-btn">
Get
Stat
</span>
</div>
</div>
</form>
</div>
or for the label as part of the input group:
<div class="container" style="width: 600px;">
<form id="form" role="form">
<div class="row">
<div class="input-group">
<span class="input-group-addon"><label for="x" class="control-label">Function</label></span>
<select id="x" class="form-control" placeholder="x">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<span class="input-group-btn">
Get
Stat
</span>
</div>
</div>
</form>
</div>
I added an update to your fiddle:
input above group: http://jsfiddle.net/ced7k0hq/11/
input as part of group: http://jsfiddle.net/ced7k0hq/12/
From the bootstrap docs: http://getbootstrap.com/components/#input-groups
Textual <input>s only
Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.
Avoid using <textarea> elements here as their rows attribute will not be respected in some cases.
thanks #ovitinho for comment about joining the two anchors inside a single input-group-btn :D
I wish to have labels right-aligned next to its input box (with a space in between). However, labels are still left-aligned. According to Boostrap3 documentation and this question, the form-horizontal class should be used, but still result is not right.
The django template code below does generate fields in a two-column fashion, but with left-aligned labels:
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-md-3 col-md-offset-1 input-md">
{{ form.code|bootstrap_horizontal }}
</div>
<div class="col-md-3 col-md-offset-2 input-md">
{{ form.name|bootstrap_horizontal }}
</div>
<div class="col-md-3 col-md-offset-1 input-md">
{{ form.company|bootstrap_horizontal }}
</div>
</div>
<div class="btn-group btn-group-lg">
<button class="btn" type="submit">Crear Marca</button>
</div>
</form>
I guess I'm missing something. Thanks in advance for your help.
EDITED:
Output HTML in jsfiddle.
Image of actual output included as well in this link. As you can see, Code & Company are left-aligned.
I think your text is right-aligned but the effect is not visible due to the nesting of your grid classes.
Try something like:
<form class="form-horizontal container" role="form">
<div class="form-group">
<label for="inputEmail1" class="col-sm-2 control-label">Code</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
<label for="inputPassword1" class="col-sm-2 control-label">Name</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="inputPassword1" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputEmail1" class="col-sm-2 control-label">Company</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
<div class="btn-group btn-group-lg">
<button class="btn" type="submit">Crear Marca</button>
</div>
</form>
When you nest your grid classes (col--) a child get a percentage of the width of its parent. When you nest a col-lg-6 in a col-lg-6 its with will be 25% of the viewport 50% of 50%.
In the case you want to input next to each other with a float left (your col-- classes add this float) they can't be in different input-groups. The .from-group has a clearfix which undo the float left. So try something like:
<div class="col-sm-6">
<div class="form-group">
<label for="inputEmail1" class="col-sm-4 control-label">Company</label>
<div class="col-sm-8">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputEmail1" class="col-sm-4 control-label">Company 2</label>
<div class="col-sm-8">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
</div>