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"/>
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();
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 am trying to do select an option in a select element. I tried the following code. But it does not work.
<select>
<option value="1" #(ViewBag.dt.Rows[0][1].ToString())=="1"? selected>A</option>
<option value="2" #(ViewBag.dt.Rows[0][1].ToString())=="2"? selected>B</option>
<option value="3" #(ViewBag.dt.Rows[0][1].ToString())=="3"? selected>C</option>
</select>
Any help?
Thank you.
Your conditional operators appear incomplete (invalid code).
Did you mean:
<option value="1" #(ViewBag.dt.Rows[0][1].ToString() == "1" ? "selected" : "")>A</option>
I would normally suggest switching to #Html.RadioButtonFor but that will not handle a two-dimensional array references. Are you display multiple items in a loop? You may be able to simplify the whole thing (please show the rest of your page/code).
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
I have a multiselect form control (fig. 1). When I select more than 1 value, Firefox sends both values (fig. 2). But only the last value gets sent as a input value to my controller (fig. 3). How do I get all those values passed on to my controller?
<form action="html_items/search" method="post" >
<!-- Criteria -->
<div style="float:none;">
<label>Content Provider </label>
<select multiple id="content_provider" name="content_provider">
<option value="FLR">Flare</option>
<option value="SLDT">Slashdot</option>
</select>
</div>
<input type="submit" value="Search" />
</form>
fig. 1
Parametersapplication/x-www-form-urlencoded
content_provider FLR
content_provider SLDT
fig. 2
PARAMs[{"content_provider"=>"SLDT", "controller"=>"html_items", "action"=>"search"}]
...
fig. 3
Thanks
Tim
The first thing is that if you want to create an array of the elements that are selected you need to name your <select> something like <select name='foo[]'>
Next... If nothing is selected nothing will show up. This makes sense, but it stumped me for a bit. I was doing ajax where the left select was search results and the right was the completed list.
I just added a .click(function(){}); to my submit button to set every item on the left to selected with jQuery and the items showed up in the parameters as an array. In the below example you should see the first item show up.
<select multiple id="content_provider" name="content_provider">
<option value="FLR" selected>Flare</option>
<option value="SLDT">Slashdot</option>
</select>