zurb foundation error class not rendering correctly - ruby-on-rails

im using foundation 3, and have set the class of custom on my form, though the issue im having is with the select dropdowns and error class not working the way it should.
what i am hoping for is that i can have the widths of the select boxes to be set to the same column width as the error messages as to make the view looked polished
<div class="four columns">
<select class="four columns" id="event_location_id" name="event[location_id]" style="display: none; "><option value="">None</option>
<option value="8">APK</option>
<option value="10">BAL</option>
<option value="11">BANK</option>
<option value="12">BANY</option>
<option value="13">BEN1</option>
<option value="14">BEN2</option>
<option value="15">BER</option>
<option value="16">BRU</option>
<option value="17">BTN</option>
<option value="18">CAM</option>
<option value="19">CAUL-Ind</option>
<option value="20">CER</option>
<option value="22">DAN</option>
<option value="23">DON</option>
<option value="24">DRO</option>
<option value="25">ELG</option>
<option value="26">ELT</option>
<option value="27">ES1</option>
<option value="28">ES2</option>
<option value="29">F-1</option>
<option value="30">F-2</option>
<option value="31">FP</option>
<option value="32">GEL</option>
<option value="33">GRN</option>
<option value="34">GRN-2</option>
<option value="35">H-1</option>
<option value="36">H-2</option>
<option value="37">HAL-1</option>
<option value="38">HAL-2</option>
<option value="39">HHF (prev WAV)</option>
<option value="40">HUN</option>
<option value="41">KNG</option>
<option value="42">KNX</option>
<option value="43">LAT</option>
<option value="45">MEL</option>
<option value="46">MGV</option>
<option value="47">MHS</option>
<option value="48">MNT</option>
<option value="49">MON</option>
<option value="50">MON-Ind</option>
<option value="51">MUH</option>
<option value="52">PCK</option>
<option value="53">PEGS</option>
<option value="54">PHC</option>
<option value="55">PSF</option>
<option value="56">RMIT</option>
<option value="57">S-1</option>
<option value="58">S-2</option>
<option value="59">S.N.H.C.</option>
<option value="60">SHP</option>
<option value="61">SKW</option>
<option value="62">STB</option>
<option value="63">T.B.A.</option>
<option value="64">TRI</option>
<option value="65">WARN</option>
<option value="66">WER</option>
<option value="67">WGS</option>
<option value="68">WGW</option>
<option value="69">WHF</option>
<option value="71">YAR</option>
<option value="72">YVG</option>
<option value="21">CHU</option>
<option value="70">WOD</option>
<option value="73">Test</option>
<option value="9">ASH</option>
<option value="7">ALT</option>
<option value="44">MBN</option></select><div class="custom dropdown" style="width: 155px; ">None<ul style="width: 155px; "><li class="selected">None</li><li>APK</li><li>BAL</li><li>BANK</li><li>BANY</li><li>BEN1</li><li>BEN2</li><li>BER</li><li>BRU</li><li>BTN</li><li>CAM</li><li>CAUL-Ind</li><li>CER</li><li>DAN</li><li>DON</li><li>DRO</li><li>ELG</li><li>ELT</li><li>ES1</li><li>ES2</li><li>F-1</li><li>F-2</li><li>FP</li><li>GEL</li><li>GRN</li><li>GRN-2</li><li>H-1</li><li>H-2</li><li>HAL-1</li><li>HAL-2</li><li>HHF (prev WAV)</li><li>HUN</li><li>KNG</li><li>KNX</li><li>LAT</li><li>MEL</li><li>MGV</li><li>MHS</li><li>MNT</li><li>MON</li><li>MON-Ind</li><li>MUH</li><li>PCK</li><li>PEGS</li><li>PHC</li><li>PSF</li><li>RMIT</li><li>S-1</li><li>S-2</li><li>S.N.H.C.</li><li>SHP</li><li>SKW</li><li>STB</li><li>T.B.A.</li><li>TRI</li><li>WARN</li><li>WER</li><li>WGS</li><li>WGW</li><li>WHF</li><li>YAR</li><li>YVG</li><li>CHU</li><li>WOD</li><li>Test</li><li>ASH</li><li>ALT</li><li>MBN</li></ul></div><small for="event_location_id" class="error">can't be blank</small>
</div>

This is a reported bug (and apparently fixed 6 days ago.)
In the meantime, you can easily fix it with two lines of CSS:
.custom.dropdown {
width: 100% !important; /* fixes width issue */
}
.custom.dropdown + .error {
margin-top: -9px; /* fixes overlapping */
}
You can see it in action here.

