What is the best way to widen each tab so they fill up the entire width of the content block?

As a newcomer to both programming and this website, I've been exploring various codes for creating vertical and horizontal tabs. I have a specific query about this particular example found at https://jsfiddle.net/eu81273/812ehkyf/:

My goal is to adjust the width of the tabs so that they span the entire width of the content block below them. However, my attempts to achieve this by adding 'width: 200px;' in the '.tab' or '.tab label' sections have been unsuccessful. What changes should I make to achieve this desired layout?

.tabs {
  position: relative;   
  min-height: 200px; /* This part sucks */
  clear: both;
  margin: 35px 0 25px;
  background: white;
}

.tab {
  float: left;       
}

.tab label {
   background: #eee; 
   padding: 10px; 
   border: 1px solid #ccc; 
   margin-left: -1px; 
   position: relative;
   left: 1px; 
   top: -29px;
   -webkit-transition: background-color .17s linear;
}

I would greatly appreciate a detailed explanation of what changes need to be made in order for me to fully grasp the solution. Although I have managed to find a method using JavaScript, I am curious whether achieving the same result using only CSS and HTML is possible.

htmlcsstabswidth

Answer №1

Your body padding seems to be set too high.

It might be a good idea to decrease it.

body {
   background: #999;  
   padding: 20px 2px; 
}

.tabs {
  position: relative;   
  min-height: 200px; /* This part sucks */
  clear: both;
  margin: 35px 0 25px;
  background: white;
  width:100%;
}

Answer №2

Adjust the width of your tabs to -33% 

  function openTab(tabId) {
        var i;
        var x = document.getElementsByClassName("tab");
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        document.getElementById(tabId).style.display = "block";
    }
 
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>

<div class="w3-bar w3-black">
  <button class="w3-bar-item w3-button" onclick="openTab('TabA')">TabA</button>
  <button class="w3-bar-item w3-button" onclick="openTab('TabB')">TabB</button>
  <button class="w3-bar-item w3-button" onclick="openTab('TabC')">TabC</button>
</div>

<div id="TabA" class="w3-container tab">
 <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label for="tab-1">Tab One</label>
       
       <div class="content">
           <p>Stuff for Tab One</p>
       </div> 
</div>

<div id="TabB" class="w3-container tab" style="display:none">
   <input type="radio" id="tab-2" name="tab-group-1">
       <label for="tab-2">Tab Two</label>
       
       <div class="content">
           <p>Stuff for Tab Two</p>
           
           <img src="http://placekitten.com/200/100">
       </div> 
</div>

<div id="TabC" class="w3-container tab" style="display:none">
 <input type="radio" id="tab-3" name="tab-group-1">
       <label for="tab-3">Tab Three</label>
     
       <div class="content">
           <p>Stuff for Tab Three</p>
           
           <img src="http://placedog.com/200/100">
       </div> 
</div>
<style> .w3-bar .w3-button{
    width:33.3%;
    }</style>

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 is the best way to ensure the snackbar occupies the full width on smaller screens?

After reviewing this commit: https://github.com/callemall/material-ui/commit/11695dcfa01e802797115d42c6d3d82d7657b6ab#diff-e9014062cd8e3b4344ab619966f35ef2 In the latest update, the snackbar no longer expands to 100% width on mobile screens. Can someone p ...

cssreactjsmaterial-uisnackbar

IE presenting problems with JQuery content loaded via Ajax

I operate a website that showcases various products, each with a corresponding link to a fancybox displaying detailed information about the product (detailed.php file). <a class="fancy fancy'.$_GET['type'].'" href="detail.php?id=&ap ...

javascriptphpjqueryhtmlajax

How can the default text color be adjusted in NSAttributedString when initialized with HTML dark mode?

During the process of converting my existing app to dark mode, I came across an instance where I needed to initialize a UITextView with an NSAttributedString for displaying some legal text from the app store. While everything looked good in light mode, swi ...

htmliosswiftnsattributedstring

The checkboxes seem to be malfunctioning following an ajax request

I've been attempting to utilize ajax to load data, but for some reason the checkboxes aren't functioning. Below is the HTML I'm trying to load via ajax: <div class="mt-checkbox-list" > <?php foreach($product_offerings as $row){ $c ...

javascriptphphtmlajaxcodeigniter

Transform Java code into HTML format for a visually appealing display similar to that in an Integrated Development Environment

Is there a way to showcase my Java code on an HTML page to resemble an Integrated Development Environment (IDE)? I've been searching for existing solutions but haven't found anything satisfactory yet. Ideally, I am looking for something similar t ...

