try this

http://jsfiddle.net/Dzhz4/1/


    .input-group-addon {
        min-width:300px;// if you want width please write here //
        text-align:left;
    }



    .input-group-addon { width: 50px; } // Or whatever width you want

    .input-group { width: 100%; }

The first part sets the width of your addons, the second forces the inputs to take up all of their parent container.


I currently have a collection view that does horizontal paging where each cell is fullscreen. What I want to do is for the collectionview to start at a specific index when it shows. 

Right now I&#39;m using scrollToItemAtIndexPath:atScrollPosition:animated: with animated set to NO but that still loads the first index first before it can scroll to the specific item. It also seems I can only use this method in ViewDidAppear so it shows the first cell and then blinks to the cell that I want to show. I hide this by hiding the collection view until the scroll has finished but it doesn&#39;t seem ideal. 

Is there any better way to do this other than the way I described it? 

Thanks!

Start UICollectionView at a specific indexpath

I use [Dropzone.js][1] and I want it to upload the dropped not automatically but when the user clicks a button. So I set the `autoProcessQueue` option to `false`. When the button is clicked the `processQueue()` method is called. I would suppose that now the full queue is processed. But thats not the case. Only the number of files which is specified in the `parallelUploads` option will be uploaded. The standard value of `parallelUploads` seems to be 2. Which every click 2 files are processed and uploaded.

Do I have to set `parallelUploads` to an very high number, for now to solve this?

Here&#39;s my full JS code:

    var myDropzone = new Dropzone(&quot;div#myId&quot;, {
      url: &quot;http://www.torrentplease.com/dropzone.php&quot;,
      addRemoveLinks: true,
      thumbnailWidth: &quot;80&quot;,
      thumbnailHeight: &quot;80&quot;,
      dictCancelUpload: &quot;Cancel&quot;,
      autoProcessQueue: false
    });

    myDropzone.on(&quot;drop&quot;, function(event) {
      $(&#39;.edit_tooltip .option_bar&#39;).animate({
        opacity: 1,
        top: &quot;-5&quot;
      });
    });


    $(&#39;.edit_tooltip .option_bar .button&#39;).click(function() {
      myDropzone.processQueue();
    });


  [1]: http://www.dropzonejs.com

Dropzone.js uploads only two files when autoProcessQueue set to false

Basically I have a couple of input fields which have a span prepended with some text. When I try to set col-lg-4 and col-lg-8 on the input-group-addon and the input field itself, it doesn&#39;t do what I expected it to do and resize them.

    &lt;div class=&quot;input-group&quot;&gt;
       &lt;span class=&quot;input-group-addon&quot;&gt;some text&lt;/span&gt;
       &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;current_pwd&quot; name=&quot;current_pwd&quot; /&gt;
    &lt;/div&gt;
Can anyone help me getting the input-group-addon get the same size?

I&#39;ve created a fiddle here: http://jsfiddle.net/Dzhz4/ that explains my problem.

Anyone that can shed some light please?

twitter bootstrap 3 input-group-addon not all the same size

Basically I have a couple of input fields which have a span prepended with some text. When I try to set col-lg-4 and col-lg-8 on the input-group-addon and the input field itself, it doesn't do what I expected it to do and resize them.
<pre><code class="hljs language-ini">&#x3C;div class="input-group">
 &#x3C;span class="input-group-addon">some text&#x3C;/span>
 &#x3C;input type="text" class="form-control" id="current_pwd" name="current_pwd" />
&#x3C;/div>
</code></pre>
Can anyone help me getting the input-group-addon get the same size?
I've created a fiddle here: <a href="http://jsfiddle.net/Dzhz4/" target="_blank" rel="noopener noreferrer">http://jsfiddle.net/Dzhz4/</a> that explains my problem.
Anyone that can shed some light please?

I&#39;m kinda stuck with a CSS problem while using Bootstrap. I&#39;m also using Angular JS with Angular UI.bootstrap (which might be part of the problem).

I&#39;m making a website that displays data in a table.
Sometime, the data contains object that I have to display in tables.
So I want to put borderless tables inside a normal table while keeping inside separation lines for the borderless tables. 

But it seems that even if I specifically say to not show the borders on a table, it is forced:

HTML:

    &lt;table class=&#39;table borderless&#39;&gt;

CSS:

    .borderless table {
	    border-top-style: none;
	    border-left-style: none;
	    border-right-style: none;
	    border-bottom-style: none;
    }

So here, what I want is just the inside borders.

Bootstrap table without stripe / borders

    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -moz-column-fill: auto;

I am a beginner at CSS and when I was looking at some CSS code the other day, I found these lines. In the tutorials I used to learn CSS, I have never seen anything like these lines. What is the explanation for these lines? Or is there a source where I could learn to implement lines like these?