Related

How to add addional 0 to select_month option in rails

heres the code
<%= select_month nil, {use_two_digit_numbers: true}, {:name => 'expMonth', class: "form-control" } %>
and the results
<select class="form-control" id="date_month" name="expMonth">
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
if you can see the value of the options has no "0" i want to add 0 like 01, 02 and soon except 10 to 12 which already a double digit. see example below
<select class="form-control" id="date_month" name="expMonth">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
I'd say you're better off with using something like
select_tag 'date_month', options_for_select((1..12).collect{ |i| "%02d" % i })

How to write a form including CheckBox, radio buttons and selected option value in ROR.?

Please help me to convert my total HTML form into ROR format form and give some idea about retrive all selected values into controller page.
My HTML form:
<%= form_for #student,:url => {:action => "stdrecord"} do |f| %>
<tr>
<td>DATE OF BIRTH</td>
<td>
<select name="Birthday_day" id="Birthday_Day">
<option value="-1">Day:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select id="Birthday_Month" name="Birthday_Month">
<option value="-1">Month:</option>
<option value="January">Jan</option>
<option value="February">Feb</option>
<option value="March">Mar</option>
<option value="April">Apr</option>
<option value="May">May</option>
<option value="June">Jun</option>
<option value="July">Jul</option>
<option value="August">Aug</option>
<option value="September">Sep</option>
<option value="October">Oct</option>
<option value="November">Nov</option>
<option value="December">Dec</option>
</select>
<select name="Birthday_Year" id="Birthday_Year">
<option value="-1">Year:</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
</select>
</td>
</tr>
<tr>
<td>GENDER</td>
<td>
Male <input type="radio" name="Gender" value="Male" />
Female <input type="radio" name="Gender" value="Female" />
</td>
</tr>
<tr>
<td>HOBBIES <br /><br /><br /></td>
<td>
Drawing
<input type="checkbox" name="Hobby_Drawing" value="Drawing" />
Singing
<input type="checkbox" name="Hobby_Singing" value="Singing" />
Dancing
<input type="checkbox" name="Hobby_Dancing" value="Dancing" />
Sketching
<input type="checkbox" name="Hobby_Cooking" value="Cooking" />
<br />
Others
<input type="checkbox" name="Hobby_Other" value="Other">
<input type="text" name="Other_Hobby" maxlength="30" />
</td>
</tr>
<%= f.submit "submit" %>
<% end %>
Please help me to acess all desired value while selected inside the controller page inside the create method.I am using rails-4 and ruby 1.9.3.Thanks in advance.
There's a great tutorial on ruby-on-rails guides, even making a project from scratch. You can see the first reference in your comments I'll duplicate it http://guides.rubyonrails.org/form_helpers.html, 2 check get started with rails, it has many good things and it's all described http://guides.rubyonrails.org/getting_started.html.
I think this should work for you:
<input type="text" name="student[Other_Hobby]" maxlength="30" />
<input type="checkbox" name="student[Hobby_Drawing]" value="Drawing" />
<select name="student[Birthday_day]" id="Birthday_Day">
<option value="-1">Day:</option>
<option value="1">1</option>
<option value="2">2</option>
</select>

how can i set a select menu in jquery mobile to the local storage?

I have a select menu in jquery mobile and I want to set it to the local storage and then later to get the values from it. This is so if a user selects a car it will be able to delete the car from the list?
Does anyone know how to accomplish this?
<div data-role="fieldcontain">
<label for="select1">Choose a car to rent:</label>
<select name="select1" id="select1" onchange="selectvalue(this.value);">
<option value="97-113-13">Avenger </option>
<option value="97-225-13">Caravan </option>
<option value="97-112-13">Focus </option>
<option value="97-119-13">Escape</option>
<option value="97-226-13">E 350</option>
<option value="97-227-13">Mustang</option>
<option value=" 97-118-13">Wrangler</option>
<option value="97-223-13">Grand Cherokee</option>
<option value="97-111-13">Picanto</option>
<option value="97-114-13">Galant</option>
<option value="97-115-13">Altima</option>
<option value="97-116-13">Juke</option>
<option value="97-222-13">Corolla</option>
</select>
</div>
DEMO
<div data-role="fieldcontain">
<label for="selCar">Select car:</label>
<select name="selCar" id="selCar">
<option value="97-113-13">Avenger</option>
<option value="97-225-13">Caravan</option>
<option value="97-112-13">Focus</option>
<option value="97-119-13">Escape</option>
<option value="97-226-13">E 350</option>
<option value="97-227-13">Mustang</option>
<option value=" 97-118-13">Wrangler</option>
<option value="97-223-13">Grand Cherokee</option>
<option value="97-111-13">Picanto</option>
<option value="97-114-13">Galant</option>
<option value="97-115-13">Altima</option>
<option value="97-116-13">Juke</option>
<option value="97-222-13">Corolla</option>
</select>
</div>
Each time you submit the form, get the currently selected value from the select menu and save it to localStorage. Each time the page is created, read the value from localStorage and then remove it from the options list:
$(document).on("pagecreate", "#page1", function(){
RemovePreviouslySelected();
$("#btnSubmit").on("click", function(){
var selVal = $("#selCar").val();
localStorage.setItem("selectedCar", selVal);
});
});
function RemovePreviouslySelected(){
var prev = localStorage.getItem("selectedCar");
if (prev){
$("#selCar option").each(function(index){
if ($(this).prop("value") == prev){
$(this).remove();
return;
}
});
}
}

