This is my HTML Code. I want css styling for active nav-tab.Now i want when my page loads Location tab should have blue background how can i get that
<div class="row">
<div class="col-sm-12 col-xs-12 col-lg-12 col-md-12 welcome">
<ul class="nav navbar-nav navbar-nav-primary">
<li class="active">
<a href="#one" data-toggle="tab">
<i class="fa fa-map-marker" aria-hidden="true"></i>
<span class="li-text">Location</span>
</a>
</li>
<li>
<a href="#two" data-toggle="tab">
<i class="fa fa-heartbeat" aria-hidden="true"></i> <span class="li-text">Heartbeats</span>
</a>
</li>
<li>
<a href="#three" data-toggle="tab">
<i class="fa fa-power-off" aria-hidden="true"></i>
<span class="li-text">Reboots</span>
</a>
</li>
<li>
<a href="#four" data-toggle="tab">
<i class="fa fa-compress" aria-hidden="true"></i>
<span class="li-text">Reconnects</span>
</a>
</li>
<li>
<a href="#five" data-toggle="tab">
<i class="fa fa-battery-full" aria-hidden="true"></i>
<span class="li-text">Charge</span>
</a>
</li>
</ul>
</div>
Location tab is the active tab
<div id="one" class="tab-pane active">
<div class="row">
<div class="col-sm-offset-10 col-md-offset-10 col-xs-offset-10 col-lg-offset-10 col-sm-2 col-md-2 col-xs-2 col-lg-2 searchDiv">
<div class="row">
<div class="col-sm-1 col-xs-1 col-lg-1 col-md-1">
<i class="fa fa-search fa-2x" aria-hidden="true"></i>
</div>
<div class="col-sm-1 col-md-1 col-lg-1 col-xs-1">
<i class="fa fa-ellipsis-v fa-2x" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="tab-pane active" id="1a">
<div ui-grid="gridOptions" class="grid-table" ui-grid-auto-resize ui-grid-cellNav ui-grid-edit ui-grid-resize-columns ui-grid-pinning ng-style="getTableHeight()"></div>
</div>
</div>
Now i want when my page loads Location tab should have blue background how can i get that.
Try this
CSS
.nav li.active a,
.nav li a:hover,
.nav li.active a:focus,
.nav li.active a:hover{
background-color:red;
}
Link for reference
hope this helps..
You can use it like this
.tab-pane.active {
background : blue; // or your desired color code.
}
Related
I have a side navbar and I'm trying to make it active according to page click.
This is my sidenav.nav which is a component.
<template>
<aside class="col-md-3">
<nav class="list-group">
<a href="/" class="list-group-item" exact>
Account overview
</a>
<a class="list-group-item" href="/profile/address"> My Address </a>
<a class="list-group-item" href="/profile/orders"> My Orders </a>
<a class="list-group-item" href="/profile/wishlist"> My wishlist </a>
<a class="list-group-item" href="/profile/settings"> Settings </a>
<a class="list-group-item" href=""> Log out </a>
</nav>
</aside>
</template>
Below is my code for address page, other pages are similar to this.
<template>
<section class="section-content padding-y">
<div class="container">
<div class="row">
<sidenav />
<!-- col.// -->
<main class="col-md-9">
<a href="#" class="btn btn-light mb-3">
<i class="fa fa-plus"></i> Add new address
</a>
<div class="row">
<div class="col-md-6">
<article class="box mb-4">
<h6>London, United Kingdom</h6>
<p>
Building: Nestone <br />
Floor: 22, Aprt: 12
</p>
<a href="#" class="btn btn-light disabled">
<i class="fa fa-check"></i> Default</a
>
<a href="#" class="btn btn-light">
<i class="fa fa-pen"></i>
</a>
<a href="#" class="btn btn-light">
<i class="text-danger fa fa-trash"></i>
</a>
</article>
</div>
<!-- col.// -->
<div class="col-md-6">
<article class="box mb-4">
<h6>Tashkent, Uzbekistan</h6>
<p>
Building one <br />
Floor: 2, Aprt: 32
</p>
Make default
<a href="#" class="btn btn-light">
<i class="fa fa-pen"></i>
</a>
<a href="#" class="btn btn-light">
<i class="text-danger fa fa-trash"></i>
</a>
</article>
</div>
<!-- col.// -->
<div class="col-md-6">
<article class="box mb-4">
<h6>Moscow, Russia</h6>
<p>
Lenin street <br />
Building A, Floor: 3, Aprt: 32
</p>
Make default
<a href="#" class="btn btn-light">
<i class="fa fa-pen"></i>
</a>
<a href="#" class="btn btn-light">
<i class="text-danger fa fa-trash"></i>
</a>
</article>
</div>
<!-- col.// -->
</div>
<!-- row.// -->
</main>
</div>
</div>
</section>
</template>
<script>
import sidenav from "~/components/profile-sidenav";
export default {
components: {
sidenav,
},
};
</script>
I have set account overview as the active page, when i go to address page i need 'My address' tab to be active. How do i do that? I tried but that didn't work.
Instead of using <a> tags, use <nuxt-link>. Then, in your css, style the .nuxt-link-exact-active class— for example:
.nuxt-link-exact-active {
font-weight: bold;
}
Now if you have <nuxt-link to=“/address”>My Address</nuxt-link> and the user is on the /address page, the class is added to the nuxt-link element.
I have a web page ioterm which I tried to make it responsive. I tested on several web browsers FF, IE11 and Chrome 44. The problem is the div seems lower when it is displayed with Chrome. You can check it when you enter my sample page and navigate to products page. (WASPMOTE) When images slide, you will notice the WASPMOTE div positions lower than the others. It seems OK with FF and IE11. How can I fix this for Chrome?
Incase you can't access my page here is the images.imgur
Thanks in advance.
EdiT
Here is the problemmatic div.
<div class="row item active" id="one">
<div>
<div class="row ">
<div class="col-md-4" id="img1">
<img class="img-center" src="images/waspmote_pro_t.png" alt="waspmote">
</div>
<div class="col-md-4" id="img2">
<img class="img-center" src="images/waspmote_exp_radio_board_2-375_t.png" alt="waspmote">
</div>
<div class="col-md-4" id="img3">
<img class="img-center" src="images/u13_gw_t.png" alt="waspmote">
</div>
</div>
</div>
<div class="caption row ">
<div class="col-md-12">
<h3 class="productHeight">Waspmote</h3>
</div>
<div class="row" id="desc">
<div class="col-md-4" id="exp1">
<ul style="list-style-type: none;" class="productSize">
<li lang="tr">
<i class="fa fa-share-alt"></i> Tüm sensörlere bağlanabilir
</li>
<li lang="tr">
<i class="fa fa-rss"></i> Tüm wi-fi teknolojilerini destekler
</li>
<li lang="tr">
<i class="fa fa-cloud"></i> Bulut teknolojilerine uyumlu
</li>
</ul>
</div>
<div class="col-md-4" id="exp2">
<ul style="list-style-type: none;" class="waspmote">
<li lang="tr">
<i class="fa fa-check-circle"></i> Ultra düşük güç (0.7uA)
</li>
<li lang="tr">
<i class="fa fa-check-circle"></i> 100+ Sensör uyumluluğu
</li>
<li lang="tr">
<i class="fa fa-check-circle"></i> Kablosuz uzaktan programlama
</li>
<li lang="tr">
<i class="fa fa-check-circle"></i> Şifreleme Kütüphaneleri (AES, RSA)
</li>
<li lang="tr">
<i class="fa fa-check-circle"></i> Encapsulated line available
</li>
</ul>
</div>
<div class="col-md-4" id="exp3">
<ul style="list-style-type: none;" class="waspmote">
<li lang="tr">
<i class="fa fa-check-circle"></i> Desteklediği Protokoller: RS-232,RS-485,Modbus,CAN Bus, 4-20mA
</li>
<li lang="tr">
<i class="fa fa-check-circle"></i> 3G/GPRS/LoRaWAN/LoRa/Sigfox/868/900MHz,ZigBee/802.15.4/WiFi/RFID/ NFC/ Bluetooth 4.0
</li>
</ul>
</div>
</div>
</div>
I'm struggling with a problem for several days now and I couldn't find a solution yet, even though I've tried myself with different approaches, searched google and the mighty stackoverlow for hours.
The set-up:
I've got a panel with two list-groups next to each other, where relations can be managed. On the left are the linked items, on the right all available items that are not linked yet (featuring a pagination and all). The js-logic is working flawless. Clicking on a question-mark does display details for the item. Clicking on a plus moves an item to the left list, clicking on an "x" moves it back to the right. Of course the icons are properly switched, too.
The problem:
The items are user-generated and the form is used both on big and small screens (used bootstrap for that reason).
Some of the items do have a rather long name, limiting the users to keep it short is not an option here. If the text is too long, it just breaks out of the layout.
What I tried so far:
Since the input-groups work with simulating table-elements, I've tried several approaches with table-layout:fixed;, but that doesn't seem to work if it's not really a table. Then I tried several approaches with containing different elements in div-containers and giving them percentual sizes.
It never worked.
Now I'm experimenting with cutting the text server-side, but that looks stupid if the screen is wide enough and the text is cut anyway.
Does someone smarter than me have a solution that makes overflow:hidden; and text-overflow:ellipis; work on those elements?
Here is a (very cleaned-up) fiddle to work with:
https://jsfiddle.net/Fanmade/9vf8xvuL/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<ul class="list-group" id="left">
<li class="list-group-item">
<h4 class="text-center">Header Left</h4>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 1
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-times fa-lg"></i>
</a>
</div>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 2
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-times fa-lg"></i>
</a>
</div>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 3
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-times fa-lg"></i>
</a>
</div>
</li>
</ul>
</div>
<div class="col-md-6">
<ul class="list-group" id="left">
<li class="list-group-item">
<h4 class="text-center">Header Right</h4>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-plus fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 4
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
</div>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-plus fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 5 just has a really long text and I don't want to cut it when there is enough space on wide screens
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
</div>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-plus fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 6
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
Edit after the answers:
Thank you both so much for the answer!
I'm feeling so stupid right now. Of course the answer had to be so simple and I was just searching in the wrong direction.
The working fiddle is
https://jsfiddle.net/sesn/y98pz4hj/1/
Here is your answer
button { white-space: normal !important; height: auto !important; }
It will work :
button {
white-space: normal !important;
height: auto !important;
}
I am creating a website using bootstrap3. I used an image as a background to a div but the image is not being displayed in correct ratio. The image being visible is displaying only a portion of it.
My code and css is as under:
<div class="jumbotron">
<div class="container">
<div class="col-md-12">
<div class="col-md-4">
<div id="show_div" class="dropdown">Menu
<span class="caret"></span>
<div id="hello" style="visibility:hidden;" >
<ul class="dropdown-menu" style="display:block!important;" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Our Services</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<p class="text-center"><a role="button" href="#" class="btn btn-default">Sign Up</a></p>
</div>
<div class="col-md-4">
<p class="text-right"><a role="button" href="#" >Sign Up</a></p>
</div>
</div>
<div class="col-md-12 clear-fix"> </div>
<div class="cover-container">
<div class="inner cover">
<h2 class="cover-heading">hello</h1>
<p class="lead">
<a class="btn btn-lg btn-default" href="#">Login</a>
</p>
</div>
</div>
<div class="col-md-12 clear-fix"> </div>
<div class="col-md-12 botomopdv">
<div class="col-md-4 ">
<div class="text-center textwrap">+91-9898976766</div>
</div>
<div class="col-md-4 ">
<div class="text-center textwrap"><img src="images/visa.png"></div>
</div>
<div class="col-md-4 ">
<div class="text-center textwrap">
<i class="fa fa-youtube fsz fa-inverse"></i>
<i class="fa fa-twitter-square fsz fa-inverse"></i>
<i class="fa fa-facebook-square fsz fa-inverse"></i>
<i class="fa fa-linkedin-square fsz fa-inverse"></i>
</div>
</div>
</div>
</div>
</div>
My css is like this:
.jumbotron{
background-image:url('../images/slide.png');
padding-bottom:1px!important;
}
If i understand your problem correctly, try adding background-size:cover:
.jumbotron{
background-image:url('../images/slide.png');
padding-bottom:1px!important;
background-size:cover; /**** add this line ****/
}
all your code is correct but you can experiment with background-size: 100% 100%; or background-size: cover;
I am creating a small landing page at http://www.saleshuddlegames.com
on the desktop everything is fine but when I start using tablets and smartphones, everything starts going out of alignment. I can't seem to make anything centered.
Specifically look at my .footer
<footer>
<div class="row">
<div class="col-md-4 col-sm-10 col-sm-offset-2 col-xs-12 centered">
<ul class="social navbar-nav">
<li class="social-item"><i class="fa fa-facebook fa-3x"></i></li>
<li class="social-item"><i class="fa fa-instagram fa-3x"></i></li>
<li class="social-item"><i class="fa fa-youtube fa-3x"></i></li>
<li class="social-item"><i class="fa fa-twitter fa-3x"></i></li>
</ul>
</div>
</div>
<div class="row">
<div class="copyright col-md-6 col-md-offset-4 col-sm-10 col-sm-offset-2 col-xs-12">
<p>© 2013. The Training Game is property of Sales Huddle Group, Inc.</p>
</div>
</div>
</footer>
I used a centering snippet from a previous post:
.centered {
float:none;
margin: 0 auto;
}
Any Ideas??
Have you tried using the text-center class from bootstrap?
I've juggled the selection of columns for the social icons, and removed them all for the copyright text.. now this looks good here at all browser sizes:
<footer>
<div class="row">
<div class="col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-12 text-center">
<ul class="social navbar-nav">
<li class="social-item"><i class="fa fa-facebook fa-3x"></i></li>
<li class="social-item"><i class="fa fa-instagram fa-3x"></i></li>
<li class="social-item"><i class="fa fa-youtube fa-3x"></i></li>
<li class="social-item"><i class="fa fa-twitter fa-3x"></i></li>
</ul>
</div>
</div>
<div class="row">
<div class="copyright text-center">
<p>© 2013. The Training Game is property of Sales Huddle Group, Inc.</p>
</div>
</div>
</footer>