`Unable to display Bootstrap padding when using tabs`

Hello, I'm experiencing a strange issue with creating a form inside a container where the padding is not displaying.

https://i.sstatic.net/v2AJI.png

This is the HTML code:

<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 -->

Typically, there is default padding for each form input container, but in this case it's missing. I'm uncertain if this is an HTML or CSS issue. Is there a specific way to address this or do I need to manually add padding through my CSS?

Answer №1

Learn about Bootstrap Form Horizontal

Discover how to use Bootstrap's grid classes to align labels and form controls in a horizontal layout by adding .form-horizontal to your form.

Bootstrap documentation clearly states that using .form-group within .form-horizontal acts as a .row, which may impact the padding of your columns.

.row {margin-left:-15px;margin-right:-15px} // negative margin
.col-md-xx {padding-left:15px;padding-right:15px} // creates 30px gutter
.form-group {margin-left:-15px;margin-right:-15px} // negative margin with no gutter

If needed, consider removing the form-horizontal class or customize it with your own CSS.

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

Answer №2

Remove the container of div.form-group in your HTML. If you remove both containers div.row and div.col-md-4, your inputs will be rendered with the default form padding. Also, add the class form-inline to the form tag and remove the class form-horizontal. Give this solution a try, it should 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 -->

Answer №3

After struggling to identify the root cause and a suitable solution, I resorted to manually adding padding in my CSS:

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

Luckily, I eventually pinpointed the problem - it was related to the "form-group" wrapper. Once I removed it, the padding appeared correctly.

Answer №4

Your parent container is the <form> element with the class of .form-horizontal. Bootstrap has set negative margins for this class by default, which is affecting the layout of your input boxes. The snippet below shows the style sheet responsible for this:

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

To fix this issue, you can either:

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

  2. Add the following code to your custom style sheet to override the default declaration:

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

You can view a demo on fiddle here: http://jsfiddle.net/yongchuc/Lt0o5mp0/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Custom validation for Stripe checkout form

Currently, I am working on setting up a customized Stripe checkout where the total amount is dynamic based on the user's selection in the "isStudent" radio button. Additionally, there is a form on the page that needs to be validated before submission, ...

Unable to utilize a Vue.js component's methods

I've been working on creating a sidebar menu using Vue.js with toggle methods. The idea is that when a link is clicked, the v-on attribute is used to access a method from the instance. This method emits the word 'isToggled', and then the men ...

Enhancing the appearance of a select element on Firefox

Trying to customize a <select> element in Firefox. I successfully styled it in Chrome using the following CSS: -webkit-appearance: none; background: #eeeeee url("../img/select-arrow.jpg") no-repeat center right; However, I'm facing difficultie ...

Incorporate JavaScript functionality with HTML dropdown lists

I am attempting to achieve the following: The user can choose between "Option One" or "Option Two". If they select "Option One", the result will be 66 + 45, and if they select "Option Two", the result will be 35 + 45. How can I make this work using a com ...

What is the method for utilizing alpha transparency in MPDF?

I am currently working with MPDF to generate a PDF file with a full-page background. I want to create a layout similar to the image shown https://i.sstatic.net/RoH3r.png. I believe that I need to incorporate alpha transparency, but I am unsure of how to d ...

Tips for transferring information between two distinct pages utilizing the jQuery POST technique

I'm dealing with two PHP files called card_process.php and payment.php. My goal is to transfer data from the cart_process page to the payment page. Here's a snippet of the code: In cart_process.php: $paynow = "<button type='submit' ...

Styling the cursor in an input box: Using CSS and Javascript

After spending some time delving into the code of wallbase.cc, I've been trying to uncover the secret behind styling the input box similar to the one featured on their homepage. My main curiosity lies in how they achieve the quickly blinking cursor an ...

Make sure to transfer any data retrieved from a click event using JavaScript into a different field

Recently I delved into learning JavaScript and stumbled upon a coding problem that has me stumped! I'm looking for a way to display information in the blue area after selecting an option, showing details like the name of the food item and its price. ...

Is there a way to run a NodeJS server on the client side using an HTML button, or is there an alternative method

Introduction: Greetings! I have embarked on a project involving Socket.io on a chat-based social media app, but it appears that the client must open a localhost server to connect with the socket manager on my web API (node, express, socket.io). Question T ...

Is there a way to eliminate duplicates from an array in JavaScript by utilizing a set and placing each element in an li tag? Here is the code

const numbers = [" 4", "9", "16"," 4", "9", "16"," 4", "9", "16"] <ul> {(<li> {[...new Set(numbers)]} </li>)} </ul> const numbers = [" 4", "9", "16"," 4", "9", "16"," ...

Developing a dynamic row that automatically scrolls horizontally

What is the best method for creating a div box containing content that automatically slides to the next one, as shown by the arrows in the picture? I know I may need jquery for this, but I'm curious if there's an alternative approach. oi62.tinyp ...

The columns in the row are not fully filling up the container

I have a container with two rows inside. One of those rows contains several columns. My goal is to have four columns per line on mobile devices, which I achieved using "row-cols-4". However, on larger screens, I want all the columns to be on the same line, ...

Color of the background in an Ionic tab

https://i.sstatic.net/lyhMu.jpg Hello, I am currently working on developing a mobile app using Ionic. I have utilized the Ionic tabs template, but I am facing an issue with the tab's background color remaining white at the bottom of the screen. Altho ...

What is the best way to showcase a collection of images stored in a hard drive folder on an ASP.NET website?

Currently, I am in the process of creating a simple photo gallery website using ASP.NET and C#. At this moment, I do not have a dedicated server set up. Instead, I am utilizing the development server provided by Visual Studio when starting a new website pr ...

The position of a jQuery element gets reset when both the show and stop animations are used

When I use jQuery's .position() to place an element, everything works fine. But as soon as I display an animation and then cancel it with an ajax call, the position of the element resets. function displayMessage(msg) { var $messageEl = $('#u ...

Is it possible to embed a Blazor component as a Web Component in a standard HTML page that is not using Blazor?

Is there a way to render a Blazor component as a standalone DOM fragment, or integrate it as a standard Web Component in a vanilla HTML/JS page? This question may seem simplistic from the perspective of Blazor architecture. While I'm no expert in Bla ...

CSS for a navigation menu with underlined links

I am attempting to create an underline effect when hovering over a link. However, I am facing an issue where the underline does not align perfectly with the line below it. Can someone please guide me on how to modify this CSS so that when the link is hov ...

Tips for effectively utilizing content type with images

I am working with a radiobuttonlist that shows a list of images depending on their file extension, not the actual image itself. Is there a way to use Content type to display the selected images correctly? ...

Stop the page from automatically scrolling to the top when the background changes

Recently, I've been experimenting with multiple div layers that have background images. I figured out a way to change the background image using the following code snippet: $("#button").click(function() { $('#div1').css("background-image ...

What is the proper way to utilize the script type "text/x-template" in a multilanguage context?

I'm currently working with ASP NET and VueJS. In my ASP NET, I have a view component that looks like this: <script type="text/x-template" id="form-template"> @if (string.IsNullOrEmpty(Model.LastName)) { <in ...