I have the basic bootstrap tabs set up with no dynamically inserted content and print specific media queries in my base stylesheet. When the user prints from the browser I want all the tab content to print, not just the active tab. I know there has to be an easy solution to this, I just can't figure it out.
try this in your print media query:
.tab-content > .tab-pane {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
#Scott's answer didn't work for me, and I think it is because I'm using bootstrap 4.
This is what worked for me in bootstrap 4. I added the display helper classes d-print-block, d-none, and d-print-none where appropriate.
I didn't want the top nav bar to print at all, so I added d-print-none
<ul class="nav nav-tabs nav-bordered d-print-none" role="tablist" id="mainTabs">
I wanted the individual tab-panes to print if on print media, so I added a header to the tab pane's content and added the d-none class so it wouldn't show in the browser, but also added d-display-block so it WOULD should in print media. I also added d-print-media to the tabpanel div itself so that it would show the entire contents in print media.
<div role="tabpanel" class=" fade in show active tab-pane d-print-block" id="myTab">
<div class="header-title d-none d-print-block">My Tab Name</div>
Lorem ipsum dolor sit amet...
</div>
Related
I am trying figure out how to show the selected item when I click on it in the horizontal navbar. Here is my code:
<mat-toolbar color="primary" class="topbar relative">
<div class="navbar-header">
<div color="primary">
<div>
Accounts
Create Account
</div>
</div>
</div>
</mat-toolbar>
Although I am using the same router link for both routes the link is real. When I click the selected item is not staying highlighted. Here is how it looks before and after selecting an item.
Any idea how to style it to show the active item?
Thanks
The routerActiveLink directive just adds a css-class and leaves all the styling to you. In your case, there will be an active class that you can style.
// my.component.scss
.active {
background: red;
}
Remember that if you're using #angular/material, you should probably style it using their themes. You can read more about that here.
// _my-theme.scss (only do this if you use material themes)
.active {
background: mat-color($accent);
}
can you please tell me how to how header label left side with button on right side .
i found like this
<div data-role="header">
Cancel
<h1>Edit Contact</h1>
Save
But i need like this
My case label on left side and button on right side
You can do like that, DEMO http://jsfiddle.net/yeyene/5kfnT/3/
JQM DOC: http://view.jquerymobile.com/1.3.1/dist/demos/widgets/headers/
Custom header configurations
If you need to create a header that doesn't follow the default configuration, simply wrap your custom styled markup in any container, such as div. The plugin won't apply the automatic button logic to the wrapped content inside the header container so you can write custom styles for laying out the content in your header.
It's also possible to create custom bars without using the header data-role at all. For example, start with any container and add the ui-bar class to apply standard bar padding and add the ui-bar-b class to assign the bar swatch styles from your theme. (The "b" can be any swatch letter.)
<div data-role="header" data-position="fixed">
<div class="ui-block-a"><h3>Header</h3></div>
<div class="ui-block-b"> </div>
<div class="ui-block-c"> </div>
<div class="ui-block-d">
A
B
C
</div>
</div>
You can do it this way, override ui-title and ui-btn-right styles. However, for the second button, give it a custom class in order not to override both button with ui-btn-right. I used custom class .second for the second button.
Demo
CSS - I used .ui-header in order not to change footer style.
.ui-header .ui-title {
margin-left: 2px !important;
text-align: left !important;
width: 150px !important;
}
.second.ui-btn-right {
right: 80px !important
}
HTML
<div data-role="header">
Cancel
<h1>Edit Contact</h1>
Save
</div>
I built a listview using jquery mobile. However, I would like to have a little more body text than what fits on a typical mobile screen.
<article id="military_list">
<ul data-role="listview" data-inset="true">
<li><a href="barracks">
<img src="../img/structure/barracks.png"/>
<h3>Barracks</h3>
<p>Fearless fighters weilding with shield and sword</p>
</a></li>
<li><a href="mage">
<img src="../img/structure/mage.png"/>
<h3>Mage Quarters</h3>
<p>Where magical folk live</p>
</a></li>
</ul></article>
It takes the <p></p> tag and abbreviates it automatically. Is there a way to instead simply jump down a line? There appears to be a lot of space left over in the block.
Heres an example:
As you can see in the yellow area, it cuts off the string and adds 'grant you...' rather than going to the next line.
Use this css:
.ui-li-desc {
white-space: normal !important;
}
Here's an example: http://jsfiddle.net/Gajotres/3ZVeN/
In order to add a fade transition to addClass/removeClass I am using jQuery UI:
$(document).ready(function(){
$('header nav a').hover(
function(){
$('header').stop().removeAttr("style").addClass('header-pink', 'slow')
},
function(){
$('header').stop().removeClass('header-pink', 'slow')
}
)
});
My goal is: to change (with a fade animation/effect) the background-color of the parent element (header) when :hover the child element (hover nav a). The css class is very simple:
.header-pink { background: pink; }
The HTML:
<header>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
</header>
Of course, I am calling jQuery and jQuery UI with no errors:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"</script>
<script src="js/libs/jquery.effects.core.min.js"></script>
The jQuery script does not work properly because:
The class is added (onmouseover) but with no transition (fade) effect.
The class is added in a undesired way: <header style="background:
pink;"> I use .removeAtrr("style") to avoid this odd behavior.
The class is not removed (onmouseout).
Using .animate() to animate colors with jQuery UI is something I prefer to avoid because I am using variables with LESS and, of course, I want the style only to be modified by the stylesheet.
Please, check my project to get an idea. As you can see, my intention is to replace the background color of the fixed <header> with the color of the links when you place the cursor over the links. In other words, the background color of the <header> turns with a transitional fade animation/effect as blue or pink as soon as the pointer is :hover the link "Posts." or "Links." but it recovers its original state (with no css class, .removeClass()) as soon as the pointer is out with the same transitional fade animation/effect. Please note that my project is still in development and I am currently testing the effect with same properties for all the links; when I accomplish the desired result I will apply the individual properties (background-color) for every link.
I'm using jQuery UI's tabs to divide content on my page. I have a 'link bar' I would like to have hang at the bottom of each tab. (The tab text will change but generally they will navigate the user left or right through tabs.)
Hosting the #linkBar div inside the first tab makes it 'look' right, inside Themeroller's border. Putting it just outside the 'parent tab' div places the links below the theme's border. I've tried creating a spacer div but it just pushes #linkBar down further.
Of course when the user switches to another tab, the link bar goes away. How is ownership of elements organized between tabs? Should I dynamically destroy the #linkBar div on the tab being navigated away from and rebuild it in the tab being navigated to? Or is there a better way to move it between them, or just manage visibility?
I would like to have the link bar follow the content on each tab as a footer, 'floating' one or two lines below the last content of each tab (rather than having it in a fixed position relative to the tab bar).
Ok ... It was simply adding the jQuery UI classes to the linkBar. Check out my working jsFiddle demo:
I moved the linkBar div out of the tabOne div and put it at the bottom of the tabs div:
<div id="container">
<div id="title">
<h1>title bar</h1>
</div>
<div id="tabs">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<div id="tabone">
content goes here
<br><br><br><br>more stuff<br><br><br>more stuff<br><br>
</div>
<div id="tabtwo">
content goes here...
</div>
<div id="tabthree">
content goes here...
</div>
<div id="linkBar">
<span id="leftLink"><< left link</span>
<span id="rightLink">right link >></span>
</div>
</div>
</div>
I slightly altered the linkBar style by giving it a top and bottom margin as well as hiding it by default:
#linkBar {
display: none;
margin: 10px auto;
}
Then I simply added the jQuery UI classes to the $linkBar. I slightly altered the jQuery to be more readable:
$("#accordion").accordion({ header: "h3" });
var $tabs = $("#tabs"),
$linkBar = $("#linkBar");
$linkBar.addClass("ui-tabs-panel ui-widget-content ui-corner-bottom");
$linkBar.show();
$tabs.tabs();
$('#title').click(function() {
$tabs.tabs('select', 0);
return false;
});
Note: You could just add class="ui-tabs-panel ui-widget-content ui-corner-bottom" to the linkBar div and be done with it. But, I think I like it better managed in the JS.