Databases
StackOverflow2013
Postsdbo
POHow to make twitter bootstrap input responsive
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to make twitter bootstrap input responsive
    primarykey
    data
    text
    <p>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:<img src="https://i.stack.imgur.com/AXZrJ.png" alt="sign in form half width"></p> <p>Then when I resize to full screen I get this: <img src="https://i.stack.imgur.com/uPKfT.png" alt="sign in form full width"> and it's not until I refresh the browser that I get the desired response which is this: <img src="https://i.stack.imgur.com/YMHwg.png" alt="sign in full width after refresh"></p> <p><strong>Rails Code</strong>:</p> <pre><code>&lt;h1&gt;Sign in&lt;/h1&gt; &lt;div class="container-fluid"&gt; &lt;div class="row-fluid"&gt; &lt;div class="span6 offset3"&gt; &lt;%= form_for(:session, url: sessions_path) do |f| %&gt; &lt;%= f.label :email %&gt; &lt;%= f.email_field :email%&gt; &lt;%= f.label :password %&gt; &lt;%= f.password_field :password %&gt; &lt;% end %&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>HTML Code</strong>: <em>(unnecessary stuff removed)</em></p> <pre><code>&lt;h1&gt;Sign in&lt;/h1&gt; &lt;div class="container-fluid"&gt; &lt;div class="row-fluid"&gt; &lt;div class="span6 offset3"&gt; &lt;form&gt; &lt;label for="session_email"&gt;Email&lt;/label&gt; &lt;input id="session_email" name="session[email]" type="email" /&gt; &lt;label for="session_password"&gt;Password&lt;/label&gt; &lt;input id="session_password" name="session[password]" type="password" /&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>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.</p> <p><strong>CSS</strong>:</p> <pre class="lang-css prettyprint-override"><code>.input { display: block; width: 100%; min-height: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } </code></pre> <p>Seems like this should be a pretty simple fix but looking around I can't find what to do to fix this. looking <a href="http://getbootstrap.com/2.3.2/base-css.html#forms" rel="nofollow noreferrer">here</a> it definitely seems possible (the inputs with the span tags seem to resize on size change). Thanks in advance.</p> <p>EDIT: I tried to make a <a href="http://jsfiddle.net/crashandburn4/43nxs/1/" rel="nofollow noreferrer">jsfiddle</a> 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 :)</p> <p>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)</p> <p>EDIT #3 added css</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMike H-R
    1. USMike H-R
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload