0

I am building a web app with Rails 4 and Bootstrap 3.

In my sign up form, I have several fields including a time_zone select:

<div class="field">
    <%= f.label :first_name, "FIRST NAME" %>
    <%= f.text_field :first_name, autofocus: true %>
</div>

<div class="field">
    <%= f.label :last_name, "LAST NAME" %>
    <%= f.text_field :last_name, autofocus: true %>
</div>

<div class="field">
    <%= f.label :time_zone, "TIME ZONE" %>
    <%= f.time_zone_select :time_zone, ActiveSupport::TimeZone.us_zones, :class => :timezone %>
</div>

I have been able to style the first_name and last_name fields, but I cannot seem to apply a padding or remove the border-radius of the time_zone field:

enter image description here

This is what I have in my css file:

#user_first_name, #user_last_name {
    background-color: #f2f2f2;
    border: none;
    width: 100%;
    padding: 10px;
    margin: 5px 0px 10px 0px;
    display: inline-block;
}

#user_time_zone {
    background-color: #f2f2f2;
    border: none;
    width: 100%;
    margin: 5px 0px 10px 0px;
    padding: 10px;
    border-radius: 0;
}

How can I get the same style for the select field as for the other two regular text fields?

Thibaud Clement
  • 6,607
  • 10
  • 50
  • 103
  • Please, provide jsfiddle. – Alex Oct 31 '15 at 17:52
  • Well, I could provide a JSFiddle, but there would not be more code than what's already in my question... I am not using any custom JavaScript beside default Bootstrap functions. What would you need exactly? – Thibaud Clement Oct 31 '15 at 18:04
  • Jsfiddle makes easier to understand your problem and solve it fast. – Alex Oct 31 '15 at 18:07
  • I am happy to share any code I have. I am just not sure of what I can provide in addition to what is already in my question... What would you need? – Thibaud Clement Oct 31 '15 at 18:10
  • I can send you this, but because we are not in a Rails environment, it does not work properly: https://jsfiddle.net/7vg9exg5/ – Thibaud Clement Oct 31 '15 at 18:11
  • I'm not expert in Rails. Is it possible to post your compiled html? – Alex Oct 31 '15 at 18:15
  • Sure, no problem. Here we go: https://jsfiddle.net/7vg9exg5/ – Thibaud Clement Oct 31 '15 at 18:18
  • I'm sorry I don't understand Rails(For example ` f.label :time_zone`). I only need HTML of your work without any Rails. – Alex Oct 31 '15 at 18:33
  • Yes, I sent you a new JSFiddle with the compiled HTML: https://jsfiddle.net/7vg9exg5/ – Thibaud Clement Oct 31 '15 at 18:42
  • That fiddle contains `erb` tags, so it's not actually the compiled HTML. Do a right-click -> 'inspect element' on one of those fields, and copy the HTML of those three divs straight from your browser's dev tools. While you're in there, highlight the `div` containing the `select` and look at the styles. Assuming you're using the right css selector, do you see `border-radius: 0;` in the list of styles? Is it struck through? – elements Oct 31 '15 at 19:02
  • Yes, that's exactly what I had done, but for some reason, you did not get the correct JSFiddle link. Here it is: https://jsfiddle.net/7vg9exg5/1/ – Thibaud Clement Oct 31 '15 at 19:40

1 Answers1

1

I've checked your jsfiddle link and your time zone select seems to be okay. ( refer to image attached )

enter image description here

Meri Alvarado
  • 191
  • 5