I just switched to Bootstrap 3 and the Flat UI Framework and I am now trying to add 'select' element to my website with Bootstrapp Select but I am facing some issues.
The element has the correct style and respond properly when I click on it however if I click right below the select element it still changes the value of my input. Basically everything happens as if the dropdown was collapsed except I cant see it.
HTML:
<select id="tk_groupbundle_tgrouptype_currency" name="tk_groupbundle_tgrouptype[currency]" required="required">
<option value="1">Euro</option>
<option value="2">US Dollar</option>
<option value="3">British Pound</option>
<option value="4">Indian Rupee</option>
<option value="5">Australian Dollar</option>
<option value="6">Canadian Dollar</option>
<option value="7">Swiss Franc</option>
<option value="8">Chinese Yuan Renminbi</option>
</select>
JS:
$("select").selectpicker({style: 'btn', menuStyle: 'dropdown-inverse'});
CSS:
nothing except:
<link href="/web/flat-ui/css/flat-ui.css" rel="stylesheet" media="screen">
<link href="/web/bootstrap/css/bootstrap-select.min.css" rel="stylesheet">
There is a file named "template.html" in the downloaded Flat UI package. Put your markup there in the file and everything should go smooth. I think you have some missing .js include files.
Also your Flat-UI .css file must come after bootstrap .css file.
You can upgrade to Flat-UI-Pro-1.2.5. I was having the same issue but as soon as I upgraded it fixed it. Seems as if there was a bug.
Related
I created a simple table to form my menu bar some of which will just go to another page and that works fine. I wanted to create a simple drop down select and option to go to specific pages but cant seem to get the value= to go to the page, ie: I
Corinthians selects I Corinthians but does not go to the page. .... im missing something !
<td bgcolor="#ffffcc" align="center" valign="top">Bible
Studies<br>
<div title="Please ck back for these important topics, It
will be worth the effort !"><font color="#6666cc"
size="-2">
<select onchange="window.location.href=this.value">
<option value="" selected="selected">Select Here</option>
<option value="/b_studies/1corin/1corin_panes.html">I
Corinthians </option>
<option value="">Coming Soon</option>
</select>
Is it possible to make all select dropdowns native for IOS and Android ?
because currently the selection under IOS 13 with materializecss does not work properly.
Cordially
1. Use .browser-default
You can add the class browser-default to get the browser default.
https://materializecss.com/select.html
<select class="browser-default">
<option value="" disabled="" selected="">Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
2. There is a temporary workaround
Serving the below patched select.js file after materialize.js is working for most users.
https://github.com/Dogfalo/materialize/blob/v1-dev/js/select.js
The issue is caused by the transform animation of the dropdown container.
I created a package that fixes this and other common known materialize-css issues materialize-css-helper. The fix in a package is similar to what #gepex suggested, but also adds passive listener option to not decrease scrolling performance.
Also you could try just removing animation from dropdown container:
.dropdown-content {
transform: none !important;
}
Solution here
$(document).click(function(){
$('li[id^="select-options"]').on('touchend', function (e) {
e.stopPropagation();
});
});
I have jquery mobile html file with two pages.
<div data-role="page" id="page1"></div>
</div><div data-role="page" id="page2"></div>
I want to use the jquery mobile flip toggle switch to load either of the pages,
<select name="flip-1" id="flip-1" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
cant seem to get the function to function?
(I'm very newer to the functions behind jquery mobile/javascript)
I modeled after: http://jsfiddle.net/V7xeD/ to no success
EDIT:
I have figured out what my problem was for this perticular issue.
SOLUTION: For this perticular issue I had permission issues. Since I copied the chosen and select2 project folders straight into my application apparently the permissions were incorrect. The solution is either creating the plugin files within your project while developing, or doing a 'chmod 0755 -R select2/' in terminal given you're using a *nix machine. That was it. It wasn't any conflict issues between chosen and select2 or anything like that.
Original post:
I'm trying to create a clean Multi-Value Select Box using Select2.
I've tried both Select2 and Chosen.js and the results are the same.
The box doesn't display correctly. It displays an old style ugly multi select box like if there wasn't any javascript involved.
Here is an image showing how it displays: http://d.pr/i/bUa5
What I'm trying to get is a multi select box like the one in this forum.
Hope someone can help?
Here is my test code:
<!doctype html>
<head>
<title>Select2 Example</title>
<link href="select2.css" rel="stylesheet"/>
<link rel="stylesheet" href="chosen/chosen.css">
</head>
<body>
<form>
<select id="e1" multible>
<option value="AL">Alabama</option>
<option value="AR">Arizona</option>
<option value="CA">California</option>
<option value="WS">Wisconsin</option>
<option value="NY">New York</option>
<option value="TX">Texas</option>
<option value="OR">Orlando</option>
</select>
<select id="chzn-select" data-placeholder="Choose a country..." style="width:350px;" multiple class="chzn-select" tabindex="4">
<option value="AL">Alabama</option>
<option value="AR">Arizona</option>
<option value="CA">California</option>
<option value="WS">Wisconsin</option>
<option value="NY">New York</option>
<option value="TX">Texas</option>
<option value="OR">Orlando</option>
</select>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="select2.js"></script>
<script src="chosen/chosen.jquery.js"></script>
<script>
$(".chzn-select").chosen();
$(document).ready(function() { $("#e1").select2(function() {
placeholder: "Select State"
}); });
</script>
</body>
I've had loads of trouble with this, but managed to get it working.
Differences between my code and yours:
My document ready function is in my head, not my body, also i had just $("#e1").select2(); No inner function.
Have you tried when running in a browser, right clicking and choosing view source and opening up your .js and .css files to make sure they are visible to your html?
Lastly for the select2 you have put multible instead of multiple
I binned chosen as i couldnt get it to work, but select 2 is built on it, so i'd go for that. Also as they are built on one another this could be causing some conflict, so i'd get rid of chosen and try that.
Hope this helps
ps: I have implemented it this way, but now when i remove options from the multiple select, they are gone from my drop down choice and cannot be re-added. The examples for this are not very straight forward, wish there were some simple examples for this useful add on!
I have created a Simple HTML page with a label and a Select tag field. Code for the same is as follows:
<html>
<head></head>
<body>
<label>Interval</label>
<select name="interval" id="Interval">
<option value="1hr">1 hour</option>
<option value="2hr">2 hour</option>
<option value="1dy">1 day</option>
<option value="2dy">2 day</option>
</select>
</body>
</html>
Now as I run this HTML page on iPhone, iPod (iOS), on click of the drop list, the size of the label (instead whole HTML page gets broader, gets increased).
I am unable to understand the problem.
Any help is appreciated.
This is a known bug in iOS4. It stays zoomed in after selection. iOS5 supposedly has this fixed.