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>
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>
I have a time selector built with two input type="radio" inside of a div. When browser zoom, the radioS don't auto-size and . How could I get this autosize using CSS?
Pics of the problem:
My code is:
<div id="timePeriodSelector" style="font-size: 100%">
<form action="">
<input type="radio" id="timePeriodSelector_default" onclick="Dash.dateTypeSwitcher('default')">Effective Date
<input type="radio" id="timePeriodSelector_secondary" onclick="Dash.dateTypeSwitcher('secondary')">Billing Date
</form>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
#timePeriodSelector{
border: 1px dotted black;
}
</style>
<body>
<div id="timePeriodSelector" style="font-size: 100%">
<form action="">
<input type="radio" id="timePeriodSelector_default" onclick="Dash.dateTypeSwitcher('default')">Effective Date
<input type="radio" id="timePeriodSelector_secondary" onclick="Dash.dateTypeSwitcher('secondary')">Billing Date
</form>
</div>
</body>
</html>
It is work correctly in chrome
Hello I am using the has-error class on an input like so:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta input1="viewport" content="width=device-width, initial-scale=1">
<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/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form method="post">
<div class="col-lg-4 col-lg-offset-4 has-error">
<input type="text" name="input" class="form-control"/>
</div>
</form>
</body>
</html>
But I would like to increase the thickness of the red border, so I tried to add this:
<style>
.has-error{
line-height:3px;
}
</style>
But it has no effect, so is it possible to change the thickness of this class and how to do it ?
Thank you
line-height is not the property you want to change, try border-width. You also need to specify the class to .form-control, otherwise your style won't be applied.
.has-error .form-control{
border-width: 3px;
border-color: blue !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta input1="viewport" content="width=device-width, initial-scale=1">
<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/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form method="post">
<div class="col-lg-4 col-lg-offset-4 has-error">
<input type="text" name="input" class="form-control"/>
</div>
</form>
</body>
</html>
Hope it helps.
line-height has no relevance to border thickness - it sets the vertical size of each line of text inside the element. To set the thickness of a border, use the border-width property:
.has-error {
border-width: 3px;
}
Im trying to style a polymer component.
I have a html page with the following style:
<head>
<style is="custom-style">
paper-input {
--paper-input-container-focus-color: red;
}
</style>
</head>
More often than not once meteor has rendered the page the style tag is empty. I have seen it a few times where the input is styled as expected. Im using latest meteor with iron:router and Polymer 1.0.6. Any help appreciated or if there's another way to style the components..
Router.configure({
layoutTemplate: 'main'
});
Router
Router.route('/',function() {
this.layout('unauthenticated')
this.render('signin');
});
Layout
<template name="unauthenticated">
<body class="verticle layout">
<div class="page">
{{> yield}}
</div>
</body>
</template>
Template
<template name="signin">
<hgroup>
<h1>Sign In</h1>
<h3>Sign in with your Account</h3>
</hgroup>
<paper-material elevation="1">
<form>
<paper-input type="email" label="Email"></paper-input>
<paper-input type="password" label="Password"></paper-input>
</form>
</paper-material>
</template>
Imports
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="/components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="/components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="/components/paper-material/paper-material.html">
<link rel="import" href="/components/paper-input/paper-input.html">
</head>
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>