I know there are placeholders for selects in jQuery Mobile.
<select id="salutation" data-native-menu="false">
<option id="salPlac" data-placeholder="true" value="">Salutation</option>
<option value="Mr.">Mr.</option>
<option value="Ms.">Ms.</option>
<option value="Mrs.">Mrs.</option>
<option value="Dr.">Dr.</option>
<option value="Prof.">Prof.</option>
</select>
But are there similar placeholders for textareas and inputs when using jQuery Mobile?
Like this: (doesnt work)
<textarea type="input" class="regular" id="textBox" data-placeholder="true">Type in here</textarea>
I know they are available in HTML5, but I want to use jQuery Mobile if it's possible.
Thanks.
There is no attribute called "data-placeholder" available for text box and text area in jquery mobile. So you need to use the HTML5 placeholder attribute suggested by Omar.
Here is the link http://view.jquerymobile.com/1.3.1/dist/demos/#ui-page-top
Related
I've just integrated Materialize into my Rails project through the gem 'materialize-sass'. For some reason, the select inputs are showing two carets instead of 1.
The code for the select input is basically a fork of the example on their website.
<div class="input-field">
<select name="tutor_profile[dob_month]" id="tutor_profile_dob_month">
<option value="" disabled selected>Choose your month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<label>Birthday</label>
</div>
I've tried tweaking the CSS styling for the select button in the Developers Console with no success. There are no additional stylings to any of the elements within the select input.
Other CSS frameworks I'm using are bootstrap, bootstrap-tagsinput, twitter-typeahead, and jquery-ui. I was wondering if anyone has experience something similar.
Short answer:
Add this to your css
.caret {
border-color: transparent !important;
}
Long answer:
Bootstrap implements the caret using css borders (right, top, left),
and materializecss implements the caret using the text "▼" as the inner html of the element.
Forcing a transparent border will cause bootstrap's caret to disappear, and will solve your problem.
If you insist on using bootstrap's caret, you will have to edit materializecss's javascript files, which is not recommended.
I have exactly same problem.
The reason is we combining bootstrap and materializecss fm, if you unload one of them, works right.
But the solution for them work together, i dont know =(
This is not the best answer. But i did this with JQuery.
I read the html generated in the console, then i noticed that those arrows are in one $(".caret").hide() Try this!
Remove the previous span with "caret" class before executing material_select,
this will restart the select tag in materializecss:
$(".caret").remove();
$('select').material_select();
I'm trying to group a selectbox and textbox side by side by side using jquery mobile. They are currently displaying below each other. I've tried control group within jquery, but to no avail.
I want to do something like this http://demos.jquerymobile.com/1.3.2/widgets/forms/form-fieldcontain.html though with a select and drop, where this example shows a label and text box side by side.
Here is my current code. Any help appreciated.
<label style="margin-top:30px;background: #ffffff;">Mobile Number:</label>
<select name="mobilePrefix" id="mobilePrefix">
<option value="">Mobile Prefix</option>
<option value="082">082</option>
<option value="083">083</option>
<option value="085">085</option>
</select>
<input class="required" name="mobileno" id="mobileno" value="" data-clear-btn="true" type="tel"/>
is that possible to disable with knockout a jquery mobile select like this:
<select>
<option value="1">value1</option>
<option value="2">value2</option>
<option value="3">value3</option>
<option value="4">value4</option>
</select>
I tried something like this <select data-bind="attr: {disabled: 'disabled'}"> but doesnt work
You can do it with knockout.js only if select is a native one.
If it is styled with jQM then only way to disable it to use jQuery Mobile function like this:
$('select').selectmenu('disable');
or:
$('select').selectmenu('enable');
I'm using jquery ui controls, and jquery validation plugin.
let's say I want to add a required class on a combobox.
The element is dynamically generated with a generic code.
Where can I add the class ?
I just need to select the next brother with the proper classes:
$('#someSelect ~ .ui-autocomplete-input').addClass('bla');
You can add this html to your view. Or take out the script tags and add this to your js file for that page. In the case below I am adding two classes to the combobox.
This combo box:
<select id="cbCars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
This is the JQuery wrapped in a html script tag:
<script type="text/javascript">
$(function () {
$("#cbCars").addClass("ui-state-active ui-corner-top");
});
</script>
<select name="noofseats" data-native-menu="true">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4<option>
</select>
In the above code I'm not supposed to use data-native-menu , but, if I don't use it I'm unable to select the options on the android screen.
I'm using jquerymobile framework.
jquery mobile alpha4 uses native menus by default.
whatever the cost - update the jquery mobile version you use.
If the problem is that after an AJAX call you can't get options to display correctly - use .page() method.
Details here: http://jquerymobiledictionary.dyndns.org/faq.html