javahtmlcssformattingide

What is the best way to enable my search function to filter out specific items from a table?

Currently, I have created a table populated with data fetched from a JSON file. Now, my focus is on implementing a search functionality that filters out items based on user input and displays only those table rows matching the search criteria. The code sni ...

javascripthtmljquerycss

What is the best way to utilize justify-content or align-self to perfectly center this?

Despite my efforts to center it, I'm struggling to do so. I've experimented with justify-content and align-items for each row and col class, but unfortunately, nothing seems to be effective. In the breakpoints (md, lg), I really need the 4 lorem ...

htmlbootstrap-4

Creating a FusionCharts time series with a sleek transparent background

Currently, I am attempting to achieve a transparent background for a time-series chart created with FusionCharts. Despite trying the standard attributes that usually work on other chart types and even hardcoding a background color, none of these seem to af ...

cssreactjssvgfusioncharts

Issue encountered with JavaScript function within TypeScript file connected to HTML code

I am currently working on a simple SharePoint web part and encountering an issue with using a function from another module file in my main file. Snippet from the JSFunctions.module.js file (where I define my function): function getApi(){ [my code]... }; ...

javascripthtmltypescript

Here's a quick tip for adding a new line in your input message in Angular - just press Shift +

I need help with my chat box input field. I want it to be able to handle new line inputs similar to Facebook's chatbox. Here is a screenshot of My Chat Box: [1]: https://i.sstatic.net/NeG7d.png My HTML code for the input field: <form class=" ...

htmlangularinputtextchat

Adaptable Design for Smartphones

Currently in the process of creating a website for my brother with Joomla 3.4 and Bootstrap. This marks my first venture into building a responsive site, so I'm seeking guidance on essential elements to include in my CSS such as font sizes in specific ...

csstwitter-bootstrapmedia-queriesjoomla3.0

Content that is dynamically generated by a database

I have been working on creating a unique wall feature for my website, inspired by Facebook. My aim is to allow users to submit form data and have it validated before storing it in a database. Additionally, I want this stored data to be displayed in a desig ...

javascriptphpjqueryhtmlfacebook

Changing the border of an iframe element using jQuery or Javascript from within the iframe itself

Is it possible to set the border of an iframe to zero from within the iframe itself using JavaScript or jQuery? Any guidance on how this can be achieved would be greatly appreciated. Thank you! ...

javascriptjqueryhtml

How can you utilize jQuery to eliminate specific select field values from the DOM prior to submission?

I am currently working on a Squarespace form that utilizes jQuery to show/hide specific fields in order to create a customized form using the show(); and hide(); functions. $(".option2 select").hide(); The issue I am facing is that simply hiding the fiel ...

jqueryhtmlcsssquarespace

Struggling with Angular 8: Attempting to utilize form data for string formatting in a service, but encountering persistent page reloading and failure to reassign variables from form values

My goal is to extract the zip code from a form, create a URL based on that zip code, make an API call using that URL, and then display the JSON data on the screen. I have successfully generated the URL and retrieved the necessary data. However, I am strug ...

javascripthtmlangulardom

The React style background property for CSS styling

Is there a way to apply the css property background inline in react? I attempted to pass the following object without success: let style = { background: `linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) ...

cssreactjs

Display an HTML checkbox with intricate design features

I have a simple question - how can I print a green checkbox with a white check mark (Ctrl + P) without it turning black and white? This solution currently works with Bootstrap 4.0.0, but needs to be compatible with bootstrap 3.3.7. I've managed to cr ...

htmlcss

Avoid the expansion of line decorations in Monaco editor

I am looking to create a Monaco editor line decoration that remains contained within its original position when I press enter after the decoration. For instance, in a React environment, if I set up a Monaco editor and add a line decoration using the code ...

javascripthtmlreactjstypescriptmonaco-editor

Using JavaScript, create a set of buttons within a div element and implement

$(document).ready(function() { $('#b1').click(function() { $('#uch').toggle("slow"); }); $('#b2').click(function() { $('#uch2').toggle("slow"); }) }) Although I'm not a program ...

javascriptjqueryhtmlcssfunction

Unable to get 100% height to work properly in HTML5 ASP.net because of the DOCTYPE

I'm currently working on creating an Asp.net website with a unique single-page portfolio style for the homepage. Each project or section should be 100% height of the viewport, stacked underneath each other to make use of anchor tags. However, I'm ...

cssasp.nethtmlheight