CODEWITHSUNDEEP
htmlformstwitter-bootstrap
Juicef
Juicef

Reputation: 316

Bootstrap grid bug?

I've succeeded to pin down an error in my code. Really weird I must say. Of course, before anyone says google it, I have hehehe. I simply want to know if this is a bug, and or if there is some solution to this.

I have a form in which I want to edit some content and send it to the server. The thing is, when I try to focus a field (click on it), I can't. It is disabled for some reason. Not only inputs, but select boxes and checkboxes as well. However, if I change the class of the div with the textarea as its child from col-sm-12 to col-sm-11 everithing works as it should. Now I don't want to use a column of size 11 when everything else can be 12. Looks just weird.

Here is my code:

<form>
    <div class="form-group col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <label for="title" >Title</label>
    <input type="input" name="title" class="form-control" value="<?php echo $article['title'] ?>">
    </div>
    ...
    ...
    <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <label for="content" >content</label>
        <textarea name="content" class="form-control" rows="3"><?php echo $article['content'] ?></textarea>
    </div>
    <div class="form-group col-xs-12 col-sm-6 col-md-6 col-lg-2">
        <input type="submit" name="submit" class="btn btn-success form-control" value="Save!"/>
    </div>
...
</form>

Does anyone know anything about this?

Upvotes: 1

Views: 5058

Answers (4)

Vinorth
Vinorth

Reputation: 1033

The problem is that there is a div or some other element that is overlapping the input controls. You should be able to tab through to the input element, even through you can't click on it. Try visiting this stackoverflow post: Bootstrap 3 form not working on mobile devices.

Upvotes: 0

Gamma Prima Naba
Gamma Prima Naba

Reputation: 1

i have same problem, still not work after add div row. i add this code to style css to solve the problem :

.col-md-12{ 
    width: 100% !important; 
}

add to all col-xx-12

Upvotes: 0

opusnbilly
opusnbilly

Reputation: 1

I experienced the same problem. Neither .clearfix or wrapping each col-xx-x in a div with a row class worked. Wrapping the form tags within a div containing a row class did however solve the issue.

<div class="row">
  <form>
    .
    .
    .
  </form>
</div>

Upvotes: 0

JasonBoss
JasonBoss

Reputation: 321

I experienced this issue today. The text inputs would not focus on click, and the clearfix div did not work.

The solution was to wrap each col-xx-x in a div with a .row class. Ex:

<div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <label for="content" >content</label>
        <textarea name="content" class="form-control" rows="3"></textarea>
    </div>
</div>

Upvotes: 8

Related Questions