I am creating a unordered list in Bootstrap 3 for my class. I am using a glyphicon as the bullet point. I am having trouble with the last item wrapping in desktop view and as I view it in different breakpoints the items sometimes display inline.
Here is my html
<div class="bg">
<div class="container-fluid text-center" style="height:100%;">
<div class="row content">
<div class="col-sm-2">
</div>
<div class="col-lg-8 text-left">
<h2>EDUCATION</h2>
<hr class="style1">
<h3 class="job">Bachelor of Science, Marketing - San Jose State University</h3>
<h2>CERTIFICATIONS</h2>
<hr class="style1">
<h3 class="job">HubSpot Inbound Certification</h3>
<h4>2016</h4>
<p>The course details the stages of the inbound methodology. Lectures explained various inbound marketing topcis such as how to optimize websites and best practices for a sucessful landing page.</p>
<h3 class="job">Coursera Web Design for Everybody</h3>
<h4>2017</h4>
<ul class="custom-bullet col-lg-4">
<li>Introduction to HTML5</li>
<li>Introduction to CSS3</li>
<li>Interactivity with JavaScript</li>
<li>Advanced Styling with Responsive Design</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-sm-2">
</div>
Here is my css:
.bg {
background-color:#ffffff;
background-size:100%;
width:100%;
height: auto;
padding-top:8%;
margin-bottom:0;
margin-top:3%;
}
.job {
color: #800080;
}
.custom-bullet li {
display: block;
}
.custom-bullet li:before
{
/*Using a Bootstrap glyphicon as the bullet point*/
content: "\e080";
font-family: 'Glyphicons Halflings';
font-size: 9px;
float: left;
margin-top: 4px;
margin-left: -17px;
color: #000000;
}
You are setting float: left; to the ul li, that causes the 'inline' looking behavior.
On larger screen use have container with col-lg-4, so the container is smaller and some items do not fit there and appears on new line.
You can reset this, or adjust the selector, depends on what you want.
.custom-bullet li
display: block;
float: none;
}
The problem is with this class
.custom-bullet li:before
{
/*Using a Bootstrap glyphicon as the bullet point*/
content: "\e080";
font-family: 'Glyphicons Halflings';
font-size: 9px;
float: left; // change to none
margin-top: 4px;
margin-left: -17px;
color: #000000;
}
By the way why did you add this as with CSS pseudo-elements rather than writing in html.
Related
How do I make my col class of my <div> element responsive?
I would like the text content and the image be shown side by side. The image should go down only when the screen size is too small. Like mobile screens.
Below is a part of my HTML and CSS code for the image and the content:
.content-style {
font-size: 20px;
font-family: cursive;
}
#image-position {
width: 40%;
border-radius: 700px;
}
<div class="row">
<div class="column-left">
<p class="content-style"> Hola! I am Gaurav, I work at Torry Harris as an IFW Support Analyst. I love coding and I wanna build my career in a lot of fields. If I could name some right way, they would be, Web Development, SOA Technologies, Automation Testing and a lot more. Apart from these I also love to read. The genre of my liking are Fiction, Adventurous, and Epics. </p>
</div>
<div class="column-right">
<img align="right" id="image-position" class="img-responsive" src="https://qph.ec.quoracdn.net/main-qimg-24133659af6ec93b462b1ec32a3312e6-c" alt="Goku's Image">
</div>
</div>
<hr/>
</div>
If you are OK to use Bootsrap, you can use this updated snippet. Otherwise, you will need to implement your own media rules.
.content-style
{
font-size: 20px;
font-family: cursive;
}
#media (min-width: 992px){
.content-style{
float: left;
}
#image-position{
float: right;
}
}
#media (max-width: 992px){
#image-position{
margin: auto;
}
}
#image-position{
width:40%;
border-radius: 700px;
}
.row.someDiv{
margin-left: 0px;
margin-right: 0px;
}
.row.someDiv .col-md-4{
padding-right: 0px;
margin-right: 0px;
}
.row.someDiv .col-md-8{
padding-left: 0px;
margin-left: 0px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row someDiv">
<div class="col-md-4">
<p class="content-style">Hola! I am Gaurav, I work at Torry
Harris as an IFW Support Analyst. I love coding and I wanna build my
career in a lot of fields. If I could name some right way, they
would be, Web Development, SOA Technologies, Automation Testing and
a lot more. Apart from these I also love to read. The genre of my
liking are Fiction, Adventurous, and Epics.</p>
</div>
<div class="col-md-8">
<img id="image-position" class="img-responsive"
src="https://qph.ec.quoracdn.net/main-qimg-24133659af6ec93b462b1ec32a3312e6-c"
alt="Goku's Image">
</div>
</div>
<hr />
For a simple 2-column layout, consider using the display: flex property for the parent element and flex: 1 property for the child elements. To improve the responsive layout on smaller screens, use a media query to change the display type back to 'block'.
<style>
.wrapper {
max-width: 480px;
margin: 0 auto;
}
.wrapper .row {
display: flex;
/* extra code if you want to center the child elements */
align-items: center;
justify-content: center;
}
.wrapper .row > .column-left {
flex: 1;
}
.wrapper .row > .column-right {
flex: 1;
}
.wrapper .img-responsive {
max-width: 100%;
float: initial;
}
#media screen and (max-width:600px) {
.wrapper .row {
display: block;
}
}
</style>
<div class="wrapper">
<div class="row">
<div class="column-left">
<p class="content-style"> Hola! I am Gaurav, I work at Torry Harris as an IFW Support Analyst. I love coding and I wanna build my career in a lot of fields. If I could name some right way, they would be, Web Development, SOA Technologies, Automation Testing and a lot more. Apart from these I also love to read. The genre of my liking are Fiction, Adventurous, and Epics.</p>
</div>
<div class="column-right">
<img align="right" id="image-position" class="img-responsive" src="https://qph.ec.quoracdn.net/main-qimg-24133659af6ec93b462b1ec32a3312e6-c" alt="Goku's Image">
</div>
</div>
</div>
Can you use floats? Try this:
.column-left{
float:left;
display:inline-block;
width:50%;
}
.column-right{
float:right;
display:inline-block;
width:50%;
}
by making the images inline-block and setting width to 50% they will both display in the same line. Floating makes them go as far left or right as they can.
<style>
.content-style {
font-size: 20px;
font-family: cursive;
}
.right {
width: 49%;
float: left;
margin-left: 10px;
background-image: url('https://img1.ibxk.com.br/2014/06/13/13145034906534.jpg?w=480&h=560&mode=crop');
min-height: 200px;
height: 30%;
padding-top: 10px;
background-size: 100% 100%;
border-radius: 700px;
}
.left {
width: 50%;
float: left;
height: 30%;
padding-top: -top: 10px;
}
#media screen and (max-width: 500px) {
.breaker {
clear: both;
display: inline;
height: 100px;
}
.left {
clear: both;
display: inline;
}
.right {
clear: both;
display: inline;
}
}
</style>
<div style="width: 100%;">
<div class="left">
<p> Hola! I am Gaurav, I work at Torry Harris as an IFW Support Analyst. I love coding and I wanna build my career in a lot of fields. If I could name some right way, they would be, Web Development, SOA Technologies, Automation Testing and a lot more.
Apart from these I also love to read. The genre of my liking are Fiction, Adventurous, and Epics. </p>
</div>
<div class="breaker"><br></div>
<div class="right">
</div>
</div>
</div>
I am trying to make just the pages on my website that have the main body content class of ".interior-health-main" have a footer that is static at the bottom of the page. I want it at the absolute bottom, currently if you view some of my pages on a large screen, you will see a bunch of white space after the footer. I want to get rid of this.
I have been looking into this for hours now and tried many things, at first I was going to make the footer on the entire website static at the bottom of the page, but setting the footer's css to position: absolute conflicted with other elements on my home page, which is why I just want it on the ".interior-health-main." If it is possible to change it just for the footers on these pages please let me know, I do not really want examples of fixing this by setting the entire body to position:relative. It just messes up my homepage.
Here is an example of what it looks like with the white space after the footer http://codepen.io/aahmed2/full/KgWNYL/
<p class="nav">This is a Navigation Bar</p>
<div class="interior-health-main">
<div class="container">
<ol class="breadcrumb">
<li>Home</li>
<li>Health Resources</li>
<li class="active">Sample Short Page</li>
</ol>
<h2>Sample Short Page</h2>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h4>Contact Us</h4>
<p>414 Hardin Hall<br> 3310 Holdredge St<br> Lincoln, NE 68583<br> (402) 472-7363</p>
<div class="affiliates">
<img class="wordmark" src="../_logos/wordmark.svg" alt="University of Nebraska-Lincoln Wordmark">
<img class="extension" src="../_logos/n-extension-rev.svg" alt="Nebraska Extension Logo">
</div>
</div>
<div class="col-sm-4">
<h4>Quick Links</h4>
<p>Human Health</p>
<div class="line"></div>
<p>Pet Diseases</p>
<div class="line"></div>
<p>Livestock Diseases</p>
<div class="line"></div>
<p>Events</p>
<div class="line"></div>
</div>
<div class="col-sm-4">
<h4>Attention</h4>
<p>All information on this site is intended for informational use only. Contact your doctor or veterinarian for health concerns.</p><br>
<h5><a class="partner" href="#">Partners & Stakeholders</a></h5>
</div>
</div>
<div class="copyright">
<div class="col-xs-9">
<h6>© 2016 Nebraska One Health. Site Map.</h6>
</div>
<div class="col-xs-3">
<img class="social pull-right" src="../_logos/twitter-logo-button.svg" alt="twitter icon">
<img class="social pull-right" src="../_logos/facebook-logo-button.svg" alt="facebook icon">
</div>
</div>
</div>
</div>
Here is my css
.nav {
text-align: center;
padding: 25px 0;
background-color: #c1c0be;
color: #fff;
position: fixed;
width: 100%;
z-index: 2;
}
.interior-health-main {
padding-top: 80px;
padding-bottom: 20px;
}
#media (max-width: 479px) {
.interior-health-main {
padding-top: 50px;
}
}
.footer {
background: #333332;
border-top: 9px solid #ffffff;
color: #fff;
padding-top: 35px;
padding-bottom: 35px;
}
You can position the footer absolute like they did here
https://getbootstrap.com/examples/sticky-footer/
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
/* background-color: #f5f5f5; */
}
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
How did it conflict when you tried your way? update your post with what you did?
Please reference this question to find your solution.
I applied one of the solutions from the above link to your code.
Wrap your code in a #holder div.
Add the following CSS:
html,body{
height: 100%
}
#holder{
min-height: 100%;
position:relative;
}
.footer {
background: #333332;
border-top: 9px solid #ffffff;
color: #fff;
padding-top: 35px;
padding-bottom: 35px;
height: 300px;
width:100%;
position: absolute;
left: 0;
bottom: 0;
}
.interior-health-main {
padding-top: 80px;
padding-bottom: 300px; /* height of footer */
}
Here is the working fiddle:
https://jsfiddle.net/DTcHh/25475/
I wrapped your page (not containing footer) into .page-wrap div, and edit you codePen code and just add this piece of code to your css
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height (with margin and border) */
margin-bottom: -299px ;
}
.page-wrap:after {
content: "";
display: block;
}
.footer, .page-wrap:after {
/* page-wrap after content must be the same height as footer */
height: 299px;
}
Demo
I found a web page which shows only 3 events in a grid and when the screen is re-sized less a certain width, it not only relocates the 3 events into a list but also changes the layout inside each event.
I have tried many ways to make it look like that web page, but have not got any luck.
this is the web page
And this is what I have done: CodePen
/* -- DEFAULTS -- */
div, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
/* -- FLUID GRID STYLES -- */
#Grid {
margin-bottom: 40px;
text-align: justify;
font-size: 0.1px;
}
#Grid li {
display: inline-block;
background: #eee;
width: 23%;
padding-top: 23%;
/* Used instead of height to give elements fluid, width-based height */
margin-bottom: 2.5%;
}
#Grid:after {
content: 'haha';
display: inline-block;
width: 100%;
border-top: 10px dashed #922d8d;
/* Border added to make element visible for demonstration purposes */
}
ul li .icon {
width: 100%;
display: table;
min-height: 300px;
height: 300px;
padding: 0;
background: #545454 url(https://www.nike.com/events-registration/client-dist/assets/images/multi-card-bg.png) no-repeat center center;
}
#Grid .placeholder {
padding: 0;
border-top: 10px solid #922d8d;
/* Border added to make element visible for demonstration purposes */
}
/* -- MEDIA QUERIES DEFINING RESPONSIVE LAYOUTS -- */
/* 3 COL */
#media (max-width: 800px) {
#Grid li {
width: 31%;
padding-top: 31%;
margin-bottom: 3%;
}
}
/* 2 COL */
#media (max-width: 600px) {
#Grid li {
width: 48%;
padding-top: 48%;
margin-bottom: 4%;
}
}
/* SINGLE COL */
#media (max-width: 400px) {
#Grid li {
width: 100%;
padding-top: 100%;
margin-bottom: 5%;
}
}
/* -- LEGEND STYLES (NOT PART OF GRID FRAMEWORK) -- */
h1 {
font: 600 20px"Helvetica Neue";
text-align: right;
text-transform: uppercase;
}
label {
padding: 8px 15px;
margin-bottom: 20px;
display: block;
font: 100 22px"Helvetica Neue";
border-left: 10px solid #922d8d;
}
label:last-of-type {
border-left: 10px dotted #922d8d;
}
p {
font: 200 15px/1.5em"Helvetica Neue";
max-width: 400px;
margin-bottom: 30px;
color: #333;
}
Update
Here is my updated code. The problem is I cannot place the "1 JAN" and "NEW YEAR" in the middle of the div.
Updat 2
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-12">
<div class="row hidden-xs icon">
<div class="title">1 JAN</div>
<div class="event-time"><i>8:00PM</i></div>
<div class="sub-title">This Event is Full</div>
</div>
<div class="row hidden-xs sub-icon">
<div><span>LRC Thursday Night Run test long long</span></div>
<div>
<input type="button" class="btn btn-primary" value="Register" />
</div>
</div>
<div class="row hidden-sm event-sm">
<div class="col-xs-4 event-left">
<div class="event-day">01</div>
<div class="event-month">JAN</div>
<div class="event-time"><i>8:00PM</i></div>
</div>
<div class="col-xs-8 event-right">
<div class="event-notice">This event is full</div>
<div class="event-title">NIKE RUN 10 KM</div>
<div class="event-slogan">Come run with us</div>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="well well-sm">
<h1 class="text-center hidden-xs">14 FEB</h1>
<p class="text-center hidden-xs">Valentine</p>
<div class="row hidden-sm">
<div class="col-xs-4"><i>February 14th</i>
</div>
<div class="col-xs-8">Ah! Lovey Dovey Day... Where is my chocolate?</div>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="well well-sm">
<h1 class="text-center hidden-xs">1 APR</h1>
<p class="text-center hidden-xs">April Fool</p>
<div class="row hidden-sm">
<div class="col-xs-4"><i>April 1st</i>
</div>
<div class="col-xs-8">Your car just got stolen.... JUST KIDDING!!!</div>
</div>
</div>
</div>
</div>
</div>
<script data-require="jquery#2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
If you are already using Bootstrap, you already have this capability. Use hidden-.. and the col-xx-... classes to make your page responsive.
See this example: http://embed.plnkr.co/IH4WeZ/
It's all done using bootstrap css. The trick is to hide stuffs at certain media query and show them whenever appropriate.
I only coded it be responsive at small and extra small size, so on medium and large it's a bit bonker... but you get the idea...
You could use the Bootstrap grid system to do something like this.
You could use a combination of the columns, and offset to achieve this.
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
That will span three columns across the full width of the page. You could experiment with smaller width columns, and adding an offset to the first one to push it away from the left edge.
http://getbootstrap.com/css/#grid-offsetting
If you want to achieve a similar effect, try and replicate it with minimal code and work from there.
Here is a simple example I have knocked up to get the layout working:
http://codepen.io/anon/pen/OPeXgj
HTML
<ul class="events">
<li>Event Name</li>
<li>Event Name</li>
<li>Event Name</li>
</ul>
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.events {
clear: both;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 0;
list-style: none;
}
.events li {
float: left;
clear: both;
width: 100%;
background: yellow;
margin: 0;
padding: 10px;
}
#media only screen and (min-width: 768px) {
.events li {
width: 33.3%;
clear: none;
}
}
Using a mobile first approach, child items are styled with a width: 100%; and clear: both; Then, with a simple media query, I float them left and set a width to around a 3rd (33.3%) (there could be a better way, but this was a quick fix).
If you're using a grid system, it may be even easier. I would look into Bootstrap or Foundation, as many of these problems have already been solved many times over.
Good luck!
Last resort solution is to code two versions. One for mobile and another one for desktop. Then use media queries to hide one on mobile resolution and the other on desktop.
This will add some extra load on the page, but it should do it.
I'm using the js from bootstrap to do a div collapse on a Wordpress gallery page but I can't get the toggle function to work. When you click on another item, the first item doesn't collapse. It stays open. You can see it the link to the dev site: Dev site link
I'm not using the accordion bootstrap setup as I wanted each collapsing div to occupy the same space below the row of triggering links.
I've asked this question from a bootstrap point of view but got no answers. So I'm wondering if there's a way of doing it using Jquery toggleclass?
Bootstrap applies the class 'in' to the expanded item. So I guess I'd need to have toggle class remove that? I found and tried to adapt some Jquery but no luck.
A simplified version of the code is:
<div id="desktop-view">
<div id="gallery-squares-1" class="gallery-squares clearfix">
<a href="#collapseExample-1" class="ie-bgsize gallery-img" data-toggle="collapse" data-parent="#desktop-view">
<div class="img-mouse-over"></div>
</a><!-- .post-gallery-img -->
<a href="#collapseExample-2" class="ie-bgsize gallery-img" data-toggle="collapse" data-parent="#desktop-view">
<div class="img-mouse-over"></div>
</a><!-- .post-gallery-img -->
<a href="#collapseExample-3" class="ie-bgsize gallery-img" data-toggle="collapse" data-parent="#desktop-view">
<div class="img-mouse-over"></div>
</a><!-- .post-gallery-img -->
</div> <!-- .gallery-squares -->
<div id="gallery-expanders-1" class="gallery-expanders clearfix">
<div class="collapse" id="collapseExample-1">
<div class="gallery-content">
<div class="ie-bgsize gallery-content-img"></div>
<h6>Title</h6>
<p>Description</p>
</div> <!-- .gallery-content -->
</div> <!-- .collapse -->
<div class="collapse" id="collapseExample-2">
<div class="gallery-content">
<div class="ie-bgsize gallery-content-img"></div>
<h6>Title</h6>
<p>Description</p>
</div> <!-- .gallery-content -->
</div> <!-- .collapse -->
<div class="collapse" id="collapseExample-3">
<div class="gallery-content">
<div class="ie-bgsize gallery-content-img"></div>
<h6>Title</h6>
<p>Description</p>
</div> <!-- .gallery-content -->
</div> <!-- .collapse -->
</div> <!-- .gallery-expanders -->
</div>
CSS:
a.gallery-img {
width: 15%;
padding-bottom: 15%;
margin: 0 1.6666666% 1.6666666% 0;
display: block;
float: left;
position: relative;
background-color: #fff;
}
.gallery-content {
background-color: black;
margin-bottom: 1.6666666%;
color: #fff;
padding: 1.6666666%;
}
.gallery-content-img {
width: 98.5%;
padding-bottom: 50%;
margin-bottom: 1.8%;
}
.gallery-content h6 {
color: #fff;
font-size: 18px;
line-height: 1.2em;
margin: 0;
width: 98.5%;
}
.gallery-content p {
font-size: 14px;
line-height: 1.2em;
margin: 1% 0;
width: 98.5%;
}
.gallery-content p:last-child {
margin-bottom: 0;
}
.img-mouse-over {
width: 100%;
height: 100%;
margin: 0;
position: absolute;
background: none;
}
.img-mouse-over:hover,
.img-mouse-over:active {
background: rgba(0, 0, 0, 0.5) no-repeat center center;
}
JQuery I tried:
$('.gallery-squares a').click(function(e){
e.preventDefault();
$('.collapse').removeClass('in');
});
I just can't get it to remove the active class on 'in'. I guess I'd also need to make sure it only removed the 'in' from the current active div and not the one that the click will create?
Thanks in advance for any advice.
you'll have to remove the in class and add the collapse class.
$(document).on('show.bs.collapse', function () {
$('.in').addClass('collapse').removeClass('in');
})
Okay, so if we never want the in class there...
$(document).on('shown.bs.collapse', function () {
$('.in').removeClass('in');
})
or possibly on the 'show event:
$(document).on('show.bs.collapse', function () {
$('.in').removeClass('in');
})
(I'm not sure which one since I don't know when it adds the class in)
See the docs for the collapse events here
Im trying to integrate an app that uses both pdfjs(viewing pdfs) and twitter bootstrap (providing some u.i. stuff like buttons/tabs) but the two seem unable to play nice on the same page (short of iframes maybe?) each clobers the other's variables with the pdf viewer having elements on the toolbar in the wrong position, and the u.i. provided by bootstrap is messed up. How can i get these two to play nice?
i'v tried solution by Andrew Homeyer but it did not work neither did the
<style scoped>
element, are there other solutions?
EDIT: here is what i mean, (in this example bootstrap is cloberred but pdfjs seems unaffected, im using boostrap from Andrew Homeyer)
versus the way it looks without pdfjs, the tabs work just fine,
here is the code im using for the tabs:
<ul class="bootstrap-scope nav nav-tabs" data-tabs="boottabs">
<li class="active"><a data-toggle="boottabs" href="#red" class="bootstrap-scope">Red</a></li>
<li><a data-toggle="boottabs" href="#orange" class="bootstrap-scope">Orange</a></li>
<li><a data-toggle="boottabs" href="#yellow" class="bootstrap-scope">Yellow</a></li>
<li><a data-toggle="boottabs" href="#green" class="bootstrap-scope">Green</a></li>
<li><a data-toggle="boottabs" href="#blue" class="bootstrap-scope">Blue</a></li>
</ul>
<div class="bootstrap-scope tab-content">
<div class="tab-pane active" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<div class="bootstrap-scope tab-pane" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="bootstrap-scope tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
<div class="bootstrap-scope tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="bootstrap-scope tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
</div>
</div>
sorry guys i found out that i had some css that was actually interfering with my boostrap tabs not pdfjs,
button {
line-height: normal;
}
.hidden {
display: none;
}
/*
* Rules for simulated drop-down/pop-up lists
*/
ul {
/* rules common to BOTH inner and outer UL */
z-index: 100000;
margin: 1ex 0;
padding: 0;
list-style: none;
cursor: pointer;
border: 1px solid Black;
/* rules for outer UL only */
width: 15ex;
position: relative;
}
ul li {
background-color: #EEE;
padding: 0.15em 1em 0.3em 5px;
}
ul ul {
display: none;
position: absolute;
width: 100%;
left: -1px;
/* Pop-Up */
bottom: 0;
margin: 0;
margin-bottom: 1.55em;
}
.ui-layout-north ul ul {
/* Drop-Down */
bottom: auto;
margin: 0;
margin-top: 1.45em;
}
ul ul li { padding: 3px 1em 3px 5px; }
ul ul li:hover { background-color: #FF9; }
ul li:hover ul { display: block; background-color: #EEE; }