Unable to scroll select options in modal dialog (Chrome)

I have a form within a dialog that has a large number of select option elements. This works fine in IE and FF, but in Chrome, I am unable to scroll through the options. I can select them by selecting an option, then after the options collapse back down, use the arrow keys to go through the list. I am using Chrome Version 32.0.1700.76 and jQuery 1.9.1. I did attempt it using 1.10.2 as well and it did not fix the problem. My fiddle example uses 1.9.1 because selecting 1.10.2 did not allow be to include jQuery UI 1.9.2. You can even see in fiddle that the framework select input is not scrollable. Thanks.
http://jsfiddle.net/4mH8a/19/
HTML:
<form>
<input type="button" value="Open Modal" onclick="$('#divSelect').dialog('open');" />
</form>
<div id="divSelect" style="display:none">
<form>
<select name="lotsofoptions">
<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>
<option value="7">option 7</option>
<option value="8">option 8</option>
<option value="9">option 9</option>
<option value="10">option 10</option>
<option value="11">option 11</option>
<option value="12">option 12</option>
<option value="13">option 13</option>
<option value="14">option 14</option>
<option value="15">option 15</option>
<option value="16">option 16</option>
<option value="17">option 17</option>
<option value="18">option 18</option>
<option value="19">option 19</option>
<option value="20">option 20</option>
<option value="21">option 21</option>
<option value="22">option 22</option>
<option value="23">option 23</option>
<option value="24">option 24</option>
<option value="25">option 25</option>
<option value="26">option 26</option>
<option value="27">option 27</option>
<option value="28">option 28</option>
<option value="29">option 29</option>
<option value="30">option 30</option>
</select>
</form>
</div>
JS:
$(document).ready(function(){
// Modal dialogs
$('#divSelect').dialog( { autoOpen:false,
modal: true,
title: 'Unable to scroll',
open: function (event, ui) { window.setTimeout(function () {
jQuery(document).unbind('mousedown.dialog-overlay').unbind('mouseup.dialog-overlay'); }, 100);
}
} );
});

Proper way to use Select tags with POST in Rails?

I'm building a rails app right now where a user will select a date with the form below and press the Submit button.
Three questions:
1) What is the correct way to get this to post to my DB?
2) Does my submit button need to be inside of my form tag?
3) How do I generate a scaffold to take these fields correctly?
Thanks in advance for the help. I really do appreciate this wonderful community and look forward to giving back one day when I'm more adept.
<div id="dateFields">
<form accept-charset="UTF-8" method="post">
<select name="lunchMonth">
<option>Month</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select name="lunchDay">
<option>Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="lunchYear">
<option value="2011">2011</option>
</select>
</form>
</div> <!-- End DateField -->
<br /><br />
<a class="whiteButton" href="#confirmed" type="submit" value="send">Confirm</a>
While starting with an existing blob of HTML and then trying to build an RoR controller/model to receive information from the form is certainly possible... it's a bit unusual. Typically, one would also use RoR views/form helpers to render the HTML, which clearly was not done in this case.
It's hard to answer your question, as posed, because you are starting from a slightly odd place. I think all would become clearer to you if wrote a few example forms/controllers/models using RoR scaffolds for all parts of the MVC framework. Maybe start with Rails for Zombies?
I think #213 Calendars episode from railscasts will help you to understand the date picker and make it in proper way.

Resources