Tips for adjusting the height and border of Bootstrap tabs

I'm facing an issue with the modal and nav-tabs I created. There are a couple of problems that need to be addressed.

  • Firstly, the tabs have excessive height and I've tried adjusting it using CSS height property, but it's not working as expected. I want to reduce the height of the tabs.

  • The second issue is that when a specific tab is open, the bottom border or line of that tab remains visible instead of being hidden as intended. I need help in hiding that bottom line when the tab is active.

Any assistance in resolving these issues would be greatly appreciated.
Here is an image of my modal with the tabs:

Below is the relevant code for the tabs (excluding unnecessary code):

<div class="tabbable" >
    <ul class="nav nav-tabs" ><!--tabs-->
          <li  style="position:absolute;margin-left:0px;height:50px;" id="logintab">
               <a href="#pane_login" data-toggle="tab" id="logintab_a">Login</a></li>
          <li  class="active" style="margin-left:70px;" id="reg_tab" >
              <a href="#pane_reg" data-toggle="tab" id="regtab_a">Registration</a></li>
    </ul>
    <div class="tab-content"><!--login tab content-->
        <div id="pane_login" class="tab-pane active">
        </div>
     </div>

     <div class="tab-content"><!--register tab content-->
        <div id="pane_register" class="tab-pane active">
        </div>
     </div>
</div><!--/Tabbable-->

Answer №1

Just sharing my solution in case someone else needs to adjust the height:

.nav-tabs > li > a
{
    /* adjusting padding for height */
    padding-top: 4px;
    padding-bottom: 4px;
}

The second issue can be fixed by changing the margin of the active anchor:

.nav-tabs > li.active > a:focus, .nav-tabs > li.active > a
{
    margin-top: 1px;
}
.nav-tabs > li {
    margin-bottom: 0px;
}
.nav-tabs > li.active {
    margin-bottom: -1px;
}

Answer №2

To style the First issue, apply height:43px

For the second issue, you need to specify border-bottom:none as follows:

CSS

li{
    position:absolute;
    margin-left:0px;
    height:43px;
}
li.active{
    border-bottom:none;
}

HTML

<div class="tabbable" >
    <ul class="nav nav-tabs" ><!--tabs-->
          <li style="" id="logintab">
               <a href="#pane_login" data-toggle="tab" id="logintab_a">Login</a></li>
          <li class="active" id="reg_tab" >
              <a href="#pane_reg" data-toggle="tab" id="regtab_a">Registration</a></li>
    </ul>

    <div class="tab-content"><!--login tab content-->
        <div id="pane_login" class="tab-pane active">
        </div>
     </div>

     <div class="tab-content"><!--register tab content-->
        <div id="pane_register" class="tab-pane active">
        </div>
     </div>
</div><!--/Tabbable-->

View Demo

Answer №3

I'm exploring the features of @Rohan Kumar.

Just making some css adjustments: follow the steps below

First Task: make sure to style the border-bottom to match the background as if it's a complete border

li.active {
    border-bottom:1px solid white;
}

Second Task: you can imitate @Rohan Kumar by setting the height, or adjust margin and padding to 0 and increase the padding for top and bottom if necessary.

check out the demo

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

When the modal is closed, the textarea data remains intact, while the model is cleared

My challenge involves a simple modal that includes a text area. The issue I am facing is resetting the data of the textarea. Below is the modal code: <div class="modal fade" ng-controller="MyCtrl"> <div class="modal-dialog"> <d ...

Refresh the data in the DataTables table using a fragment

Currently, I am attempting to reload a fragment using ajax. However, after the reload, my event select and row count do not function properly. It seems that the default configuration is not behaving as expected: @PostMapping("/admin/add") ...

Tips for selecting a secondary or even tertiary ancestor in a Sass project

Check out this piece of HTML code: <body> <div> <li class="more">hello <ul class="hello"> <li>hello</li> <li>hello</li> ...

jQuery hover functionality ceases to function following a seamless AJAX request

I have a hover event in my code to display one div and an ajax function to update the content of that specific div. However, after the div is updated with the ajax request, the hover event stops working. I suspect it may be due to the DOM not being able to ...

