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>
Related
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 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>
I'm new to working with jQuery mobile forms and CSS. I've build a jQuery Mobile form that is contained in a div and I'd like to be able to adjust the position of the form elements withing the , but am not having any luck so far. Below I have unsucessfully tried to align the "Submit" button with the bottom of the container using CSS. Can any one suggest a good way to do this?
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
/>
<style type="text/css">
#submitButton {
position: absolute;
bottom: 0%;
width: 50px;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header"></div>
<div data-role="content">
<div id="lr" style="height: 500px;">
<form action="forms-sample-response.php" method="get" style="background-color:green; height: 100%;">
<label for="select-choice-0" class="select">Select Label:</label>
<select name="select-choice-0" id="select-choice-0">
<option value="item1">Item 1</option>
<option value="item2">Item 2</option>
<option value="item3">Item 3</option>
<option value="item4">Item 4</option>
</select>
<div id="preview"></div>
<button type="button" data-theme="a"
name="Choose" value="submit-value">Choose</button>
<label for="textarea">Text Area Label:</label>
<textarea name="textarea" id="textarea-a"></textarea>
<button id="submitButton" class="ui-btn-top" type="button"
data-theme="a" name="Publish" value="Upload">Submit</button>
</div>
</form>
</div>
</div>
</div>
</body>
JQM alters the html and applies alot of classes to your original button. If you inspect the element you can see that it looks completely different. Instead of playing with what JQM created too much you can just wrap the button with another div and position that div. i.e.
<div id="submitBtnWrap">
<button id="submitButton" class="ui-btn-top" type="button" data-theme="a" name="Publish" value="Upload">Submit</button>
</div>
Then apply your css to the wrapper div.
#submitBtnWrap {
position: absolute;
bottom: 0%;
width: 50px;
}
Is it possible to have a textbox and a button horizontally using JQuery Mobile?
using data-inline="true" works for buttons but not when mixed with button and textbox.
data inline example
data-type="horizontal" also didn't work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css"/>
<script type="text/javascript">
$(document).ready(function(){
$("#clearMeClearMe").click(function(){
//$(this).hide();
$("#clearMe22").val("");
});
});
</script>
<body>
<div data-role="page">
<div data-role="header">
<h1>Textbox Clear Demo</h1>
</div><!-- /header -->
<div id="content">
<input type="text" id="clearMe22" data-inline="true" name="clearMe22"/>
<a href="#" data-role="button" data-icon="delete"
data-iconpos="notext" id="clearMeClearMe">Clear</a>
</div>
</div><!-- /page -->
</body>
</html>
Seems to work best for me when I float the button right and restrict the width of the text input:
<span>
<input style="width:90%;display:inline-block" type="text" id="clearMe22" data-inline="true" name="clearMe22" />
<a style="float:right" href="#" class="ui-input-clear" data-role="button" data-icon="delete"
data-iconpos="notext" id="clearMeClearMe">Clear</a>
</span>
http://jsfiddle.net/xeyyr/1/
But someone else might be able to provide a more elegant CSS solution.
I'm trying to find a similar solution for a custom button, but in your case I believe you can use the built-in methods for data clear ('data-clear-btn'). You can find this documented here:
http://jquerymobile.com/demos/1.3.0-rc.1/docs/demos/widgets/textinputs/
and would look like:
<input data-clear-btn="true" name="text-3" id="text-3" value="" type="text">