3

Hello i am having a weird issue here i have a i have created e form inside it but the padding does not display.

enter image description here

This is my html:

<div class="container-fluid">
    <tabset tab-theme="orange" tab-position="top" style="border:none!important;">
        <tab heading="Person">
            <form class="form-horizontal">

                    <div class="row">
                        <!-- Text input-->
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label" for="first_name">First Name</label>
                                <input id="first_name" name="first_name" placeholder="Type here.." class="form-control" required="" type="text">
                            </div>
                        </div>
                        <!-- Text input-->
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label" for="last_name">Last Name</label>
                                <input id="last_name" name="last_name" placeholder="Type here.." class="form-control" required="" type="text">
                            </div>
                        </div>
                        <!-- Text input-->
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label" for="other_name">Other Name</label>
                                <input id="other_name" name="other_name" placeholder="Type here.." class="form-control" type="text">
                            </div>
                        </div>
                    </div>
                </form>
        </tab>
        <tab heading="Company">
            <div class="col-xs-12">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores porro eveniet debitis quas sed harum nobis libero voluptatibus dolorum odio at veniam aut id corrupti hic esse quisquam fugiat. Asperiores in eveniet sapiente error fuga tenetur ex ea dignissimos voluptas ab molestiae eos totam quo dolorem maxime illo neque quia itaque.</p>
            </div>
        </tab>
    </tabset>
</div> <!-- container-fluid -->

There is usually padding my default for each form input container. In this case there is not.

I do not know it it is an issue with my html or css, is there a specific way of doing this or do i have to force the padding from my CSS?

2
  • Where do you want padding. Can you specify in image Aug 28, 2015 at 18:51
  • In between the form inputs Aug 28, 2015 at 18:53

4 Answers 4

2

Bootstrap Documentation for Form Horizontal

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form (which doesn't have to be a ). Doing so changes .form-groups to behave as grid rows, so no need for .row.

If you read Bootstrap's doc. its clearly mentioned that, .form-group inside .form-horizontal acts as .row, hence, you col-md-xx are not getting their padding. as per your code:

.row {margin-left:-15px;margin-right:-15px} // margin goes negative
.col-md-xx {padding-left:15px;padding-right:15px} // padding creates 30px gutter
.form-group {margin-left:-15px;margin-right:-15px} // again your margins go negative - hence no gutter.

Better remove form-horizontal class or overwrite it with your custom css

working Codepen example: http://codepen.io/happy2deepak/pen/wKwYXJ?editors=100

1
  • Yup this was the answer only with this i need to add a .clear-fix to the bottom of my tab content otherwise it displays wrong, other alternative is to take out the form-group wrapper instead. :) Aug 28, 2015 at 20:19
0

In your html remove container of div.form-group .if you remove both containers div.row and div.col-md-4 your inputs will be rendered with form default padding. Also add class form-inline to form tag and remove class form-horizontal. Try this solution it will work

<div class="container-fluid">
 <tabset tab-theme="orange" tab-position="top" style="border:none!important;">
 <tab heading="Person"> 
<form class="form-inline"> 
<div class="form-group">
 <label class="control-label" for="first_name">First Name</label> 
<input id="first_name" name="first_name" placeholder="Type here.." class="form-control" required="" type="text">
  </div>
 <!-- Text input-->
 <div class="form-group">
  <label class="control-label" for="last_name">Last Name</label> 
 <input id="last_name" name="last_name" placeholder="Type here.." class="form-control" required="" type="text"> 
</div>
 <!-- Text input-->
<div class="form-group">
 <label class="control-label" for="other_name">Other Name</label> 
<input id="other_name" name="other_name" placeholder="Type here.." class="form-control" type="text"> 
</div> 
</form>
 </tab> 
<tab heading="Company">
 <div class="col-xs-12">
 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores porro eveniet debitis quas sed harum nobis libero voluptatibus dolorum odio at veniam aut id corrupti hic esse quisquam fugiat. Asperiores in eveniet sapiente error fuga tenetur ex ea dignissimos voluptas ab molestiae eos totam quo dolorem maxime illo neque quia itaque.</p> 
</div>
 </tab>
 </tabset> 
</div>
 <!-- container-fluid -->
6
  • If i do this i cannot get my inputs into three different columns like in the picture plus it still does not fix the padding issue. Aug 28, 2015 at 19:03
  • Yes i did exactly that. Aug 28, 2015 at 19:06
  • One more thing add class form-inline to your form element Aug 28, 2015 at 19:13
  • To which form element in particular? Aug 28, 2015 at 19:16
  • You have to remove class form-horizontal from form tag. Aug 28, 2015 at 19:28
0

Well i couldn't find the cause and the right solution so i just forced the padding in my CSS:

.form-horizontal .form-group {
    padding: 10px !important;
}

Found the issue. it was with the "form-group" wrapper. I took it out, now the padding displays properly.

3
  • Has nothing to do with it. Bootstrap has negative margins (left and right) of -15px declared for .form-horizontal .form-group { ... }. See my answer you down voted. lol Aug 28, 2015 at 19:51
  • I actually tried your solution, all it did was remove the margins at the sides. Didn't solve the no-padding issue. Aug 28, 2015 at 19:57
  • Then I clearly don't understand what you're trying to accomplish as I thought you wanted spacing between the input textboxes. The negative margining was what was causing the textboxes to nudge next to each other. Aug 28, 2015 at 20:00
-1

It's your parent container <form> that has the class of .form-horizontal. Bootstrap (by default) has negative margins set for that. Below is a snippet of the style sheet that is causing the behavior of your input boxes.

.form-horizontal .form-group {
    margin-right: -15px;
    margin-left: -15px;
}

You can either:

  1. Remove the form-horizontal class from the form element. OR;

  2. Add the following to your custom style sheet to over write the default declaration, like this:

    .form-horizontal .form-group { margin-right: 0; margin-left: 0; }

Here's a fiddle demo for you to review. http://jsfiddle.net/yongchuc/Lt0o5mp0/

5
  • I don't understand what this does is get rid of the margins at the sides, what i want is to restore the default "padding" in between form inputs. Aug 28, 2015 at 19:12
  • The style sheet I included is something in vanilla Bootstrap. You can 1.) Remove the .form-horizontal group from the <div>, or add your own class to over-write the default negative margin. Here's a fiddle with the negative margin. I will update my answer too. jsfiddle.net/yongchuc/Lt0o5mp0 Aug 28, 2015 at 19:45
  • I don't want to touch my margins, my problem is padding. Aug 28, 2015 at 19:58
  • Then remove the form-horizontal class, as suggest in #1 above. lol Aug 28, 2015 at 20:02
  • Yes the thing is i have tried all that. Form horizontal is not the cause of the no padding problem. I did some fiddling around and took out the form-group wrapper and realized that was the cause it displays properly now. I use bootsnipp to quickly generate all my forms all the time and i've never before had this issue. :) Aug 28, 2015 at 20:13

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.