JQuery Polaroid Gallery Viewer

Hey there, I could use a bit of assistance. While I have a natural knack for design, coding isn't exactly my strong suit. I've been exploring this jquery plugin to incorporate some dynamic elements into my website. You can find the source link h ...

Looking to adjust the height of a foreignObject element within an SVG?

Looking to dynamically change the height of a foreignObject within an SVG, while also needing HTML elements inside it (working with ngx-graph). <foreignObject x="1" y="1" width="335" [height]="foreignObjHeight(node.Dat ...

mobile-friendly sticky footer

Currently working on a website project utilizing Bootstrap 3 (http://www.patrickmanser.ch/fnws) and I am trying to implement a sticky footer. After adapting the code snippets from Bootstrap 3 examples according to my specifications, everything seems to fun ...

Step-by-step guide on transferring an HTML5 sqlite result set to a server using AJAX

Imagine I have a scenario where I receive a result set as shown below: db.transaction( function(transaction) { transaction.executeSql( 'SELECT col1, col2, col3 FROM table;', [],function(transaction, result){ //need to find a ...

Is there a way to send a preexisting JSON object to an OPTION in jQuery or JavaScript?

What is the best way to pass a preexisting JSON as a data value in an HTML option tag? I am aware that I can manually pass individual variables like this: <option data-value='{"name":"rajiv","age":"40"}'>a</option> However, if I ha ...

My div remains stationary despite keyframes

I've been attempting to create a div that moves up and down using CSS3, but unfortunately it's not working properly. <div class="globo"></div> @-webkit-keyframes mover { 0%, 100% { top: 0%;} 50% { top: 5%; } } @-moz-keyframe ...

Set the color of the text in the Material UI pagination component to a subtle shade

I would like to customize the color of the text in Material UI's pagination component. Specifically, I want the action button to be white and the text portion to be grey, similar to the left action arrow in the image below. Is there a way for me to ac ...

Set an ID value to a variable in jQuery Mobile

Hey there! I'm trying to figure out how to assign latitude and longitude values to a variable in my code so I can pass them by appending it to the url. For example, page.html?cords=[varname] The current code snippet that displays the coordinates is a ...

Adjust the dimensions of the MaterialUI Switch component manually

Struggling to resize a Material-UI Switch as the default size isn't suitable. Managed to increase the size, but now the behavior isn't ideal. It looks fine in its default state: However, when changing its state, it loses style: Unable to figu ...

Instructions on making a Popup appear after a specified duration of mouse inactivity on a webpage

Hello, I am new to web development and could use some guidance on creating a popup window for users to enter their username and contact number. It should be able to store this information in a database and activate after the user has been idle for about 10 ...

Issues with retrieving information between AJAX and PHP (and vice versa)

I have a script that sends the value of a text input from an HTML form to emailform.php. This PHP file then adds the data to a .txt file. The issue I'm facing is setting the value of $email in the PHP file to match that of the HTML input field. Curren ...

Issues arise when incorporating background images with bootstrap 3

Currently working on designing a responsive layout for an online clothing store using Bootstrap 3. One of the requirements is to use background images inline styles for product containers. However, facing difficulty styling the containers and images to ach ...

Unable to locate the value property of a null object

I'm currently working on creating a Shopping Cart using HTML, CSS, JavaScript, and JQuery. The idea is that when you click "Add to Cart" for the orange item, most of the HTML elements will disappear, leaving only the table displaying the Shopping Cart ...

disabling a submit button

I am new to coding and need help disabling a button on document load. Can someone assist me with this? Here is my current code snippet: $(document).ready(function() { setTimeout("check_user()", 250); }); Your guidance is greatly appreciated! ...

Dynamically loading Ember templates with asynchronous requests

I need a way to dynamically load HTML content from another file using the code below: App.MainView = Ember.View.extend({ template:function(){ $.ajax({ url: 'views/main.html', dataType: 'text', async: false, ...

When the browser is refreshed, jQuery will automatically scroll the window down

I created a div that matches the height and width of the window to simulate a "home screen." When scrolling down to view the content, everything works fine. However, after refreshing the browser, it automatically scrolls back to where you were before. I wa ...