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

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

What method does jQuery use to encode the arguments object in the .get() function?

Here is the code snippet: requestRefresh("arg1", "arg2"); function requestRefresh( listofnames ) { var args = { name: [], action: "ajax.refresh" }; for (var i = 0; i < arguments.length; ++i) { args.name.push(argum ...

jquery

Generate additional tabs

Currently, I am in the process of working on a project where I have a bar that will contain dynamically filled tabs. My goal is to include a (+) image that becomes visible when the bar is full. When a user clicks on this image, the remaining tabs should ap ...

jqueryhtmlcss

Convert a single JSON array into two separate jquery arrays

I'm currently working on extracting data from a JSON file using my jQuery script. Below is my jQuery code snippet: $.ajax({ type: "GET", url: "settings.json", dataType: "json", cache: false, error: function(){ $('.sl ...

jqueryarraysajaxjson

Tips for navigating the HTML DOM without using window.scrollBy(x, y) (specifically for scrolling within an element)

Desiring to scroll down along with my selected document, I experimented with the following code. window.scrollTo(x, y); const body = document.getElementsByClassName("body")[0]; body.scrollTo(x, y); However, there are instances where it returns "undefined ...

javascripthtmlcssseleniumdom

Issues with displaying or hiding a DIV using javascript - popup box unresponsive

I am working with this ASPX code: <div id="IsAccountingOk" class="modalDialog"> <div> <a href="#close" title="Close" class="close">X</a><br /> <asp:Label ID="lblIsAccountingOkHeader" runat="server" Text ...

javascriptc#htmlcssasp.net

construct a table utilizing JSON information

If I have data returned from an ajax call that needs to be processed, a table like the following needs to be created: ID NAME Object Type ============================================== 1 SWT-F1-S32-RTR-1 Network Switch 2 ...

javascriptjqueryajax

Whenever I try to execute watir-webdriver, I notice that the CSS file is

Currently, I am in the process of learning how to utilize watir-webdriver in ruby for my QA tasks. However, a recurring issue arises when running my watir-webdriver scripts on certain sites - some pages have missing CSS Files. This particular problem seems ...

cssrubyseleniumwatir

What is the most effective way to toggle the visibility of these rows within a table?

Initially, my plan was to incorporate collapsible rows into my table. However, considering the spacing and margins, I realized that approach wouldn't work. After some thought, I concluded that all I really need is a way to hide and show information on ...

jqueryhtmlcsshtml-tableshow-hide

Guide to clearing input fields and displaying an error message through Ajax when the requested data is not found within a MySQL database

I am looking for a way to clear the textboxes and display an alert message if the data is not found in the MySQL table. I encountered an issue when using type: 'json' as removing it makes the alert work, but then the data from the MySQL table doe ...

javascriptphpjquerymysqlajax

Ways to Randomly Flip Divs

I have developed an application where all divs flip vertically on hover. I am looking for a way to make the flipping random without requiring a hover. Any ideas on how to achieve this? .vertical.flip-container { position: relative; float: left; ma ...

javascriptjqueryhtmlcss

Ensuring that the initial column of a table remains in place while scrolling horizontally

Thank you for taking the time to read this. I am currently working on a table within a div container (div0) where the data is dynamically generated, resulting in a table with unpredictable height and width. The outer div allows for both vertical and horizo ...

javascriptjquerycsshtml

Tips for arranging divs in CSS grid with grid-template-areas technique

I am attempting to organize similar groups of elements in a grid: #grid { position: absolute; left: 135px; top: 158px; width: 1080px; height: 1035px; display: grid; grid-template-rows: 99px 1fr 1fr; grid-template-column ...

htmlcss

Discover the class name within the AJAX content

I have a unique ajax response generated by a server-sided script: <div class="item-title3">Testname</div> <div class="item-level">120</div> <div class="item-binding">40</div> <div class=& ...

jqueryajax

Tips for updating the chosen value with jquery or javascript

I am facing a situation where I need to change the selected option in a dropdown menu using a function triggered onClick later in the application. <select id="myselect"> <option value=aa>aa</option> <option value=bb>bb</option&g ...

javascriptjqueryhtml

Convert JSON data to a PHP variable

When I try to pass some JSON data to a PHP file, the variables in the PHP code end up empty. I suspect it's due to a small syntax error, but I can't pinpoint the exact cause. Any assistance would be highly appreciated. JAVASCRIPT if(score >= ...

phpjqueryajax

Effective Methods for Implementing CSS Variables within nth-child Selectors

Objective: To pass a variable successfully as a parameter to nth-child. The task is to make the third line turn green in the example provided. Dilemma: Currently, the parameter is being disregarded as a variable. Inquiry: Is achieving this possible? If s ...

css

What is the method for utilizing the variable from express in HTML?

Currently, I am working with Express and have the following code: app.get('/', requiresAuth(), (req, res) => res.sendFile('/db_auth_site/index.html', { title: 'Hey', message: 'Hello there!' }) ); I am trying ...

htmlnode.jsexpressnodejs-server

Seeking specific parameter in a JSON array using JavaScript: A guide

Currently, I am working on a project that involves retrieving Facebook news feed data using the graph API. Upon receiving the JSON object, I display it on the page. The "Likes" section is presented as an array of JSON objects like this: data.likes: { ...

javascriptjqueryarraysjsonfacebook-graph-api

Obtain the radio button value along with the values of all other input fields

$('.cinput').each(function(){ console.log($(this).val()); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type='radio' name='radiox' class='cinput' v ...

jqueryhtml

What is the method for achieving the equivalent effect of "background-size: cover" on an <img>?

I am looking to ensure that an <img> has the smallest possible size without any empty spaces inside a div, while also being perfectly centered both horizontally and vertically. The image size may vary. To better illustrate, here is an example: http: ...

javascriptjqueryhtmlcss