I'm using Twitter Bootstrap for my frontend. I need a select input component that has only images as options. I can only find such a component with JQuery UI, which is not part of Bootstrap. Is there any component like this for Boostrap?
The Bootstrap-select component has a data-content attribute that you can use. See this example:
$(function() {
$('.selectpicker').selectpicker();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://silviomoreto.github.io/bootstrap-select/css/base.css" rel="stylesheet"/>
<link href="https://silviomoreto.github.io/bootstrap-select/dist/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://silviomoreto.github.io/bootstrap-select/dist/js/bootstrap-select.min.js">
<script src="https://silviomoreto.github.io/bootstrap-select/js/base.js"></script>
<select class="selectpicker">
<option data-content='<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Gota07.svg/120px-Gota07.svg.png">'>Teardrop</option>
<option data-content='<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Emblem-club.svg/120px-Emblem-club.svg.png">'>Club</option>
<option data-content='<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Emblem-spade.svg/120px-Emblem-spade.svg.png">'>Spade</option>
<option data-content='<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Luneta07.svg/120px-Luneta07.svg.png">'>Moon</option>
<option data-content='<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Emblem-important-black.svg/120px-Emblem-important-black.svg.png">'>Exclamation</option>
</select>
<p style="padding-bottom: 100px"></p>
Related
Hi I have a disabled select and I would like to be able to drag it. Even a fake select would be great as long as it looks like a select.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title>jQuery UI Droppable - Default functionality</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"> </script>
<script>
$( function() {
$( ".draggable" ).draggable();
} );
</script>
</head>
<body>
<div class="ui-widget-content draggable">
<select disabled>
<option value="">Cannot be dragged</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div>
<span class="ui-widget-content draggable">Can be dragged </span>
</div>
</body>
</html>
The primary issue is bubbling of the Click event. The disabled Select element is causing the Click event to never reach the parent element.
To address this, your wrapper needs to have some white space for the User to be able to click the Div so they can drag it.
Working Example:
$(function() {
$(".draggable").draggable();
});
.draggable {
padding: 7px;
display: inline-block;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<div class="ui-widget">
<div class="ui-widget-content draggable">
<select disabled>
<option value="">Cannot be dragged</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div>
<span class="ui-widget-content draggable">Can be dragged </span>
</div>
</div>
Also, if you're using jQuery Theming, you need to wrap ui-widget-content inside a ui-widget for proper activation.
I would advise using a Handle if possible:
<span class="ui-icon ui-icon-grip-dotted-vertical"></span>
With:
$(".draggable").draggable({
handle: ".ui-icon-grip-dotted-vertical"
});
I could not find a javascript solution. Using css I created a div and set the position to absolute and use it to cover the select. Instead of the click being swallowed by the select it is accepted by the div.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title>jQuery UI Droppable - Default functionality</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"> </script>
<script>
$( function() {
$( ".draggable" ).draggable();
} );
</script>
<style>
.draggable
{
display: inline-block;
}
.draggable-input-workaround
{
background-color:transparent;
width:100%;
height:100%;
position:absolute;
}
</style>
</head>
<body>
<div class="ui-widget-content draggable" style="border-style:solid" >
<div class='draggable-input-workaround'>
</div>
<select disabled>
<option value="">Cannot be dragged</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div>
<span class="ui-widget-content draggable">Can be dragged </span>
</div>
</body>
</html>
Scenario :
I cannot make my asp:DropDownList style correctly.
It works perfectly but it doesn't match the rest of the form. Specifically, the rest of the form has a smaller footprint, no background, and a border.
Todo :
We want dropdowns with a border and white background (like those found on bootstraps form page) (I am sorry - I can't post images yet).
Tried Case :
To debug, I made a naked page with only a dropdown and a text box to compare to. Here is that code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="stylesheet" href="css/bootstrap.css">
<link href="css/bootstrap-select.css" rel="stylesheet" />
<link rel="stylesheet" href="css/style.css">
<link type="text/css" href="css/jquery-ui.min.css" rel="stylesheet" />
<link type="text/css" href="css/jquery-ui.structure.min.css" rel="stylesheet" />
<link type="text/css" href="css/jquery-ui.theme.min.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div class="col-5">
<asp:TextBox runat="server" id="notmuch0" CssClass="form-control"></asp:TextBox>
<asp:DropDownList ID="DropDownList1" CssClass="form-control-sm" runat="server"><asp:ListItem>1</asp:ListItem></asp:DropDownList>
</div>
</form>
<!-- Javascript-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap-select.js"></script>
<script src="js/core.min.js"></script>
<script src="js/script.js"></script>
<script src="js/popper.min.js"></script>
</body>
</html>
When we run the code, it creates the following mess for the drop down:
<div class="col-5">
<input name="notmuch0" type="text" id="notmuch0" class="form-control">
<select name="DropDownList1" id="DropDownList1" class="form-control-sm select2-hidden-accessible" tabindex="-1" aria-hidden="true">
<option value="1">1</option>
</select><span class="select2 select2-container select2-container--bootstrap select2-container--below" dir="ltr" style="width: 48px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-DropDownList1-container"><span class="select2-selection__rendered" id="select2-DropDownList1-container" title="1">1</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
</div>
And it looks the wrong way still (no border, still a background)
I have tried working with the bootstrap selectpicker - but it seems that .net ignores EVERYTHING we do to change the class.
I have about 4 hours of research into this - and still nothing Can you help please? Will try anything.
Please suggest. Thank you.
Try remove jquery-ui.
Only use bootstrap.
JSFiddle: https://jsfiddle.net/va4p7b7e/
I am using bootstrap with jquery chosen from (https://harvesthq.github.io/chosen/
to modify the select input to allow for a more user friendly interface. But whenever I add a select input type in the second column, it adds padding or margin(?) to the first column (as seen by the blue background in the above JSFiddle).
Anyone know why the green background from the first column doesn't fully cover the first column? It should but it doesn't. If I remove the select and button from the second column, everything seems fine.
I can modify the css of the first column by adding padding to the column but that makes it non-responsive since if I resize the browser, it changes how much padding is needed.
Code:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.min.css">
</head>
<body>
<div class="container">
<div class="row" style="background-color: blue;">
<div class="col-xs-5" style="background-color: green;">
<select data-placeholder="Choose a genre..." class="chosen-select" style="width:100px;">
<option value=""></option>
</select>
</div>
<div class="col-xs-7" style="background-color: purple;">
<select data-placeholder="Choose a genre..." multiple="true" class="chosen-select" style="width:200px;">
<option value=""></option>
</select>
<button type="button" class="btn btn-primary">Add</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.min.js"></script>
<script>
jQuery(".chosen-select").chosen(); <!-- Activate Chosen -->
</script>
</body>
</html>
Try using flex, give display: flex to parent and flex: 5; flex: 7; to child columns
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.min.css">
</head>
<body>
<div class="container">
<div class="row" style="background-color: blue; display: flex;">
<div class="col-xs-5" style="background-color: green; flex: 5;">
<select data-placeholder="Choose a genre..." class="chosen-select" style="width:100px;">
<option value=""></option>
</select>
</div>
<div class="col-xs-7" style="background-color: purple; flex: 7;">
<select data-placeholder="Choose a genre..." multiple="true" class="chosen-select" style="width:200px;">
<option value=""></option>
</select>
<button type="button" class="btn btn-primary">Add</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.min.js"></script>
<script>
jQuery(".chosen-select").chosen(); <!-- Activate Chosen -->
</script>
</body>
</html>
<div class="row" style="background-color: blue; line-height:35px;">
<div class="col-xs-5" style="background-color: green;">
<select data-placeholder="Choose a genre..." class="chosen-select" style="width:100px;">
<option value=""></option>
</select>
</div>
Add Line height to define a background then its render proper.
I have been using bootstrap multiselect in my web app for about 9 months now. I've been styling the width of the dropdown to be 100% like this:
ul.multiselect-container {
width: 100% !important;
}
.dropdown-menu {width:100% !important;}
I just got the new version because it had an extra configuration option (onDeselectAll). Now the dropdown width is not 100%. Looking at the styling in the elements console it looks like my css should still work:
We can see in the photo of the css that .dropdown-menu {width:100% !important} is being overridden but I'm not sure what by.
Any ideas?
I used the buttonWidth parameter that .multiselect gives you similar to David Stutz. However, I put the '100%' right in the parameter.
<body>
<select id="multiselect" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<script type="text/javascript">
$(document).ready(function() {
$('#multiselect').multiselect({
buttonWidth: '100%'
});
//caret is in the middle, switch it to right
$(".caret").css('float', 'right');
$(".caret").css('margin', '8px 0');
});
</script>
</body>
The below minimal example is working fine, so Bootstrap Multiselect is not override the styling. But note that in your case .dropdown-menu and .multiselect-container refer to the very same elements (the ul, like in the example below. So applying the styling to both classes, like you did is not necessary and may cause what you see in the inspector.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
$('#multiselect').multiselect({
buttonWidth: '400px'
});
});
</script>
<style type="text/css">
.multiselect-container {
width: 100% !important;
}
</style>
</head>
<body>
<select id="multiselect" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</body>
</html>
I tried setup buttonWidth and .multiselect-container but it did not work for me.
This is my way to set select tag to 100% within form-group class, it may help someone.
.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){
width:100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.9/css/bootstrap-select.css" />
<style>
.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){
width:100%;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<label for="tags">Select tags list</label>
<div class="form-group">
<select class="selectpicker input-large" multiple data-live-search="true">
<option>COAL_5CD-PT07</option>
<option>COAL_5CD-PT08</option>
<option>COAL_5CD-PT09</option>
<option>LNG_TI37130</option>
<option>LNG_TI37230</option>
<option>CCP_AB1HAD45CP900_ZQ01</option>
</select>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.9/js/bootstrap-select.min.js"></script>
<script>
$(document).ready(function () {
$('select').selectpicker();
});
</script>
</body>
</html>
I'm using Twitter bootstrap's bootstrap.min.css for styling my phonegap app. But I do not see the desired UI of DOM elements affected by bootstrap. For example, in Base CSS it is shown that btn btn-primary classed button is colored blue and has some gradient on it. Looks nice. But this thing looks so ugly gray colored if I run this on emulator. Why is that so? Isn't bootstrap good for phonegap?
ADDING CODE AND SCREENSHOT
<!DOCTYPE HTML>
<html>
<head>
<title>Call the cab</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/custom.css" type="text/css">
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/heartcode.js"></script>
<script type="text/javascript" charset="utf-8" src="js/cordova-2.0.0.js"></script>
</head>
<body onload="onLoad();initialize()">
<div id="wrapper" class="container row-fluid ">
<div id="headerdiv" class="span12">
<header style="vertical-align:middle;">
<h1>App Name</h1>
</header>
</div><!--End of header-->
<div id="inputs" class="row-fluid">
<form action="file:///android_asset/www/pickup.html" onsubmit="return saveInputs()" class="form-inline form-actions">
<input type="text" id="pickup" onblur="unlockDestiny();codeAddress(this.value)" class="input-block-level"/>
<input type="text" id="destiny" onblur="codeAddress(this.value)" class="input-block-level"/>
<label class="checkbox">
<input type="checkbox" value="">
Remember this
</label>
<button type="submit" class="btn btn-primary">Save changes</button>
</form>
</div><!--End of inputs-->
</div><!--End of wrapper-->
</body>
</html>
Have you double checked that the path to the CSS files is correct, and that there's nothing in css/custom.css that is overriding the Bootstrap button styling?