Here is my example - the css is what I tried.
.active::before li {
background: yellow !important;
}
<div ng-app="myApp" ng-controller="myCtrl">
<div class="breadcrumb">
<ul class="nav nav-tabs">
<li class="active">Submitted</li>
<li ng-class="{'disabled':dataStatus=='submitted'}">Pending Approval</li>
<li ng-class="{'disabled':dataStatus=='submitted' || dataStatus=='pending'}">Work In Progress</li>
<li ng-class="{'disabled':dataStatus=='submitted' || dataStatus=='pending' || dataStatus=='inprogress'}">Complete</li>
</ul>
</div>
<div class="tab-content" style="margin:5%;">
<div class="tab-pane active" id="submitted" ng-class="{'active':dataStatus=='submitted'}">
Submitted data will be displayed here....
</div>
<div class="tab-pane" id="pendingApproval" ng-class="{'active':dataStatus=='pending'}">
Pending Approvals will be displayed here....
</div>
<div class="tab-pane" id="workInProgress" ng-class="{'active':dataStatus=='inprogress'}">
In Progress data will be displayed here....
</div>
<div class="tab-pane" id="complete" ng-class="{'active':dataStatus=='completed'}">
Completed data will be displayed here....
</div>
</div>
</div>
here I just want to add background color for the tabs which is available before the activated tab(i.e., A tab which has active class)
fiddle: https://jsfiddle.net/9xf5neyz/30/
Solution is here
Just add this css in your code.
.nav-tabs > li:not(.active) a {
background: yellow;
}
Try this instead in your css.
li.active>a{
background:yellow;
}
Related
I'm trying to figure out the horizontal version of https://stackoverflow.com/a/25298473/7835535. Instead of having the content scroll vertically, I want the content to scroll horizontally.
Fiddle taken from the original post
<div class="container">
<div class="row">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Title</h3>
<span class="pull-right">
<ul class="nav panel-tabs">
<li class="active">Tab 1</li>
</ul>
</span>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane active" id="test">
CONTENT
</div>
</div>
</div>
</div>
</div>
Here You go Fiddle: http://jsfiddle.net/51n56p94/
You need to add this css
.tab-pane{
width:1000px;
}
.tab-content{
overflow-x:scroll;
}
I would like to have a list of show/hide links that show divs occupying the same space, and able to be responsive.
My list appear on left and show content on right.
The idea is that when I click on Link 1, then content #1 will show up, and when I click on Link 2, then content #1 will disappear and content #2 will take it's place.
When loading the page on small and mobile screen, I would like to get content #1 showing up under Link 1 when clicking on it, and content 1 pushs link 2 down. And so on, content #2 showing up under Link 2, and pushs link 3 down…
I am working on Wordpress and Bootstrap, using my own theme. I don't reject to use .php file to achieve that. So far, I have tried this in html, css and js. Since I got stuck trying to get this reponsive, I am open to get a diffent method if necessary. But I would like to be able to fill the content and links name from Wordpress.
Here is my initial code
$(function () {
$("a[id^='link']").click(function (e) {
e.preventDefault();
var index = this.id.replace("link", "");
$(".panel").hide();
$("#panel" + index).show();
});
});
.side-nav {
font-size: calc(18px + 3vw);
}
.panel {
font-size: calc(18px + 1vw);
display: none;
position:absolute;
top: 0px;
right: 0px;
width: 70%;
}
<div id="side-nav-container">
<div class="side-nav">
<a id="link1 " href="# ">Link 1</a>
<a id="link2 " href="# ">Link 2>/a>
</div>
<div id="side-nav-content">
<div id="panel1 " class="panel ">Content 1</div>
<div id="panel2 " class="panel ">Content 2</div>
</div>
</div>
new code
$('#myTabs a').click(function(e) {
e.preventDefault()
$(this).tab('show')
})
.tab-content {
font-size: calc(12px + .99vw);
}
.nav-tab-list {
font-size: calc(18px + 1vw);
}
<div class="container">
<div class="row">
<div class="nav-tab-list col-lg-6 col-md-5 col-xs-12">
<ul class="nav nav-stacked" role="tablist">
<li class="active" role="presentation"><a role="tab" href="#home" aria-controls="home" data-toggle="tab">Home</a></li>
<li role="presentation"><a role="tab" href="#profile" aria-controls="profile" data-toggle="tab">Profile</a></li>
<li role="presentation"><a role="tab" href="#messages" aria-controls="messages" data-toggle="tab">Messages</a></li>
<li role="presentation"><a role="tab" href="#settings" aria-controls="settings" data-toggle="tab">Settings</a></li>
</ul>
</div>
<div class="col-lg-6 col-md-5 col-xs-12">
<div class="tab-content">
<div id="home" class="tab-pane active" role="tabpanel">Bonjour</div>
<div id="profile" class="tab-pane" role="tabpanel">Hello</div>
<div id="messages" class="tab-pane" role="tabpanel">Au revoir</div>
<div id="settings" class="tab-pane" role="tabpanel">Goodbye</div>
</div>
</div>
</div>
</div>
I have a tab container into my pages. I am trying to change the background of each tab pane when I click those tab links. I can change the background for each tab pane but my background image is not adjust into tab pane. I can not view full image because it becomes larger, I want to fit full image into the background. plz help
Here is my markup & css:
#import url('//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css');
.hotel-info-bg
{
background: url('../img/content/slide_bg_hotel-info.jpg');
}
<ul class="nav nav-tabs custom-tabs" role="tablist">
<li class="active">info
</li>
<li>amenities
</li>
<li>pets welcome
</li>
<li>behind the scene
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in hotel-info-bg" id="info">
<p>info</p>
</div>
<div class="tab-pane fade" id="amenities">
<p>amenities</p>
</div>
<div class="tab-pane fade" id="pets">
<p>pets welcome</p>
</div>
<div class="tab-pane fade" id="scene">
<p>behind the scene</p>
</div>
</div>
Here is s demo link: http://www.bootply.com/7OJqr7zXcn
Try this hope it will helps you -
.hotel-info-bg{
background:url("http://dummyimage.com/3375x2000/ebb0eb/f0f7fa.jpg") no-repeat center;
background-size: 100%;
height: 1200px;
}
I have a page developed using twitter bootstrap version 2. I have a row that is divided into span8 and span4. Span8 has some image slider (built with jquery) and span4 has just some links. When the page loads, all the links in the span 4 is displayed first and then when the image loads, the text gets pushed to right. Is there a way to prevent this shift/jump effect?
<div class="row-fluid">
<div class="span8" id="imgDiv">
<!-- Image slider goes here -->
</div>
<div class="span4" id="linksDiv">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</div>
</div>
I have devised the following solution. Here's a JSFiddle: http://jsfiddle.net/sJq6y/
HTML
<div class="container">
<div class="row-fluid">
<div class="span8">
<div class="imgDiv">
<h1> Image slider goes here </h1>
</div>
</div>
<div class="span4 linksDiv">
<ul>
<li>Link One
</li>
<li>Link Two
</li>
<li>Link Duo
</li>
</ul>
</div>
</div>
</div>
CSS
.linksDiv ul {
list-style:none;
background-color:lightgrey;
width:90px;
height:90px;
padding:10px;
}
.imgDiv h1 {
text-align:center;
color:tomato;
}
Images
Probably due to styling coming from #imgDiv and #linksDiv.
Would this option work for you?
<div class="row-fluid">
<div class="span8">
<div id="imgDiv">
<!-- Image slider goes here -->
</div> <!-- end #imgDiv -->
</div>
<div class="span4">
<div id="linksDiv">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</div> <!-- end #linksDiv -->
</div>
</div>
Good luck!
I want to create fluid layout using LESS and without using Bootstrap grid clasess like .span6 on html code. How can I do this?
When I wrote without LESS I create layout like this:
<div class="container-fluid">
<div class="row-fluid" id="header">
<div class="span4 block">
<h1 class="title">Sample Site</h1>
<h2 class="sub-title">Powered by Twitter Bootstrap</h2>
</div>
<div class="span6 block">
<ul class="nav nav-pills">
<li class="active">Home</li>
<li>Pages</li>
<li>Typography</li>
<li>UI</li>
<li>Calendar</li>
<li>Tables</li>
</ul>
</div>
<div class="span2 block">
<div class="btn-group open">
<button class="btn">Dropdown</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Change password</li>
<li>Log in with another user</li>
<li>Change token</li>
<li>Log out</li>
</ul>
</div>
</div>
</div>
<div class="row-fluid" id="slider">
<div class="span12 block">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
Now, my layout looks next way:
<div id="wrap">
<div id="header">
<div id="logo">SiteLogo</div>
<div id="top-menu">
<ul>
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
<div id="logout">
Logout
</div>
</div>
<div id="slider">
and what I should write on my .less file if I want to make div#wrap -> .container-fluid,
div#header -> .row-fluid, div#logo -> .span4, div#top-menu -> .span6, div#logout -> .span2
without writting this clasess on html code?
First, this wouldn't really be semantic, at least, no more so.
The semantic form of <div id="top-menu"> is <nav> or <nav id="top">
The semantic form of <div id="header"> is <header>
In any case, there are instructions on doing this here:
Please stop embedding Bootstrap classes in your HTML
Honestly, though, it's not as simple as the author makes it look. Just because you have a <nav> inherit the styles of .nav from Bootstrap doesn't mean its children will inherit inherited styles as well.
So if I define a style from .nav ul, a <ul> element will not receive this style if it's in a <nav>.
This worked for me.. posting in case it helps anyone else.
Mixins for semantic fluid grid:
.makeFluidRow(){
width: 100%;
.clearfix();
}
.makeFluidCol(#span:1,#offset:0){
float: left;
#grid > .fluid .span(#span);
#grid > .fluid .offset(#offset);
&:first-child {
margin-left: 0;
.offsetFirstChild(#offset);
}
}
Use them just like the non-fluid mixins:
div#header{
.makeFluidRow();
div#logo {
.makeFluidCol(4); //Spans 4 cols
}
div#top-menu {
.makeFluidCol(6); //Spans 6 cols
}
div#logout {
.makeFluidCol(2); //Spans 2 cols
//Or you could have span1, offset1 using .makeFluidCol(1,1);
}
}