I have bootstrap custom tab. And instead of just menu names I have multiple select tags and date range picker. And I want to open tab's content not on click on that drop-down select, but I want the click to be triggered, when user will choose from that drop-down list.
Do you have any suggestions?
UPDATE
So this is bootstrap custom tab
<div class="col-lg-2 col-md-4 col-sm-4 col-xs-6">
<label class="control-label text-white">tab1</label>
<a href="#tab1" aria-controls="profile" role="tab" data-toggle="tab" aria-expanded="false">
<select class="form-control select2">
<option>All</option>
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone">
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</optgroup>
</select>
</a>
</div>
<div class="col-lg-2 col-md-4 col-sm-4 col-xs-6">
<div class="form-group text-left">
<label class="control-label text-white">tab2</label>
<a href="#tab2" aria-controls="messages" role="tab" data-toggle="tab"
aria-expanded="false">
<select class="form-control text-white" name="country">
<option>All</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</a>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-4 col-xs-6">
<div class="form-group text-left">
<label class="control-label text-white">tab3</label>
<a href="#tab3" aria-controls="profile" role="tab" data-toggle="tab" aria-expanded="false">
<select class="form-control text-white" name="country">
<option>All</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</a>
</div>
</div>
I have select tags on each tab, I want to trigger click event when user select item form that select drop-down list. Currently when I click on select tag, without selecting any item, tab content appears.
Thanks in advance.
Related
I have a Bootstrap 5 form with floating labels in input and select elements. The Track select lines up perfectly with the Location name input above it but the Product select is slightly too far to the left of the Track select. It also has a slightly narrower width than the row above.
Here's the html for the fields.
<div class="row">
<div class="col-sm-6 offset-sm-3 mb-2">
<div class="form-floating">
<input id="clear-name" name="LocationName[]" type="text" class="form-control" placeholder="x" value="">
<label class="text-muted">Location name</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3 offset-sm-3 mb-2">
<div class="form-floating">
<select id="track-length" name="LocationTrackLength" class="form-select text-center" required>
<option></option>
<option value="7">7 ft</option>
<option value="9">9 ft</option>
<option value="10">10 ft</option>
<option value="11">11 ft</option>
<option value="13">13 ft</option>
<option value="15">15 ft</option>
<option value="21">21 ft</option>
<option value="custom-length">Custom…</option>
</select>
<label>Track</label>
</div>
</div>
<div class="col-sm-3 mb-2">
<div class="form-floating">
<select id="ceiling-height" name="LocationCeilingHeight" class="form-select text-center" required>
<option></option>
<option value="8">8 ft</option>
<option value="8.5">8.5 ft</option>
<option value="9">9 ft</option>
<option value="9.5">9.5 ft</option>
<option value="custom-height">Custom…</option>
</select>
<label>Ceiling</label>
</div>
</div>
<div class="row mb-2">
<div class="col-sm-6 offset-sm-3">
<div class="form-floating">
<select id="location-product" name="LocationProducts.HospitalProductID" class="form-select text-center" required>
<option selected></option>
<optgroup label="Textile">
<option value="227" data-defaultprotocol="">96 x 36 Blue Stripe Textile</option>
<option value="228" data-defaultprotocol="1182">96 x 36 Green stripes</option>
</optgroup>
<optgroup label="Poly">
<option value="223" data-defaultprotocol="1183">Transparence Snap on 96in x 72in</option>
<option value="222" data-defaultprotocol="1182">Transparence Snap on 96in x 65in</option>
<option value="224" data-defaultprotocol="1181">Yellow Stripes Poly 92 x 36 92in x 36in</option>
</optgroup>
</select>
<label>Product</label>
</div>
</div>
</div>
</div>
</div>
The Location name field and the Product field both have the same offset and column widths (col-sm-6 offset-sm-3) so I can't figure out why they are displayed differently and how to fix the issue.
Any ideas?
I want to have 5 inputs in 1 row on a page with a custom width, for example: the amount input should be smaller and the offer input should be bigger I am trying but I do not understand how to do this. I tried adding 5 columns and then added col-lg-2 class to the inputs I want small and col-lg-4 to the ones I want bigger, it looks good but the submit button is not shown in the same row. any ideas? how to do this?
Here's the code I use
<div class="container-fluid">
<div class="row">
<div class="col-lg-2">
<div class="form-group">
<input class="search-form-amount form-control" name="amount" placeholder="Amount" type="text">
</div>
</div>
<div class="col-lg-2">
<div class="form-group">
<select class="search-form-currency form-control">
<option value="AED">AED</option>
<option value="AFN">AFN</option>
<option value="ALL">ALL</option>
<option value="AMD">AMD</option>
<option value="ANG">ANG</option>
<option value="AOA">AOA</option>
<option value="ARS">ARS</option>
<option value="AUD">AUD</option>
<option value="AWG">AWG</option>
<option value="AZN">AZN</option>
<option value="BAM">BAM</option>
</select>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<select class="search-form-currency form-control">
<option value="BQ">Bonaire, Sint Eustatius and Saba</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
</select>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<select class="search-form-currency form-control">
<optgroup label="All payment methods">
<option value="ALL_ONLINE">All online offers</option>
<option value="NATIONAL_BANK">National bank transfer</option>
<option value="SEPA">SEPA (EU) bank transfer</option>
<option value="SPECIFIC_BANK">Transfers with specific bank</option>
<option value="INTERNATIONAL_WIRE_SWIFT">International Wire (SWIFT)</option>
<option value="OTHER">Other online payment</option>
<option value="CASH_DEPOSIT">Cash deposit</option>
<option value="ECOCASH">EcoCash</option>
</optgroup>
</select>
</div>
</div>
<div class="col-lg-2">
<div class="form-group">
<input type="submit" name="find-offers" value="Search" class="btn btn-primary">
</div>
</div>
</div>
</div>
The Result I'm getting:
What I'm trying to achieve:
I would do 3 things to improve the spacing/sizing...
Remove gutter from the row using no-gutters
Add flex-lg-nowrap to the row to prevent wrapping on lg (and wider)
Use the auto-layout grid sizing on the right-most 2 columns
Codeply demo
<div class="container-fluid">
<div class="row no-gutters flex-lg-nowrap">
<div class="col-lg-2">
<div class="form-group">
<input class="search-form-amount form-control" name="amount" placeholder="Amount" type="text">
</div>
</div>
<div class="col-lg-2 pl-lg-1">
<div class="form-group">
<select class="search-form-currency form-control">
...
</select>
</div>
</div>
<div class="col-lg-4 pl-lg-1">
<div class="form-group">
<select class="search-form-currency form-control">
...
</select>
</div>
</div>
<div class="col-lg pl-lg-1">
<div class="form-group">
<select class="search-form-currency form-control">
..
</select>
</div>
</div>
<div class="col-lg-auto pl-lg-1">
<div class="form-group">
<input type="submit" name="find-offers" value="Search" class="btn btn-primary">
</div>
</div>
</div>
</div>
Bootstrap has 12 cols in a row. What you have now is col-lg-2 2 4 4 2, which adds up to 14. So if you want to make all of them into one row, you have to adjust your total col size below 12.
In term of responsive design, you might also want to create col- , even col-sm, col-md so it would layout nicely in smaller screen size.
I'm building a web application using html, java, javascript and css with bootstrap. Here is one section of that application which gives me troubles:
What I'm trying to accomplish here is to move this input field bellow the first row to be just bellow the first selection field. Something like this:
By the way new rows are added dinamically when user clicks on + button. And now here is that section written in html:
<div class="row">
<div class="form-group col-xs-5 formular-element-width-fix">
<label class="control-label formular-element-label" for="element<%=elementNumber%>">Element
<%=elementNumber %>:</label>
<div class="input-group">
<input type="text" class="form-control width100" id="element<%=elementNumber%>" name="element<%=elementNumber%>" placeholder="Enter a label">
</div>
</div>
<div class="form-group col-xs-2">
<select class="form-control width100" onchange="changeValidations(this); showRadioLabels(this)">
<option value="Textbox" selected>Textbox</option>
<option value="Checkbox">Checkbox</option>
<option value="Radio buttons">Radio buttons</option>
</select>
</div>
<div class="form-group col-xs-1 radio-number-hide">
<select class="form-control width100" onchange="changeRadioLabels(this)">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="form-group col-xs-2">
<select class="form-control width100">
<option value="None" selected>None</option>
<option value="Mandatory">Mandatory</option>
<option value="Numeric">Numeric</option>
<option value="Email">Email</option>
<option value="Date">Date</option>
</select>
</div>
<div class="form-group btn-group">
<button class="btn btn-add-element" onclick="addElement()">+</button>
</div>
<div class="form-group col-xs-5 formular-element-width-fix radio-input radio-input-hidden">
<div class="input-group">
<input type="text" class="form-control width100" id="new-element-input" name="new-element-input" placeholder="Enter a label">
</div>
</div>
</div>
By default, bootstrap takes 12 columns in one row, and if you try to use more than 12 columns, it automatically places the extra content in next row. Below is the snippet to achieve the result:
<div class="row">
<div class="form-group col-xs-5 formular-element-width-fix">
<label class="control-label formular-element-label" for="element<%=elementNumber%>">Element
<%=elementNumber %>:</label>
<div class="input-group">
<input type="text" class="form-control width100" id="element<%=elementNumber%>" name="element<%=elementNumber%>" placeholder="Enter a label">
</div>
</div>
<div class="form-group col-xs-2">
<select class="form-control width100" onchange="changeValidations(this); showRadioLabels(this)">
<option value="Textbox" selected>Textbox</option>
<option value="Checkbox">Checkbox</option>
<option value="Radio buttons">Radio buttons</option>
</select>
</div>
<div class="form-group col-xs-1 radio-number-hide">
<select class="form-control width100" onchange="changeRadioLabels(this)">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="form-group col-xs-2">
<select class="form-control width100">
<option value="None" selected>None</option>
<option value="Mandatory">Mandatory</option>
<option value="Numeric">Numeric</option>
<option value="Email">Email</option>
<option value="Date">Date</option>
</select>
</div>
<!--here completing 12 columns of first row-->
<div class="col-xs-2 form-group btn-group">
<button class="btn btn-add-element" onclick="addElement()">+</button>
</div>
<!--for next row, leave first 5 columns blank, which correspond to label and
textfield, Added css here-->
<div class="form-group col-xs-5 formular-element-width-fix"> </div>
<div class="form-group col-xs-5 formular-element-width-fix radio-input radio-input-hidden">
<div class="input-group">
<input type="text" class="form-control width100" id="new-element-input" name="new-element-input" placeholder="Enter a label">
</div>
</div>
</div>
Im trying to have a layout where there are some list items, each one have a title like "Item 0", a <small> below the title, in this example with the text "Description Item 0", and then at right of this text "Item 0" and "Item 0 Description" I want a select menu and at right of this select menu another select menu, like:
Item 0 select menu select menu
Description Item 0
And this elements should be vertically aligned. Im not achieving this layout with the code below do you know how to fix?
working example:
http://jsfiddle.net/fne5xLfv/1/
The "Description Item 0" is not below "Item 0", the select menu is below the text not at the right and the elements are not vertically aligned.
Html:
<div class="container py-5">
<div class="row no-gutters">
<div class="col-12 col-lg-8">
<div class="card">
<div class="card-header">
<h5 class="text-heading-blue mb-0 font-weight-semi-bold">Title</h5>
</div>
<div class="card-body">
<ul class="list-group">
<li class="list-group-item">
<span>Item 0</span>
<span>Description Item 0</span>
<form>
<select class="custom-select form-control">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
<form>
<select class="custom-select form-control">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
</li>
<li class="list-group-item">
<span>Item 1</span>
<span>Description Item 1</span>
<form>
<select class="custom-select form-control">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
<form>
<select class="custom-select form-control">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
</li>
<li class="list-group-item">
<span>Item 2</span>
<span>Description Item 2</span>
<form>
<select class="custom-select form-control">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
<form>
<select class="custom-select form-control">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
</ul>
</div>
<div class="card-footer">
<button type="button" class="float-right btn">Next</button>
</div>
</div>
</div>
Is something like this what you need? If not, please provide more info and also your html and CSS tries...
.list-group-item{
list-style-type: none;
}
<div class="col-12 col-lg-8">
<div class="card">
<div class="card-header">
<h5 class="text-heading-blue mb-0 font-weight-semi-bold">Title</h5>
</div>
<div class="card-body">
<ul class="list-group">
<li class="list-group-item">
<form>
<label style="display:inline-block; width:150px">Item 0</label>
<select class="custom-select form-control" style="display:inline-block;width:200px">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
<form>
<label style="display:inline-block; width:150px">Description Item 0</label>
<select class="custom-select form-control" style="display:inline-block;width:200px">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
</li>
<br>
<li class="list-group-item">
<form>
<label style="display:inline-block; width:150px">Item 1</label>
<select class="custom-select form-control" style="display:inline-block;width:200px">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
<form>
<label style="display:inline-block; width:150px">Description Item 1</label>
<select class="custom-select form-control" style="display:inline-block;width:200px">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
</li>
</ul>
</div>
</div>
</div>
What I did:
Moved the Span inside the form, changed it to Label, added some inline style to Label and to Select, fixing the width and making it become inline aligned
hi i think i understand what you want, check this.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
</head>
<body>
<div class="container py-5">
<div class="row">
<div class="col-sm-4">
<div>item 0</div>
<div>description item 0</div>
</div>
<div class="col-sm-4">
<div>
<select name="" id="">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div>
<select name="" id="">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</div>
<div class="row ">
<div class="col-sm-4">
<div>item 1</div>
<div>description item 1</div>
</div>
<div class="col-sm-4">
<div>
<select name="" id="">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div>
<select name="" id="">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div>item 2</div>
<div>description item 2</div>
</div>
<div class="col-sm-4">
<div>
<select name="" id="">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div>
<select name="" id="">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</div>
</div>
</body>
</html>
so bootstrap divide your screen into 12 columns, when you say <div class="col-sm-4"></div> this means you are giving 4 columns out of 12 to this div.
The bootstrap 2 html codes:
<div class="control-group required">
<label class="control-label">Identifiers</label>
<div class="controls">
<span>
<div class="multiple-inputs">
<div id="id5e">
<div id="0NtcA_0" class="">
<select class="medium" name="id="id52">
<option selected="selected" value="0">Callsign</option>
<option value="1">EIDR</option>
<option value="2">InternalAssetURI</option>
<option value="3">MasterSourceID</option>
<option value="4">PAID</option>
<option value="5">Other</option>
<option value="6">ROVI</option>
<option value="7">TMS</option>
<option value="8">URI</option>
</select> <input type="text" value="SC001" id="id5f" class="input-xlarge" data-original-title="">
<a class="btn btn-delete btn-mini" id="id53" href="#"><i class="icon-remove"></i> Remove</a>
</div>
<div id="0NtcA_1" class="">
<select class="medium" name="" id="id54">
<option selected="selected" value="">Choose One</option>
<option value="0">Callsign</option>
<option value="1">EIDR</option>
<option value="2">InternalAssetURI</option>
<option value="3">MasterSourceID</option>
<option value="4">PAID</option>
<option value="5">Other</option>
<option value="6">ROVI</option>
<option value="7">TMS</option>
<option value="8">URI</option>
</select> <input type="text" value="" name="" id="id60" class="input-xlarge" data-original-title="">
<a class="btn btn-delete btn-mini" id="id55" href="#"><i class="icon-remove"></i> Remove</a>
</div>
</div>
<a class="btn btn-mini" id="id56" href="#"><i class="icon-plus"></i> Add</a>
</div>
</span>
</div>
For class "controls" have been removed from bootstrap 3, how can the layout be achieved in bootstrap3?
For I could not post image for the short of reputation, the layout of the above is like:
Identifiers | Select DropDown box1 | | Text Box 01 | | Remove Button |
| Select DropDown box2 | | Text Box 02 | | Remove Button |
| Select DropDown box3 | | Text Box 03 | | Remove Button |
| Add Button |
Id split your divs up into the new bootstrap 3 layout format...
<div class="row">
<div class="col-sm-6">
//options
//options
//options
//select
</div>
<div class="col-sm-6">
//options
//options
//options
//select
</div>
</div>
basically you divide your rows into 12 sections.... you can use two divs that are 6 and 6... 4 divs set at 3... 3x4=12.. any number that equals up to 12... The sm at class="col-_-#" is important as well.. Please review this documentation to see examples and explanations.
Migrating bootstrap from BS2 to BS3
Understanding Bootstrap 3 Grid System
Use this code :
<form class="form-inline" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Identifiers</label>
<div class="col-sm-10">
<span>
<div class="multiple-inputs">
<div id="id5e">
<div id="0NtcA_0" class="">
<select class="medium" name="id=" id52"="">
<option selected="selected" value="0">Callsign</option>
<option value="1">EIDR</option>
<option value="2">InternalAssetURI</option>
<option value="3">MasterSourceID</option>
<option value="4">PAID</option>
<option value="5">Other</option>
<option value="6">ROVI</option>
<option value="7">TMS</option>
<option value="8">URI</option>
</select> <input type="text" value="SC001" id="id5f" class="input-xlarge form-control" data-original-title="">
<a class="btn btn-delete btn-default btn-xs" id="id53" href="#"><i class="icon-remove"></i> Remove</a>
</div>
<div id="0NtcA_1" class="">
<select class="medium" name="" id="id54">
<option selected="selected" value="">Choose One</option>
<option value="0">Callsign</option>
<option value="1">EIDR</option>
<option value="2">InternalAssetURI</option>
<option value="3">MasterSourceID</option>
<option value="4">PAID</option>
<option value="5">Other</option>
<option value="6">ROVI</option>
<option value="7">TMS</option>
<option value="8">URI</option>
</select> <input type="text" value="" name="" id="id60" class="input-xlarge form-control" data-original-title="">
<a class="btn btn-delete btn-default btn-xs" id="id55" href="#"><i class="icon-remove"></i> Remove</a>
</div>
</div>
<a class="btn btn-default btn-xs" id="id56" href="#"><i class="icon-plus"></i> Add</a>
</div>
</span>
</div>
</div>
</div>
You can also use a online migration tool , http://code.divshot.com/bootstrap3_upgrader/ may it will help you.