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();
Related
I've got a select menu that I've created with Thymeleaf. I need the menu to have no default choice. Usually this is done with a disabled extra option, and that I have done too. Now, the issue is that I just cannot get the selected attribute to render into the resulting HTML. This appears to break IE, which then defaults to the first non-disabled option. This is what I've got:
<select th:field="*{serviceName}" required="required" >
<option th:selected="true" th:disabled="true" th:value="NOT_SELECTED" th:text="'Pick one'"></option>
<option th:each="entry : ${form.services}"
th:value="${entry.key}" th:text="${entry.value}">
</option>
</select>
and it renders like this:
<select required="required" id="serviceTechnicalName" name="serviceTechnicalName">
<option disabled="disabled" value="NOT_SELECTED">Pick one</option>
<option value="SERVICE1">Service One</option>
<option value="SERVICE2">Service Two</option>
</select>
What am I doing wrong? I've been fiddling with different combinations of these different options for at least an hour already, it shouldn't be this difficult...
FWIW, this appears to be a duplicate question, but the answers there aren't doing it for me. There also isn't an accepted answer there.
Apparently, when using th:field it does not work. Look at this post.
However, I do not think you have to use th:selected as there is no processing in the server.
Have you tryied something like:
<select th:field="*{serviceName}" required="required" >
<option value="" selected="selected">Selecione</option>
<option th:each="entry : ${form.services}"
th:value="${entry.key}" th:text="${entry.value}">
</option>
</select>
Well, the forum post that Kimy82 suggested goes deep down into some Java configuration hole, so the solution did not appeal to me.
I then upgraded my Spring Boot from 1.3.3-RELEASE to 1.4.0-RELEASE. Then I spent a while trying to upgrade Thymeleaf from version 2 to version 3, but apparently could not get all the dependencies and excluded transitive dependencies right.
So in the end I did this:
<script type="text/javascript">
window.addEventListener('load', function () {
document.getElementById('serviceTechnicalName').value='NOT_SELECTED';
});
</script>
Now, it's not the answer I was looking for, but it does the job...
Trying to make product column width in Volusion span the entire screen for mobile and have products stack below. I am working out of this site: http://enpgp.fzsvf.servertrust.com/category-s/100.htm and you can see on mobile the products simple cram together as opposed to stacking.
You need to go to each category that you want to be responsive and select in the category display mode dropdown menu "Responsive Grid".
If that option for some reason is not shown you can force the category into "responsive mode" by changing one of the options in the "Product Display Mode" to "7" and then select it and click the save button. You would do that with Firebug. You could also import a "7" into "Product Display Mode" for that category via the API.
<select name="Category_DisplayMode" onblur="ProcessFieldUsage(this);" onkeyup="ShowSave()" onchange="ShowSave()">
<option value="">Select</option>
<option value="1">Single Rows</option>
<option value="2">Grid</option>
<option value="4">Checkboxes</option>
<option value="5">List</option>
<option value="6">Lightweight Grid</option>
</select>
Shown after the modification
<select name="Category_DisplayMode" onblur="ProcessFieldUsage(this);" onkeyup="ShowSave()" onchange="ShowSave()">
<option value="">Select</option>
<option value="1">Single Rows</option>
<option value="2">Grid</option>
<option value="4">Checkboxes</option>
<option value="5">List</option>
<option value="7">Lightweight Grid</option>
</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"/>
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
<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