Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Needed this for a project so this is how I did it. The good news is the major change is in the <code>HTML</code>, as it is possible to adapt the plugin to Bootstrap 3.0 by adding only 5 lines and modifying 4 other in the <code>css</code> of the plugin.</p> <p><a href="http://jsfiddle.net/FFABG/2/" rel="noreferrer"><strong>DEMO</strong></a></p> <p>Here is the <code>html</code> markup for using <em>fileupload</em> with Bootstrap 3.0:</p> <pre><code>&lt;div class="form-group"&gt; &lt;div class="fileupload fileupload-new" data-provides="fileupload"&gt; &lt;div class="input-group"&gt; &lt;div class="form-control uneditable-input"&gt;&lt;i class="icon-file fileupload-exists"&gt;&lt;/i&gt; &lt;span class="fileupload-preview"&gt;&lt;/span&gt; &lt;/div&gt; &lt;div class="input-group-btn"&gt; &lt;a class="btn btn-default btn-file"&gt; &lt;span class="fileupload-new"&gt;Select file&lt;/span&gt; &lt;span class="fileupload-exists"&gt;Change&lt;/span&gt; &lt;input type="file" class="file-input"/&gt;&lt;/a&gt; &lt;a href="#" class="btn btn-default fileupload-exists" data-dismiss="fileupload"&gt;Remove&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>and the changes to the <code>bootstrap-fileupload.css</code>:</p> <pre><code>.fileupload .uneditable-input { display: inline-block; margin-bottom: 0px; vertical-align: middle; cursor: text; overflow: hidden; /*Added this line*/ max-height: 34px; /*Added this line*/ } .fileupload .fileupload-preview { /*Added this line*/ line-height: 21px; /*Added this line*/ } /*Added this line*/ </code></pre> <p>as well as </p> <pre><code>/*==================================*/ /*.fileupload-new .input-append .btn-file { -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; }*/ /*change to this:*/ .fileupload-new .input-group .btn-file { -webkit-border-radius: 0 3px 3px 0 !important; -moz-border-radius: 0 3px 3px 0 !important; border-radius: 0 3px 3px 0 !important; } /*==================================*/ </code></pre> <p>There are most probably optimizations that can be done (some classes in the old <code>css</code> can be deleted, but this would have to be tested) to ameliorate the code but this is what I am using for now as it is quite easy to implement.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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