Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

fix for strange webkit behavior as discussed on google groups #477

Closed
wants to merge 1 commit into from

3 participants

@mbennett

I was able to figure out a fix for the problem discussed at http://groups.google.com/group/formtastic/browse_thread/thread/c4bb193e888657c2?hl=en

Please review the fix and let me know if this works for you guys as well. Also, if you need any more information from me let me know.

Again, thanks for all your hard work on this excellent plugin.

Matt Bennett

@mbennett

I'm sorry guys. I just read the instructions on "How to contribute" and realized I committed to master instead of a topic branch on the fork. Please let me know if I should scrap this fork and do it the correct way or not.

@justinfrench
Owner

This is fine. I was taking a holiday :) Bit confused as the original discussion was around (I think) URL fields, for which there were two problems:

  1. the appearance was different
  2. there was the tiny scroll bar off to the right

Your patch doesn't seem to address the URL fields at all, so does this mean that you were experiencing the same scroll bar issue with date/time fields? Have you got a before/after screen shot I can see, or similar?

Thanks and sorry for the lag, ben trying to relax :)

@mbennett

I updated the following three images pointing out the issue (or at least the issue that I thought the Google Groups thread was discussing).

Chrome (shows the issue)
Safari (show the issue)
Firefox (no issue)

As far as I can tell this was what the original poster on Google Groups thought was the problem as well. Of course I could be wrong.

@justinfrench
Owner

Yup, that's what I thought. The original post was referring to (and shows) a :url input with this error, not a date/time field. I believe you're both reporting/seeing the same issue, but on separate types of inputs. Your patch only addresses the issue in date/time inputs, leaving the original poster's problem still remaining.

If you added form.formtastic fieldset > ol > li.date fieldset to the selectors, then you'll be fixing the OP's issue as well.

I'm wondering if there's any more that need the same fix. Will have a look, if you have time to add additonal patches, that'd be great!

@justinfrench
Owner

Ok, I think I've got a simpler fix. Remove the padding-top:0.1em; rule from line 59 of formtastic.css (in master). Seems to fix radio/date/time/check_boxes. Will push this up to master soon. Please check this fix works for you in your app.

@justinfrench

Can someone verify please?

@mbennett

I will verify as soon as I can. It may be tonight.

@mbennett

Unfortunately that change to line 59 did not work for me. However, the change I made in my fork is working. I am testing on a Mac with a new rails project using the latest formtastic (1.2.3) gem and no additional stylesheets.

@justinfrench

Ok thanks. Any chance you can send me the full HTML output so I can have a play?

@mbennett

I will send the full HTML output when I get home.

@mbennett

Here's the full HTML

<!DOCTYPE html>
<html>
<head>
  <title>Testapp</title>
  <link href="/stylesheets/formtastic.css?1294967985" media="screen" rel="stylesheet" type="text/css" /><link href="/stylesheets/formtastic_changes.css?1294891280" media="screen" rel="stylesheet" type="text/css" />
  <link href="/stylesheets/formtastic.css?1294967985" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/formtastic_changes.css?1294891280" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/scaffold.css?1294891573" media="screen" rel="stylesheet" type="text/css" />
  <script src="/javascripts/prototype.js?1294891036" type="text/javascript"></script>
<script src="/javascripts/effects.js?1294891036" type="text/javascript"></script>

<script src="/javascripts/dragdrop.js?1294891036" type="text/javascript"></script>
<script src="/javascripts/controls.js?1294891036" type="text/javascript"></script>
<script src="/javascripts/rails.js?1294891036" type="text/javascript"></script>
<script src="/javascripts/application.js?1294891036" type="text/javascript"></script>
  <meta name="csrf-param" content="authenticity_token"/>
<meta name="csrf-token" content="Hj79/O/BwrgYjdCMeVMvUp8yA/XrGTdOElcUsQcMGH8="/>
</head>
<body>

<h1>New job</h1>

