I need to show not more than 3 li elements in a ul that can have N li elements. If the ul increase by more than 3 elements, I want to put a scroll.
I seacrhed in Google without an easy solution.
It works fine with this code, but I want to make it fixed to the amount of elements.
#ul_notas_lesion{
max-height: 500px;
overflow-y: scroll;
}
Do I need something with Javascript?
This is my code:
<div class="x_content">
<br />
<ul class="list-unstyled timeline">
<li>
<div class="block">
<div class="tags">
<a href="" class="tag">
<span>Entertainment</span>
</a>
</div>
<div class="block_content">
<h2 class="title">
<a>Who Needs Sundance When You’ve Got Crowdfunding?</a>
</h2>
<div class="byline">
<span>13 hours ago</span> by <a>Jane Smith</a>
</div>
<p class="excerpt">Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they’d pay to Fast-forward and… <a>Read More</a>
</p>
</div>
</div>
</li>
<li>
<div class="block">
<div class="tags">
<a href="" class="tag">
<span>Entertainment</span>
</a>
</div>
<div class="block_content">
<h2 class="title">
<a>Who Needs Sundance When You’ve Got Crowdfunding?</a>
</h2>
<div class="byline">
<span>13 hours ago</span> by <a>Jane Smith</a>
</div>
<p class="excerpt">Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they’d pay to Fast-forward and… <a>Read More</a>
</p>
</div>
</div>
</li>
<li>
<div class="block">
<div class="tags">
<a href="" class="tag">
<span>Entertainment</span>
</a>
</div>
<div class="block_content">
<h2 class="title">
<a>Who Needs Sundance When You’ve Got Crowdfunding?</a>
</h2>
<div class="byline">
<span>13 hours ago</span> by <a>Jane Smith</a>
</div>
<p class="excerpt">Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they’d pay to Fast-forward and… <a>Read More</a>
</p>
</div>
</div>
</li>
</ul>
<div class="row justify-content-md-center">
<div class="col-12 col-lg-6">
<button type="button" class="btn btn-outline-primary mt-3 btn-gray btn-block btn-gray" data-toggle="modal" data-target="#modal_Photo_Upload">Agregar Nota</button>
</div>
</div>
</div>
Use JS to do it dynamically
var list = document.querySelector(".list");
var li = document.querySelectorAll(".list li:nth-child(-n+3)");
var height = 0;
li.forEach((x)=> {
height += x.offsetHeight;
});
list.style.maxHeight = height + "px";
div {
height: 80px;
}
.list{
overflow-y:auto;
}
<ul class="list">
<li>
<div>bla bla</div>
</li>
<li>
<div>second</div>
</li>
<li>
<div> third</div>
</li>
<li>
<div>bla bla</div>
</li>
</ul>
Do i need something in Javascript?
No, you don't. At least not for a <ul> with regular height <li> elements.
Regular Height <li> elements
For a <ul> with regular height <li> elements, it will suffice to use:
an explicit height for <li>
an explicit max-height for <ul>
overflow-y: auto on <ul>
Working Example:
ul {
float: left;
margin-right: 12px;
padding: 0;
max-height: calc(38px * 3);
border: 1px solid rgb(255, 0, 0);
border-right: 2px solid rgb(255, 0, 0);
overflow-x: hidden;
overflow-y: auto;
}
li {
width: 90px;
height: 24px;
line-height: 24px;
margin: 0;
padding: 6px;
border: 1px solid rgb(255, 0, 0);
}
<ul>
<li>Item One</li>
</ul>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
</ul>
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Five</li>
</ul>
Irregular Height <li> elements
For a <ul> with irregular height <li> elements, you can count the elements with javascript and, if there are more than three, you can:
calculate the height of the first three <li> elements to derive a height value
apply that height value to a CSS Custom Property which represents the reference value for the max-height of the <ul>
Working Example:
const lists = document.getElementsByTagName('ul');
for (let list of lists) {
if (list.getElementsByTagName('li').length > 3) {
let listHeight = list.getElementsByTagName('li')[0].offsetHeight;
listHeight += list.getElementsByTagName('li')[1].offsetHeight;
listHeight += list.getElementsByTagName('li')[2].offsetHeight;
listHeight += 'px';
list.style.setProperty('--list-height', listHeight);
}
}
ul {
float: left;
margin: 0 12px 0 0;
padding: 0;
border: 1px solid rgb(255, 0, 0);
border-right: 2px solid rgb(255, 0, 0);
overflow-x: hidden;
overflow-y: auto;
--list-height: none;
max-height: var(--list-height);
}
li {
width: 90px;
line-height: 24px;
margin: 0;
padding: 6px;
border: 1px solid rgb(255, 0, 0);
list-style-type: none;
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<ul>
<li>Lorem ipsum dolor</li>
<li>sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
</ul>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>adipiscing</li>
<li>elit, sed do</li>
</ul>
<ul>
<li>Lorem</li>
<li>ipsum dolor sit amet, consectetur adipiscing</li>
<li>elit, sed do eiusmod tempor incididunt</li>
<li>ut labore</li>
</ul>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>consectetur</li>
<li>adipiscing elit, sed do</li>
<li>eiusmod tempor incididunt ut labore et dolore magna aliqua</li>
<li>Ut enim ad minim</li>
</ul>
Related
I have a window that can be opened by clicking a button using javascript. The window cannot be closed by clicking on the inside of the window, and the window can only be closed by clicking on the outside of the window. At present, I always grab e.target.className to judge whether the clicked element should close the window, but if there are hundreds of elements in a window, this method does not seem to be a good way. I would like to ask if there is a formal What's a good way to handle this need?
$('.click').on('click',function(e){
$('.dialog').toggle()
$(document).on('click',function(e){
if(e.target.className == 'confirm' || e.target.className == 'item' || e.target.className == 'text' || e.target.className == 'dialog_wrap' || e.target.className == 'dialog' || e.target.className == 'head' || e.target.className == 'title'){
$('.dialog').css('display','inline-block');
}
})
})
.click {
position: relative;
}
.click .dialog {
display: none;
width: 300px;
position: absolute;
background-color: yellow;
border: 1px solid #ccc;
}
.click .dialog li {
text-align: left;
}
.click .dialog .confirm {
margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="click">click
<div class="dialog">
<header class="head">
<h1 class="title">my is title</h1>
</header>
<ul class='dialog_wrap'>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<input type="button" value="confirm" class="confirm">
</ul>
</div>
</button>
Find whether the click was inside the .dialog with .closest. If it returns a .dialog element, the click was inside, so do nothing; otherwise, the click was outside or on the button, so you can close the dialog.
Also, you almost certainly don't want to add another click listener to the document every time .click is clicked; better to only add the listener once.
const dialog = $('.dialog');
$('.click').on('click', function(e) {
if (!e.target.closest('.dialog')) {
dialog.toggle();
}
e.stopPropagation();
});
$(document).on('click', function(e) {
dialog.hide();
});
.click {
position: relative;
}
.click .dialog {
display: none;
width: 300px;
position: absolute;
background-color: yellow;
border: 1px solid #ccc;
}
.click .dialog li {
text-align: left;
}
.click .dialog .confirm {
margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="click">click
<div class="dialog">
<header class="head">
<h1 class="title">my is title</h1>
</header>
<ul class='dialog_wrap'>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<input type="button" value="confirm" class="confirm">
</ul>
</div>
</button>
You can assign a body id when the click starts, and you can close the form when you click anywhere on the body.
I have scroll box in my website, i want to make it move using main scroll bar..
Here's my preview:
Here's my code html:
<div id="wrapper">
<section>
<div class="row">
<div class="col-md-6 service-one">
<h1 class="header-caption">Service One</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi perspiciatis sequi, autem, ea ratione praesentium et quis fugit.</p>
<ul>
<li>List One</li>
<li>List Two</li>
<li>List Three</li>
</ul>
</div>
<div class="col-md-6 service-one-img">
<div class="box-img">
<img src="img/service-img.png" alt="">
</div>
</div>
</div>
</section>
<section>
<div class="row">
<div class="col-md-6 service-one">
<h1 class="header-caption">Service One</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi perspiciatis sequi, autem, ea ratione praesentium et quis fugit.</p>
<ul>
<li>List One</li>
<li>List Two</li>
<li>List Three</li>
</ul>
</div>
<div class="col-md-6 service-one-img">
<div class="box-img">
<img src="img/service-img.png" alt="">
</div>
</div>
</div>
</section>
</div>
Here's my js:
<script>
$(function(){
$(document).scroll(function(){
$('#wrapper').stop().animate({
scrollTop : $(this).scrollTop()
});
});
});
</script>
and my css:
#wrapper {
height: 80vh;
width: 90%;
overflow-y: auto;
overflow-x: hidden;
background-color: yellow;
position: relative;
top: 100px;
margin: auto;
}
Do you guys know how to make it works? So my scroll box can move using main scroll bar..
I have tried to code like that, and still my scroll box move using their own scroll bar, not using main scroll bar..
you can just set the height of the wrapper to a larger one so that the content doesn't need to have their own scroll bar. The overflow-y:auto sets it into scroll because the height of the content is larger than the wrapper. If you want the height to just occupy the least amount of space you can use height:fit-content. You can read more about it here. You may want to remove the script first before trying this.
Edit: I read your comment. As far as I know you cannot edit the function of the main scroll bar so it is not possible for your target. What you can do though could be a lot more tedious to do. So you can have the wrapper set to position: absolute and z-index:0. Then you will have your 2 main content (above and below scrolling box) at z-index:1 and have it with margin:40vh 0. This doesn't work if you scroll with the main scroll bar, just when you scroll using mouse, mousepad, or mobile.
You need to remove height on your wrapper if you want to use your main scrollbar. What is your intention for giving it a height?
I'm working on tabs here multiple/nested tabs on the same page my code is working fine current class also added data-target attribute also working fine. The problem is on Click function might be I'm not targetting element properly. this children() I used because I have multiple/nested tabs on same page Can anyone suggest me what might be the issue here tabs are not changing click function not working properly
function atscTabs() {
$('.at-tabs').each(function(index, item) {
var tab_item = $(this).find('.at-tab__item');
var tab_item_title = $(this).find('.at-title__text');
var tab_content = $(this).find('.at-content__item');
tab_content.hide();
//adding data attribute
tab_item_title.each(function(idx, ele) {
$(this).attr('data-target', idx)
});
$(tab_item[0], tab_item_title[0]).addClass('current');
$(tab_content[0]).show();
console.log('test');
//Display current tab content
$(this).children('.at-tab-wrapper').children('.at-tab__item').click(function(ele) {
//debugger;
$(this).closest('.at-tabs').children('.at-tab-wrapper').children('.current').removeClass('current').children('.current').removeClass('current');
$(this).addClass('current');
$(this).find('.at-title__text').addClass('current');
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').hide();
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').eq(parseInt($(this).find('[data-target]').attr('data-target'))).show();
ele.stopPropagation();
});
});
}
atscTabs();
.at-tab__item.current {
padding: 10px 20px;
background-color: #3c98ff;
}
.at-tab-wrapper {
display: flex;
padding: 28px 0px;
}
.at-title__text {
text-decoration: none;
font-size: 18px;
color: black;
}
.current .at-title__text {
color: #fff;
}
.at-tab__item {
padding: 10px 20px;
margin: 0 10px;
background: #e1e1e1;
}
.at-content-wrapper {
font-size: 16px;
padding: 25px;
background: #e1e1e1;
}
hr {
height: 5px;
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="at-tabs-d0ea0f6" class="at-tabs at-tab-default " data-position="default">
<div>
<div class="at-tab-wrapper">
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #1</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #2</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #3</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
</div>
</div>
<div class="at-content-wrapper">
<div class="at-content__item">
<p>Tab Content dfdfd</p>
</div>
<div class="at-content__item">
<p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
<div class="at-content__item">
<p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
</div>
</div>
hi i fixed your click issue
function atscTabs() {
$('.at-tabs').each(function(index, item) {
var tab_item = $(this).find('.at-tab__item');
var tab_item_title = $(this).find('.at-title__text');
var tab_content = $(this).find('.at-content__item');
tab_content.hide();
//adding data attribute
tab_item_title.each(function(idx, ele) {
$(this).attr('data-target', idx)
});
$(tab_item[0], tab_item_title[0]).addClass('current');
$(tab_content[0]).show();
console.log('test');
//Display current tab content
$('.at-tab__item').click(function(ele) {
//debugger;
$('.at-tab__item').removeClass('current');
$(this).addClass('current');
$(this).find('.at-title__text').addClass('current');
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').hide();
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').eq(parseInt($(this).find('[data-target]').attr('data-target'))).show();
ele.stopPropagation();
});
});
}
atscTabs();
.at-tab__item.current {
padding: 10px 20px;
background-color: #3c98ff;
}
.at-tab-wrapper {
display: flex;
padding: 28px 0px;
}
.at-title__text {
text-decoration: none;
font-size: 18px;
color: black;
}
.current .at-title__text {
color: #fff;
}
.at-tab__item {
padding: 10px 20px;
margin: 0 10px;
background: #e1e1e1;
}
.at-content-wrapper {
font-size: 16px;
padding: 25px;
background: #e1e1e1;
}
hr {
height: 5px;
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="at-tabs-d0ea0f6" class="at-tabs at-tab-default " data-position="default">
<div>
<div class="at-tab-wrapper">
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #1</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #2</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #3</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
</div>
</div>
<div class="at-content-wrapper">
<div class="at-content__item">
<p>Tab Content dfdfd</p>
</div>
<div class="at-content__item">
<p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
<div class="at-content__item">
<p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
</div>
</div>
Using Fullpage.js I added a Bootstrap custom navbar inside section 1 for achieving a "our features effect" and when you click on a tab the text inside that section changes.
The Bootstrap code works but I want to set the navbar on the bottom on section 1, but it keeps adding itself to section 0.
What would be the best way to achieve this?
CSS:
#section0 {
background:url("images/vd48-main.jpg") center top no-repeat;
background-image: url("images/vd48-main.jpg");
background-position: fixed;
background-color: #000000;
}
#section1 {
background:url("images/vd48-main.jpg") center top no-repeat;
background-image: url("images/vd48-main.jpg");
background-position: fixed;
}
#section2 img{
margin: 20px 0 0 52px;
background-image: url(images/vd48-main.jpg);
padding: 30% 0 0 0;
}
#section3 img{
bottom: 0px;
position: absolute;
margin-left: -420px;
}
.intro p{
width: 50%;
margin: 0 auto;
font-size: 1.5em;
}
.twitter-share-button{
position: absolute;
z-index: 99;
right: 149px;
top: 9px;
}
.fp-tooltip{
color: #AAA;
}
#fp-nav span, .fp-slidesNav span{
border-color: #AAA;
}
#fp-nav li .active span, .fp-slidesNav .active span{
background: #AAA;
}
.nav-tabs{
overflow: hidden;
position: fixed;
bottom: 0;
width: 100%;
}
.bg-inverse{
z-index: 999;
}
HTML:
<ul id="menu">
<li data-menuanchor="firstPage">Visit Counter</li>
<li data-menuanchor="secondPage">Feature Image</li>
<li data-menuanchor="3rdPage">Big Image</li>
<li data-menuanchor="4thpage">Product Specs 1</li>
<li data-menuanchor="4thpage">Product Specs 2</li>
<li data-menuanchor="4thpage">Product Specs 3</li>
<li data-menuanchor="4thpage">Customer Care</li>
<li data-menuanchor="4thpage">Our App</li>
<li data-menuanchor="4thpage">Reservation/Contact</li>
</ul>
<div id="fullpage">
<!-- Section 0 -->
<div class="section" id="section0">
<h1>Van Dutch</h1>
<p>Visit Counter lorem ipsum </p>
</div>
<!--Section 1 -->
<div class="section" id="section1">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<div class="container">
<h2>Dynamic Tabs</h2>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
</div>
<!--Section 2 -->
<div class="section" id="section2">
<div class="intro">
<h1>Example</h1>
<p>HTML markup example to define 4 sections.</p>
<img src="imgs/example2.png" alt="example" />
</div>
</div>
<!--Section 3 -->
<div class="section" id="section3">
<div class="intro">
<h1>Working On Tablets</h1>
<p>
Designed to fit to different screen sizes as well as tablet and mobile devices.
<br /><br /><br /><br /><br /><br />
</p>
</div>
<img src="imgs/tablets.png" alt="tablets" />
</div>
<!--Left Sidebar -->
<div id="fp-nav" class="left" style="margin-top: -43.5px;">
<ul>
<li>
<span></span>
<div class="fp-tooltip left">fullPage.js</div>
</li>
<li>
<span></span>
<div class="fp-tooltip left">Powerful</div>
</li>
<li>
<span></span><div class="fp-tooltip left">Amazing</div>
</li>
<li>
<span></span><div class="fp-tooltip left">Simple</div>
</li>
</ul>
</div>
I managed to fix my issue using CSS.
#section1 .nav-tabs{
width: 100%;
position: absolute;
bottom: 0;
}
I'm trying to implement vertical tabs in my bootstrap website.
Here is the code:
HTML:
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-5">
<div class="tabs-left">
<ul class="nav nav-tabs">
<li class="active"><span class="glyphicon glyphicon-heart"></span></li>
<li><span class="glyphicon glyphicon-star"></span></li>
<li><span class="glyphicon glyphicon-headphones"></span></li>
<li><span class="glyphicon glyphicon-time"></span></li>
<li><span class="glyphicon glyphicon-calendar"></span></li>
<li><span class="glyphicon glyphicon-cog"></span></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="a">
<h3>Who do you Love?</h3>
<ul class="list-group pull-left">
<li class="list-group-item">
<h4>Jen <span class="badge pull-right">100%</span></h4>
</li>
<li class="list-group-item">
<h4>Dezi <span class="badge pull-right">100%</span></h4>
</li>
<li class="list-group-item">
<h4>Eli <span class="badge pull-right">100%</span></h4>
</li>
<li class="list-group-item">
<h4>Mojo <span class="badge pull-right">83%</span></h4>
</li>
<li class="list-group-item">
<h4>Myself <span class="badge pull-right">100%</span></h4>
</li>
</ul>
</div>
<div class="tab-pane" id="b">
<h3>What's your Favorite?</h3>
<ul class="list-group pull-left">
<li class="list-group-item">
<h4>Crystals <span class="badge pull-right">100%</span></h4>
</li>
<li class="list-group-item">
<h4>Healing <span class="badge pull-right">90%</span></h4>
</li>
<li class="list-group-item">
<h4>Exploring <span class="badge pull-right">78%</span></h4>
</li>
<li class="list-group-item">
<h4>QiGong <span class="badge pull-right">83%</span></h4>
</li>
<li class="list-group-item">
<h4>Myself <span class="badge pull-right">100%</span>
</h4></li>
</ul>
</div>
<div class="tab-pane" id="c">CCCCThirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
<div class="tab-pane" id="d">DDDDDSecondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.</div>
<div class="tab-pane" id="e">EEEEEThirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
<div class="tab-pane" id="f">FFFFFFThirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
</div><!-- /tab-content -->
</div><!-- /tabbable -->
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /container -->
CSS
body {
background-color: #ddd;
}
h3 {
margin-top: 0;
}
.badge {
background-color: #777;
}
.tabs-left { margin-top: 3rem; }
.nav-tabs {
float: left;
border-bottom: 0;
li {
float: none;
margin: 0;
a {
margin-right: 0;
border: 0;
background-color: #333;
&:hover {
background-color: #444;
}
}
}
.glyphicon {
color: #fff;
}
.active .glyphicon {
color: #333;
}
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
border:0;
}
.tab-content {
margin-left: 45px;
.tab-pane {
display: none;
background-color: #fff;
padding: 1.6rem;
overflow-y: auto;
}
.active { display: block; }
}
.list-group {
width: 100%;
.list-group-item {
height: 50px;
h4, span {
line-height: 11px;
}
}
}
Javascript:
var tabsFn = (function() {
function init() {
setHeight();
}
function setHeight() {
var $tabPane = $('.tab-pane'),
tabsHeight = $('.nav-tabs').height();
$tabPane.css({
height: tabsHeight
});
}
$(init);
})();
Its implementation is as in this link.
But when I try it in my website, I get a weird result like this:
Why is it happening?