What are -moz- and -webkit-?

I have a fixed image that overlays a page when the user is in the act of scrolling a touch screen (mobile).

I want to make that image &quot;unclickable&quot; or &quot;inactive&quot; or whatever, so that if a user touches and drags from that image, the page behind it still scrolls as if the image weren&#39;t there &quot;blocking&quot; the interaction.

Is this possible? If need be, I could try to provide screen shots exemplifying what I mean.

Thanks!

Make element unclickable (click things behind it)

I am using rails 3.2 and i have to set a background for one of the page and i have tried many ways and nothing went right, so looking for some good help. I have tried 

    background: url(&lt;%= asset_path &#39;background.jpg&#39; %&gt;)
    
    background: url(&quot;public/background.jpg&quot;);
    
    background-image:url(&#39;/assets/images/background.jpg&#39;)

and nothing worked. Please help me.

Rails: How to set a background image in rails from css?

I&#39;m getting started on Bootstrap 3 and I&#39;m having some trouble understanding how the grid classes are meant to be used.

Here&#39;s what I&#39;ve figured out so far: 

It appears that the classes `col-sm-#` and `col-lg-#` differ from plain old `col-#` in that they will only apply when screens are above a certain size (768px and 992px respectively). If you omit the -sm- or -lg- the divs will never collapse into one column.

However, when I create two divs inside a row that are both `col-sm-6` it seems they are *only* side by side when the window is between 768px and 992px wide. In other words, if I shrink the window all the way down and then slowly widen it, the layout is single column, then two columns, then back to single column *again*.

1. Is this the intended behavior?
2. If I want two columns for anything over 768px, should I apply *both* classes? (`&lt;div class=&quot;col-sm-6 col-lg-6&quot;&gt;`)
3. Should `col-6` *also* be included? `&lt;div class=&quot;col-6 col-sm-6 col-lg-6&quot;&gt;`

Understanding the grid classes ( col-sm-# and col-lg-# ) in Bootstrap 3

Is there anything out of the box that bootstrap supports to render a &quot;regular&quot; defacto drop down list select box?  That is, where the drop down box is a list of values and if selected populate the contents of the list box?

Something similar to this functionality?

http://bootstrapformhelpers.com/select/

![enter image description here][1]


  [1]: http://i.stack.imgur.com/eWw4u.png

How can I render a list select box (dropdown) with bootstrap?

How do I center a div of one column size within the container (12 columns) in [Twitter Bootstrap&amp;nbsp;3][1]?

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .centered {
      background-color: red;
    }

&lt;!-- language: lang-html --&gt;

    &lt;!-- Latest compiled and minified CSS --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&quot; integrity=&quot;sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u&quot; crossorigin=&quot;anonymous&quot;&gt;

    &lt;body class=&quot;container&quot;&gt;
      &lt;div class=&quot;col-lg-1 col-offset-6 centered&quot;&gt;
        &lt;img data-src=&quot;holder.js/100x100&quot; alt=&quot;&quot; /&gt;
      &lt;/div&gt;
    &lt;/body&gt;

&lt;!-- end snippet --&gt;

I want a `div`, with a class `.centered` to be centered within the container. I may use a row if there are multiple `div`s, but for now I just want a `div` with the size of one column centered within the container (12 columns).

I am also not sure the above approach is good enough as the intention is not to offset the `div` by half. I do not need free spaces outside the `div` and the contents of the `div` shrink in proportion. I want to **empty space outside the div to be evenly distributed** (shrink till the container width is equal to one column).

  [1]: https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29
  [2]: http://jsfiddle.net/qejjP/2/



Center a column using Twitter Bootstrap 3

Is there any way to increase the point at which the bootstrap 3 navbar collapses (i.e. so that it collapses into a drop down on portrait tablets)?

These two were applicable to bootstrap 2 but not now!

https://stackoverflow.com/questions/9405610/how-to-change-navbar-collapse-threshold-using-twitter-bootstrap-responsive

https://stackoverflow.com/questions/12486051/bootstrap-change-the-default-responsive-navbar-breakpoint

Content Type	Original Author	Original Content on Stackoverflow
Question	J.Pip	View Question on Stackoverflow
Solution 1 - Css	Falguni Panchal	View Answer on Stackoverflow
Solution 2 - Css	rictionaryFever	View Answer on Stackoverflow

twitter bootstrap 3 input-group-addon not all the same size

Css Problem Overview

Css Solutions

Solution 1 - Css

Solution 2 - Css

Dropzone.js uploads only two files when autoProcessQueue set to false

Start UICollectionView at a specific indexpath

Attributions