<form accept-charset="UTF-8" action="/jobs" class="formtastic job" id="new_job" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="Hj79/O/BwrgYjdCMeVMvUp8yA/XrGTdOElcUsQcMGH8=" /></div>
  <fieldset class="inputs"><ol><li class="string required" id="job_company_name_input"><label for="job_company_name">Company name<abbr title="required">*</abbr></label><input id="job_company_name" maxlength="255" name="job[company_name]" type="text" /></li><li class="string required" id="job_manager_name_input"><label for="job_manager_name">Manager name<abbr title="required">*</abbr></label><input id="job_manager_name" maxlength="255" name="job[manager_name]" type="text" /></li><li class="date required" id="job_start_date_input"><fieldset><legend class="label"><label for="job_start_date_1i">Start date<abbr title="required">*</abbr></label></legend><ol><li><label for="job_start_date_1i">Year</label><select id="job_start_date_1i" name="job[start_date(1i)]">
<option value=""></option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>

<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>

</li><li><label for="job_start_date_2i">Month</label><select id="job_start_date_2i" name="job[start_date(2i)]">
<option value=""></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>
</li><li><label for="job_start_date_3i">Day</label><select id="job_start_date_3i" name="job[start_date(3i)]">
<option value=""></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>
</li></ol></fieldset></li><li class="date optional" id="job_end_date_input"><fieldset><legend class="label"><label for="job_end_date_1i">End date</label></legend><ol><li><label for="job_end_date_1i">Year</label><select id="job_end_date_1i" name="job[end_date(1i)]">
<option value=""></option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>

<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
</li><li><label for="job_end_date_2i">Month</label><select id="job_end_date_2i" name="job[end_date(2i)]">

<option value=""></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>
</li><li><label for="job_end_date_3i">Day</label><select id="job_end_date_3i" name="job[end_date(3i)]">
<option value=""></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>
</li></ol></fieldset></li></ol></fieldset>
  <fieldset class="buttons"><ol><li class="commit"><input class="create" id="job_submit" name="commit" type="submit" value="Create Job" /></li></ol></fieldset>
</form>

<a href="/jobs">Back</a>


</body>
</html>
@mbennett

I think I figured out the problem. I removed the scaffold.css and the strange scrollbars go away. But the good part is that your fix on line 59 does indeed work! So I guess it has been verified! Thanks a bunch Justin.

@justinfrench

Awesome. I think I'll leave this open to figure out what scaffold.css did to cause the error, and try to resolve it with the formtastic reset. Thanks for your help!

@corroded

i found out the offending style:

form.formtastic fieldset > ol > li {
overflow-x: auto;
overflow-y: auto;
}

http://grab.by/8ve3

in firefox, this shows the scrollbar even if you don't go over the supposed height. problem is if you take that out(in firefox) you some of the float elements will blow up

without overlfow:

http://grab.by/8ve4

but i guess a clear: both on the lis will fix this in a jiff(or if you're using compass, +clearfix)

@justinfrench

Yeah, the overflow adds the scroll bars, but it's a common way to contain floated elements. I'm interested in what styles the scaffold added that caused the scroll bars to appear — given they aren't there normally and given Formtastic.css tries to do a full (scoped) CSS reset.

@justinfrench
Owner

Closing this. Will create another issue "ensure compatibility with scaffold.css" instead of loading this one up.

@sterrym sterrym referenced this pull request from a commit in sterrym/formtastic
@justinfrench fix for GH-477 where tiny scroll bars were appearing on legends in da…
…te/time/radio/cbheckboxes fielsets
5332328
This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
Showing with 4 additions and 0 deletions.
  1. +4 −0 lib/generators/templates/formtastic.css
View
4 lib/generators/templates/formtastic.css
@@ -132,6 +132,10 @@ form.formtastic fieldset > ol > li.check_boxes fieldset ol li label input { marg
/* DATE & TIME OVERRIDES
--------------------------------------------------------------------------------------------------*/
+form.formtastic fieldset > ol > li.date fieldset,
+form.formtastic fieldset > ol > li.time fieldset,
+form.formtastic fieldset > ol > li.datetime fieldset { overflow:visible; }
+
form.formtastic fieldset > ol > li.date fieldset ol li,
form.formtastic fieldset > ol > li.time fieldset ol li,
form.formtastic fieldset > ol > li.datetime fieldset ol li { float:left; width:auto; margin:0 .3em 0 0; }
Something went wrong with that request. Please try again.