I have a dashboard type page on the left i have tabs & right i have content of the respective tab. I am using bootstrap so i made 2 columns 1 for tab & other for it's contents but my problem is that the border of tabs is not covering the entire height of the content i want it to cover the full height so i have written a jquery that will set the height of the last tab ("#ws") but that work only on page load not on button click.
TLDR
1) Go to http://kwebmakerusa.com/whp/v3/dashboard.html
2) Can you see the border-right of the tab it's height is same as the content on the right
3) click any other tab eg:address book. Notice the height shrinks
What i am trying to do is keep the height same as the content on the right
here is my html :
<div class="col-md-2 col-sm-3 hidden-xs nopadding">
<div id="dtnavs">
<div class="col-md-12 tabtxt active" id="dasht">My Dashboard</div>
<div class="col-md-12 tabtxt" id="cartt">My Cart</div>
<div class="col-md-12 tabtxt" id="addresst">Address Book</div>
<div class="col-md-12 tabtxt" id="ordert">My Orders</div>
<div class="col-md-12 tabtxt" id="wisht">My Wishlist</div>
<div class="col-md-12 tabtxt" id="newst">Newsletters</div>
</div>
<div class="col-md-12 tabtxt" id="ws"></div><!--set height dynamicaly-->
</div>
On click
$("#addresst,#mtab3").click(function() {
$('#dashboardtab,#carttab,#ordertab,#wishtab,#newslettertab,#video').slideUp(500);
$('#addtab').slideDown(500);
$(".dashnav").find(".active").removeClass("active");
$(this).addClass("active");
setwsheight("#addtab");
$(".ccatname,#bcactive").text("Address Book");
console.log(this);
return false;
});
setwsheight();
function setwsheight(sh){
$('#ws').delay(1000).height($(sh).height()-$('#dtnavs').height());
var str = "$('#ws').height($("+sh+").height()-$('#dtnavs').height())";
console.log(str);
console.log(sh+" height : "+$(sh).height());
console.log("dtnavs height : "+$('#dtnavs').height());
console.log("WS height :" +$('#ws').height());
};
without jquery
I have change some Your HTML Code Like
Remove this class in content tab left40
Apply this css your content side parent content like col-md-10 col-sm-9 col-xs-12 nopadding
.selector {
border-left: 1px solid #ccc;
margin-left: -1px;
padding: 0 0 0 40px;
}
apply this css tab content col-md-2 col-sm-3 hidden-xs nopadding
.selector{
background: #fff none repeat scroll 0 0;
position: relative;
z-index: 999999;
}
Try this.
var newHeight=your calculation;
$('#ws').animate({
height:newHeight+"your unit"
},yourDelay,function(){});
Also if that still doesn't work, try making the #ws element's position property absolute in a CSS file, along with the code posted in this answer.
Related
I have a layout structure like a row with two columns, at the page start i should see only one column with full screen width, so i set it to col-sm-12 while once an event is triggered i have to show the right side column with column set to col-sm-4 and the main column from col-sm-12 should become col-sm-8.
So the layout looks like this and i've made an example that when the col-sm-12 is clicked i'd show the other column:
$('.main').on('click', function() {
$('.main').removeClass('col-sm-12')
$('.main').addClass('col-sm-8')
$('.side').removeClass('d-none')
})
html,
body {
height: 100%;
}
.main {
background-color: #ff23;
}
.side {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous" />
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-sm-12 main">
</div>
<div class="col-sm-4 d-none side">
</div>
</div>
</div>
At this how could i animate the column width change from col-sm-12 to col-sm-8?
i would do something like the hidden column will push the other by stretching it or any other fancy animation...
I think the transition css property should do the thing, but I am not sure. Try to set:
div[class*="col-"] { transition: .3s ease; } and let me know.
1.I am trying to get a fixed position div (#externalPopupHeader) to inherit the width of its parent width(#reportsWrap) with no success.
2 I am also trying to get the #externalPopupHeader div with the lengthy content to scroll horizontally WITHOUT the scroll bar being visible. This is required because I would then Like to use javascript to sync the column headings with the content below.
#reportsWrap{
min-width: 1050px;
overflow: hidden;
position: relative
}
#externalPopupHeader{
width: inherit // Have aslo tried min-width: 1050px, and width: 100%;
position: fixed;
top: 0
overflow-x: scroll // hidden disables the scrolling.
}
<div id="reportsWrap">
<div id="externalPopupHeader">
<div id="genConfigFieldsWrap">
<div class="genField">Record No.</div>
<div class="genField">Serial Number</div>
<div class="genField">Room Number</div>
<div class="genField">Codec IP</div>
<div class="genField">Model</div>
<div class="genField">Version</div>
<div class="genField">NTP Status</div>
<div class="genField">Speaker Track</div>
<div class="genField">Max RX Kbps</div>
<div class="genField">Max TX Kbps</div>
<div class="genField">Default Call Kbps</div>
<div class="genField">Remote View</div>
<div class="genField">Voice VLAN</div>
<div class="genFieldTrans">Transport</div>
<div class="genField">Olson Zone</div>
<div class="genField">Time Zone</div>
<div class="genField">Helpdesk</div>
<div class="genField">Provisioning</div>
</div>
</div>
<div id="innerReportWrap">
<div id="genConfigAnchor">
</div>
</div>
</div>
your code is ok. your div data is to small to check the original behavior.
try to add some more text to check.
<div class="genField">NTP Status NTP Status NTP Status NTP Status</div>
then you will see that it is correct.
you can check this example
https://jsfiddle.net/r61t50sb/1/
I am trying to create a sticky menu using CSS Bootstrap affix and list-group menu.
I manage to get most of it to work except for when the user scrolls down.
When the user scrolls down, the menu seems to take the entire with of the page.
I tried to set it up via data attributes
using something like this
<div class="container">
<div class="row">
<div class="col-md-3" id="leftCol">
<div data-spy="affix">
<div class="list-group list-group-root well">
<a class="list-group-item" href="#introduction">Introduction</a>
<a class="list-group-item" href="#features">Features</a>
<a class="list-group-item" href="#dependencies">Dependencies</a>
</div>
</div>
</div>
<div class="col-md-9" id="mainCol">
Some long text for the body along with some tables.
</div>
</div>
</div>
But the data attribute did not make the menu stick! it just kept it on the top.
So I tried to use JS to get the job done like this
$(function(){
$('#leftCol').affix({
offset: {
top: 100,
bottom: function () {
return (this.bottom = $('.footer').outerHeight(true))
}
}
});
});
I created jsFiddle to show you the current behavior.
How can I fix this affix so when the user scrolls down the menu maintain the same shape?
First of all, you should use either data-attributes or JS.
I updated your jsFiddle. The position of id="leftCol" was changed:
<div class="col-md-3" >
<div id="leftCol">
...
</div>
</div>
and style was added:
#leftCol {
width: 220px;
}
Also, you should add media queries to remove affix from mobile view.
As an "unacceptable" workaround, I set a max width of the menu to 250px like so
.list-group.list-group-root {
padding: 0;
max-width: 250px;
}
I am not sure how to get it to work without adding a max-with the max with should be defined by the parent. In this case class="col-md-3"
UPDATED
javascript to the rescue!
I added the following JS code to solve this problem once an for all.
It basically resize the menu everytime affix.bs.affix event is fired
$(document).on('affix.bs.affix', '#docs-menu', function() {
$(this).width($(this).width());
});
From the docs
affix.bs.affix => This event fires immediately before the element has
been affixed.
Ok I believe I got most of the code working like you want it to. The main changes I made were adding this CSS:
#leftCol {
display: block;
height: auto;
padding: 0;
width: 100%;
}
.navbar-fixed-top-again {
position: static;
top: 60px;
z-index:1031;
}
.navbar-inner {
background: red;
padding: 5px;
}
.affix {
position: fixed !important;
}
and I changed up some of the structure on your HTML:
<div class="container body-content">
<div>made up content to allow the navigation to scroll more before it becomes sticky. This height will need to be set in the data-offset-top which is in the leftCol DIV just below this content. The same will apply if you need to set it for a footer offset.</div>
<!-- new nav section -->
<div class="col-md-3 navbar-fixed-top-again" id="leftCol" data-spy="affix" data-offset-top="80">
<div class="navbar-inner">
<div class="list-group list-group-root well">
*the rest of your code*
</div>
</div>
</div>
</div>
The main problem now is having a sticky navigation menu with variable height. If you notice when you scroll your reading content underneath jumps up and gets hidden. It seems that it is possible to fix this using JavaScript (link to SO question).
Heres the link to your updated Fiddle. Hope that helps.
I have a bootstrap row with 3 columns nested within a container which I'd like to give a height of 100% for each row, applying vertical scrolling if they overflow.
Current Layout
DOM
<body>
<div id="wrapper">
<nav...
</nav>
<div id="page-wrapper" class="container-fluid">
<div class="content" ui-view>
<!-- content starts here (loaded by angular)-->
<div class="row">
<div class="col-md-4 nopadding">
...
</div>
<div class="col-md-4">
<!-- example column content -->
<div class="list-group">
<a class="list-group-item" ng-repeat="..."></a>
</div>
</div>
<div class="col-md-4 nopadding">
...
</div>
</div>
<!-- content ends here -->
</div>
</div>
...
I tried a lot of things now, e.g. negative margins, absolute positioning, displaying the columns as table/table-cells. However everytime the content populates, the list groups expand to the height they need for displaying all items, pushing the whole site down.
Based on other examples, it should work this way (it does not, though -> has no effect):
body, html {
height: 100%;
}
.table-row { // applied to "row"
display: table;
> [class*="col-"] { // applied to columns
vertical-align: top;
float: none;
display: table-cell;
}
}
.overflow-auto { // applied to the list groups inside the columns
height: 100% !important;
display: block;
overflow-y: scroll;
}
Anyone got an idea about how to solve this?
Examples tried:
How to make bootstrap column height to 100% row height?
Twitter bootstrap 3 two columns full height
Setting 100% height to columns in Twitter Bootstrap
Bootstrap 3 - 100% height of custom div inside column
http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
This is driving me mad: I have a small bit jquery who slides three divs horizontally.
FIDDLE
Edit 3:
Live demo; complete website showing how I want it to work.. until I get to less than 775px. Please resize window to see what I mean.
EDIT, by popular demand. What I want:
In small screens, say from 700 and down. I want one panel to fill the screen. At a time.
2ND edit:
It works fine at above 700px. Below that; I would want the screen to show only one panel at a time, and when desired (a click on the current panel), the next panel will slide in sideways. I.e. No stacked columns, which is the classic responsive design. Please see Fiddle. It is all good until you minimize the browser window or use a mobile device.
I define panel1 and panel2 as fixed width, and use a css calc to keep the third panel at 100% minus panel1 (200px) and panel2 (200px): (calc 100% - 400px)
This works ok, until I get down into small screens. Then it goes haywire:
The panels stack on top of each other vertically (I want to hide the panels not active), and because of the fixed widths I "see" tiny bits of squished panels to the right. Ideally, I want each panel to fill small screens 100%.
What I need help with is this:
I must either
find a way to replace this JS defintion of the slide distance of pixels to %
var margins = {
panel1: 0,
panel2: -200,
panel3: -400,
}
..and therefore be able to do my css calc (100% - 20%) or something like that.
..or, at the very least, find a way to hide panels when in small screens.
All pointers greatly appreciated.
You can read more about the TB3 grid here: http://getbootstrap.com/css/#grid
Also read: Twitter's Bootstrap mobile: more columns and Twitter's Bootstrap 3 grid, changing breakpoint and removing padding
You will need something like:
<div class="row">
<div class="col-sm-4">
<div class="panel">Panel 1</div>
</div>
<div class="col-sm-4">
<div class="panel">Panel 2</div>
</div>
<div class="col-sm-4">
<div class="panel">Panel 3</div>
</div>
</div>
Below the 768 pixels your columns will stack (100% screen-width) caused by the col-sm-4. Above the 767 pixels you can use a media query to give your panels a fixed width:
#media (min-width: 768px)
{
.panel {width:200px}
}
update (based on the comment) below.
Try this: http://bootply.com/73541
CSS
#media (max-width: 767px)
{
#panel1 {visibility:visible}
#panel2 {visibility:hidden}
#panel3 {visibility:hidden}
}
#media (min-width: 768px)
{
#menu {visibility:hidden}
}
javascript
function showandhide(show)
{
$('.panel').hide();
$('#' + show).css('visibility','visible').slideDown("slow");
}
$('.panellink').click(function()
{
showandhide($(this).attr('rel'))
return false;
} );
html
<div id="menu" class="row">
<div class="col-12">
<a class="panellink" rel="panel1" href="">panel 1</a> |
<a class="panellink" rel="panel2" href="">panel 2</a> |
<a class="panellink" rel="panel3" href="">panel 3</a>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4 col-lg-4">
<div id="panel1" class="panel">Panel 1</div>
</div>
<div class="col-sm-4 col-lg-4">
<div id="panel2" class="panel">Panel 2</div>
</div>
<div class="col-sm-4 col-lg-4">
<div id="panel3" class="panel">Panel 3</div>
</div>
</div>
</div>
Update 2 based on the response.
1) above the 767 pixels, all panel are shown in my example. You will have to reload the page when you resize from small to big.
To could also trigger this reload with $(window).resize() note some browser will fire this twice, see https://stackoverflow.com/a/4298653/1596547 for a solution
2) for "sliding in sideways" rewrite this: http://jsfiddle.net/ax4AC/2/:
$('.panel').css('margin-left','-260px').hide();
$('#' + show).css('visibility','visible');
$('#' + show).show();
$('#' + show).animate({
'margin-left': parseInt($('#' + show).css('margin-left'), 10) == 0 ? -$('#' + show).outerWidth() : 0,
opacity: "show"
});
html (new)
<div id="menu" class="row">
<div class="col-12">
<a class="panellink" rel="panel1" href="">panel 1</a> |
<a class="panellink" rel="panel2" href="">panel 2</a> |
<a class="panellink" rel="panel3" href="">panel 3</a>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-3 col-lg-3">
<div id="panel1" class="panel">Panel 1</div>
</div>
<div class="col-sm-3 col-lg-3">
<div id="panel2" class="panel">Panel 2</div>
</div>
<div class="col-sm-6 col-lg-6">
<div id="panel3" class="panel">Panel 3</div>
</div>
</div>
</div>
javascript (new)
function showandhide(show)
{
// source: http://jsfiddle.net/ax4AC/2/
$('.panel').css('margin-left','-260px').hide();
$('#' + show).css('visibility','visible');
$('#' + show).show();
$('#' + show).animate({
'margin-left': parseInt($('#' + show).css('margin-left'), 10) == 0 ? -$('#' + show).outerWidth() : 0,
opacity: "show"
});
//.slideDown("slow");
}
$('.panellink').click(function()
{
showandhide($(this).attr('rel'))
return false;
} );
//source timeout: https://stackoverflow.com/a/4298653/1596547
var id;
$(window).resize(function()
{
clearTimeout(id);
id = setTimeout(doneResizing, 500);
});
function doneResizing()
{
if($(window).width()>=768)
{
$('.panel').css('display','block');
$('.panel').css('visibility','visible');
$('.panel').css('margin-left',0);
}
}
css (new)
#media (max-width: 767px)
{
.panel{
margin-left: -260px;
}
#panel1 {visibility:visible; margin-left:0}
#panel2 {visibility:hidden}
#panel3 {visibility:hidden}
}
#media (min-width: 768px)
{
#menu {visibility:hidden}
.panel {display:block; visibility:visible; margin-left:0}
}
see: http://bootply.com/73715 (new!!)
From what I have understood from your question, you have the issue with panel3. You can use to avoid this type of annoyances.check live demo
.panel1, .panel2, .panel3
{
float: left;
height: 800px;
padding: 5px ;
overflow: none;
}