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;
}
Related
I'm trying to customise a tab menu in bootstrap so that when a link is selected (active) it is highlighted in a coloured box. I can't seem to target the active element in css. Can someone advice how I need to do this? The html is as follows:
<div class="col col-md-3">
<div class="nav flex-column nav-pills" id="servicesTab" aria-orientation="vertical">
<a class="nav-link nav-pill-custom active" id="v-pills-orientation-tab" data-toggle="pill" href="#v-pills-orientation" role="tab" aria-controls="v-pills-orientation" aria-selected="true">Orientation</a>
<a class="nav-link nav-pill-custom" id="v-pills-education-tab" data-toggle="pill" href="#v-pills-education" role="tab" aria-controls="v-pills-education" aria-selected="false">Education</a>
<a class="nav-link nav-pill-custom" id="v-pills-investigation-tab" data-toggle="pill" href="#v-pills-investigation" role="tab" aria-controls="v-pills-investigation" aria-selected="false">Investigation</a>
</div>
</div>
These link to some tabs on the same page:
<div class="col col-md-9">
<div class="tab-content" id="v-pills-tabContent">
<!-- ORIENTATION TAB-->
<div class="tab-pane fade show active" id="v-pills-orientation" role="tabpanel" aria-labelledby="v-pills-orientation-tab">
<p>...</p>
</div>
<!-- EDUCATION TAB-->
<div class="tab-pane fade" id="v-pills-education" role="tabpanel" aria-labelledby="v-pills-education-tab">
<p>...</p>
</div>
</div>
</div>
Then the css for the nav-pill-custom class is given as follows.
.nav-pill-custom {
outline:none !important;
color: #6481A6;
}
.nav-pill-custom:hover {
background-color:#91cbeb;
border: #91cbeb;
}
.nav-pill-custom:focus,
.nav-pill-custom:active
{
background-color:#91cbeb;
border: #91cbeb;
}
Each of rthe css blocks works fine apart form the one for targeting the active link. I've also tried it without .nav-pill-custom:focus and I've tried it adding in .nav-pill-custom:active a targeting the anchor, which was a solution in another stackoverflow question but it doesnt seem to be working for me. How do I make this work?
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;
}
I have the following code for a side-nav:
<ul id="slide-out" class="side-nav">
<li><a class="subheader">Last Updated:</a></li>
<li><a>Text Here</a></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>
I also have the following header code:
<header>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper blue darken-1">
<a class="brand-logo center" href="#">Website Name</a>
<ul class="right">
<li><a data-activates="slide-out" class="button-collapse" href="#"><i class="material-icons">menu</i></a></li>
</ul>
</div>
</nav>
</div>
</header>
So why is the menu item not coming up in my nav bar and why is it not triggering the side nav?
Also, if i remove the button-collapse class, I am able to see the menu but clicking on it does not trigger side-nav
Here is my jsFiddle
Edit: My problem is not the icon, it's the fact that clicking on the menu icon/text does not activate the side navigation menu.
How do I make the side-nav work on mobile AND DESKTOP
Class button-collapse was setting display:none in CSS due to following for desktop:
#media only screen and (min-width: 993px)
nav a.button-collapse {
display: none;
}
Not sure the reason of it.
However you can use other class than button-collapse and it will work.
HTML:
<header>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper blue darken-1">
<a class="brand-logo center" href="#">Website Name</a>
<ul class="right">
<li><a data-activates="slide-out" class="my-btn" href="#"><i class="material-icons">menu</i></a></li>
</ul>
</div>
</nav>
</div>
</header>
JS:
(function($){
$(function(){
$('.my-btn').sideNav({
edge: 'left', // Choose the horizontal origin
closeOnClick: true, // Closes side-nav on <a> clicks, useful for Angular/Meteor
draggable: true // Choose whether you can drag to open on touch screens
}
);
}); // end of document ready
})(jQuery); // end of jQuery name space
Fiddle: https://jsfiddle.net/6hfrw33n/
If you want the menu to be accessible on all screensizes you just have
to add a simple helper class show-on-large to the .sidenav-trigger.
<header>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper blue darken-1">
<a class="brand-logo center" href="#">Website Name</a>
<ul class="right">
<li><a data-activates="slide-out" class="button-collapse show-on-large" href="#"><i class="material-icons">menu</i></a></li>
</ul>
</div>
</nav>
</div>
</header>
as shown here: https://materializecss.com/sidenav.html
Add this line in you js file $('.button-collapse').sideNav();
In an AngularJS+Bootstrap project, I'm trying to create a vertical nav menu/tabs on the left, while the content of one of the tabs should have its own tabs (secondary tabs), horizontal.
My problems:
1. The secondary tabs' contents are displayed outside the desired location
2. Navigation in the secondary tabs doesn't work.
You can check out my code here: http://www.bootply.com/vhArvv1N5V
The main nav bar (vertical) works fine (as demonstrated at: http://www.bootply.com/74926)
To solve the first problem you need to float that first navigation left. I resolved this by using Bootstrap's col-md-2 and col-md-10 around the navigation and the tab content, plus the obligatory row and container-fluid for layout. To solve the second problem, you missed out some of the data-toggle="tab" and .tab-pane on the second set of tabs.
I also changed your first nav from .nav-tabs to just .nav. Nav tabs rounds the corners etc, not really needed here. Plus I removed almost all of your CSS and relied more on Bootstrap.
<div class="container-fluid">
<div class="row">
<!-- Nav left -->
<ul class="nav col-md-2" id="leftTabs">
<li class="active">
<a href="#a_tab" data-toggle="tab">
<span></span>ItemA
</a>
</li>
<li>
<a href="#b_tab" data-toggle="tab">
<span></span>ItemB
</a>
</li>
<li>
<a href="#c_tab" data-toggle="tab">
<span></span>ItemC - TABS!
</a>
</li>
</ul>
<!-- Nav content -->
<div class="tab-content col-md-10">
<div class="tab-pane active" id="a_tab">
<h1>Content of A</h1>
</div>
<div class="tab-pane" id="b_tab">
<h1>Content of B</h1>
</div>
<div class="tab-pane" id="c_tab">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active">First</li>
<li>Second</li>
<li>Third</li>
</ul>
<!-- Nav tabs content -->
<div class="tab-content">
<div id="first" class="tab-pane active">Content of first</div>
<div id="second" class="tab-pane">Content of second</div>
<div id="third" class="tab-pane">Content of third</div>
</div>
</div>
</div>
</div>
</div>
DEMO
I have a Google Chart that displays fine in its own page /graph/map_freq but is sized down when I display it as a tab content.
Here's the tabbable code:
<div class="tab-pane" id="map_freq">
<%= render "graph/map_freq" %>
</div>
Here's the code in graph/map_freq.html.erb:
<div id="chart_div" style="width: 900px; height: 500px;"></div>
I am pretty sure this is related to tabbable component of Bootstrap.
You shall mark it up like so...
<ul class="nav nav-tabs" id="map_freq">
<li class="active"><a data-toggle="tab" href="#featured-members">Your Tab Name</a></li>
</ul>
<div class="tab-content" id="yourId">
<div id="map_freq" class="tab-pane active fade in">
Your Content Here.
</div>
</div>
The code shall output a page similar to THIS ONE.