1

So I have a bootstrap page and I just noticed that on resizing the input won't scale responsively like everything else on the page when I have a window at half-width it looks like so:sign in form half width

Then when I resize to full screen I get this: sign in form full width and it's not until I refresh the browser that I get the desired response which is this: sign in full width after refresh

Rails Code:

<h1>Sign in</h1>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="span6 offset3">
      <%= form_for(:session, url: sessions_path) do |f| %>

        <%= f.label :email %>
        <%= f.email_field :email%>

        <%= f.label :password %>
        <%= f.password_field :password %>
      <% end %>
    </div>
  </div>
</div>

HTML Code: (unnecessary stuff removed)

<h1>Sign in</h1>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="span6 offset3">
      <form>

        <label for="session_email">Email</label>
        <input id="session_email" name="session[email]" type="email" />

        <label for="session_password">Password</label>
        <input id="session_password" name="session[password]" type="password" />
      </form>
    </div>
  </div>
</div>

I'm using twitter bootstrap 2.3.2 (legacy I know but I need to interface with the rest of a site) and tested on chrome and firefox on arch.

CSS:

.input {
    display: block;
    width: 100%;
    min-height: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Seems like this should be a pretty simple fix but looking around I can't find what to do to fix this. looking here it definitely seems possible (the inputs with the span tags seem to resize on size change). Thanks in advance.

EDIT: I tried to make a jsfiddle to illustrate the problem and allow people to tinker but this suffers from a different responsive problem, bonus points will come for showing how to fix that too :)

EDIT #2: Ok, so this is weird, I dug even further into this, the width of the element is set in element.style but I'm having trouble figuring out where this is set (iirc element.style is set in javascript, this does not happen in the jsfiddle and is what is causing my problem, I can't figure out why it is happening as I don't have any custom javascript for this and I am using the same version of bootstrap for both (though in my actual project it is vendored from bootstrap-sass gem)

EDIT #3 added css

1
  • @pathros edited and fixed.
    – Mike H-R
    Nov 11, 2015 at 19:24

3 Answers 3

1

You can put span classes on the input elements. In this case, span12, since they are nested in the .span6.offset3 div.

1
  • nope, I already tried that and it doesn't work, I should have probably mentioned that, sorry.
    – Mike H-R
    Nov 21, 2013 at 21:47
1

Try using the class="input-block-level"

Check this fiddle

<h1>Sign in</h1>

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span6 offset3">
            <form>
                <label for="session_email">Email</label>
                <input class="input-block-level" id="session_email" name="session[email]" type="email" />
                <label for="session_password">Password</label>
                <input class="input-block-level" id="session_password" name="session[password]" type="password" />
            </form>
        </div>
    </div>
</div>
3
  • You definitely get a +1 for the nice answer because that works perfectly in the js fiddle (which is nice) but it doesn't seem to work in my application, I'ave dug around a bit and can't figure out why? how does input-block-level stop lastpass from changing the width of the tag? is there something else I'm using that may interfere with last-pass?
    – Mike H-R
    Nov 23, 2013 at 15:23
  • Ah, I've got it, your solution will not work if you allow lastpass to fill in a username and password, then the element will not be resized. Thanks anyways.
    – Mike H-R
    Nov 23, 2013 at 15:40
  • Also as far as I can tell input-block-level just applies .input-block-level { display: block; width: 100%; min-height: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } which will still get overridden by javascript setting of the width
    – Mike H-R
    Nov 23, 2013 at 15:46
1

Ok, I ended up finding out what the problem was. On finding that the width was set via element.style I set a breakpoint to find out what was setting this property (as it does not occur in the jsfiddle). after a bit of javascript digging I found out that this was being set by an add-on LastPass.

Disabling the add-on fixes the problem.

EDIT: This seems to only occur if lastpass fills in the username and password.

EDIT #2: after opening a ticket with lastpass this issue can be resolved on a per-browser basis by unchecking "Highlight input boxes" in the general preferences. Waiting to hear whether they can offer a global fix.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.