I am trying to create a design using bootstrap which has a fixed top navbar, 2 columns below that. The first column has a fixed top div with full parent width and more content beneath it which can scroll(the fixed div and navbar cant). The second column has an image which covers the whole column and nothing more.
I have done the following:
<nav class="navbar navbar-default navbar-fixed-top black">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">OWOL</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>EVENTS</li>
<li>SPONSORS</li>
<li>DASHBOARD</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container-fluid" style="margin-top: 80px;">
<div class="row">
<div class="col-md-8" id="content">
<div class="row" id="head-section">
<div class="col-md-10 text-center">
<h1 class="red">MEGA LEAGUE</h1>
<h4>FOOTBALL</h4>
</div>
<div class="col-md-2 text-right" style="padding-top: 20px;">
EDIT DETAILS
</div>
</div>
</div>
<div class="col-md-4">
fixed sidebar
</div>
</div>
</div>
With this little JS:
$(function() {
var new_width = $('#content').width();
$('#head-section').width(new_width);
});
Here's some relevant CSS:
#head-section {
position: fixed;
top: 80px;
padding-left: 50px;
padding-bottom: 20px;
padding-right: 50px;
box-shadow: 0 0 3px #000;
width: 100%;
background: #fff;
z-index: 2;
}
What happens is this:
As you can see the text "fixed sidebar" is going behind the fixed div(#head-section). That's because JS is setting its width as 1001px which is wrong according to chrome's inspect element which tells me its just 900px.
What am I doing wrong and how should I solve it?
Here's the bootply: http://www.bootply.com/0xIGx67IzM
Ok so there are two way to resolve your problem
JQuery Solution
Change the width with outerWidth
$(function() {
var new_width = $('#content').outerWidth();
$('#head-section').outerWidth(new_width);
});
CSS Solution
just replace width:100% width width:inherit in #head-section
#head-section {
width: inherit;
}
JQuery Example
CSS Example
You're setting your #head-section width equal to the width of the parent and then you're adding 100px of padding to it (50px to each side).
See this link for more info: http://quirksmode.org/css/user-interface/boxsizing.html
With standard positioning (position:static; or position:relative;) if you were to set your #head-section to {display:block;} (omitting the width:100%) that would automatically set it to fill 100% of the available horizontal space, and then your padding would push in instead of out.
In this case, however, because you're using position:fixed, your easiest solution would be to use your existing javascript and html (still removing the width:100% from your #head-section properties), but wrap the #head-section in another container element (perhaps an article for the sake of code legibility?)
From there you can update your javascript to:
$(function() {
var new_width = $('#content').width();
$('article').width(new_width);
});
See fiddle: https://jsfiddle.net/znhws64p/1/
Related
I've positioned Vis-network within flex sections.
You can see the full code here: https://codepen.io/MadBoyEvo/pen/XWdgzoB (try moving elements down)
The problem is whenever I try to resize the height of the section manually to '1000px' or whatever value the height of the diagram stays the same. When I push height directly to diagram sections resize properly. But this is problematic when I put something on the right side that expands the main section, and the diagram stays put with the default size. I tried to use autosize for vis.js but it doesn't seem to affect anything.
var options = {
"interaction": {
"hover": true
},
"autoResize": true
};
I tried height/width 100% and it seems it treats min-height as max-height as well.
.diagram {
min-height: 400px;
width: 100%;
height: 100%;
border: 0px solid unset;
}
.vis-network:focus {
outline: none;
}
<div class="defaultSection overflowHidden">
<div class="defaultSectionHead">
<div class="defaultSectionText"><a name="Diagram - Defaults">Diagram - Defaults </a> <a id="show_192677063" href="javascript:void(0)" onclick="show('192677063'); " style="display:none">(Show)</a><a id="hide_192677063" href="javascript:void(0)" onclick="hide('192677063'); ">(Hide)</a></div>
</div>
<div style="height:1000px" name="192677063" id="192677063" class="flexParent flexElement overflowHidden defaultSectionContent">
<div id="192677063" class="flexParent flexElement overflowHidden defaultSectionContent collapsable">
<div class="defaultSection overflowHidden">
<div class="defaultSectionHead">
<div class="defaultSectionText"><a> </a> <a id="show_376758632" href="javascript:void(0)" onclick="show('376758632'); " style="display:none">(Show)</a><a id="hide_376758632" href="javascript:void(0)" onclick="hide('376758632'); " style="display:none">(Hide)</a></div>
</div>
<div name="376758632" id="376758632" class="flexParent flexElement overflowHidden defaultSectionContent">
<div id="376758632" class="flexParent flexElement overflowHidden defaultSectionContent collapsable">
<div class="diagram" style="position:relative">
<div class="diagram" style="position:absolute" id="Diagram-02jbghuv"></div>
</div>
</div>
</div>
</div>
<div class="flexPanel overflowHidden defaultPanel">
<div></div>
</div>
</div>
</div>
</div>
I guess it could be related to position relative/absolute - but if i remove it diagram resize itself automatically slowly which looks very weird.
<div class="diagram" style="position:relative">
<div class="diagram" style="position:absolute" id="Diagram-02jbghuv"></div>
</div>
The end goal for me is to have a diagram resize automatically if something on the right side expands, and shrink if it's smaller (min 400px), unless I force the diagram to a static value. Also if I set sections/panels to something bigger I would like diagram to resize itself to match it.
Right now it seems I am fighting flex to position it properly.
On the path from the element with height:1000px to the element containing the diagram, there is a div element which does not propagate the height.
This can be fixed by setting display:flex on that element, see css class fix1 and its corresponding html element in the code below.
The other css class, fix2, shows how you can make the right panel autosize its width (based on the width of its content and a minimum width you choose, 600px in this example) a have the left panel take up the remaining space.
.fix1 {
display: flex;
flex-direction: column;
}
.fix2 {
flex-basis: auto !important;
min-width:600px;
}
<div class="defaultSection overflowHidden">
<div class="defaultSectionHead">
<div class="defaultSectionText"><a name="Diagram - Defaults">Diagram - Defaults </a> <a id="show_192677063" href="javascript:void(0)" onclick="show('192677063'); " style="display:none">(Show)</a><a id="hide_192677063" href="javascript:void(0)" onclick="hide('192677063'); ">(Hide)</a></div>
</div>
<div style="height:1000px" name="192677063" id="192677063" class="flexParent flexElement overflowHidden defaultSectionContent">
<div id="192677063" class="flexParent flexElement overflowHidden defaultSectionContent collapsable">
<div class="defaultSection overflowHidden fix1">
<div class="defaultSectionHead">
<div class="defaultSectionText"><a> </a> <a id="show_376758632" href="javascript:void(0)" onclick="show('376758632'); " style="display:none">(Show)</a><a id="hide_376758632" href="javascript:void(0)" onclick="hide('376758632'); " style="display:none">(Hide)</a></div>
</div>
<div name="376758632" id="376758632" class="flexParent flexElement overflowHidden defaultSectionContent">
<div id="376758632" class="flexParent flexElement overflowHidden defaultSectionContent collapsable">
<div class="diagram" style="position:relative">
<div class="diagram" style="position:absolute" id="Diagram-02jbghuv"></div>
</div>
</div>
</div>
</div>
<div class="flexPanel overflowHidden defaultPanel fix2">
<div></div>
</div>
</div>
</div>
</div>
You can see the full code here
Any value I set to data-offset for scrollspy does not work at all.
Here are the relevant html, css, and js code:
HTML
<nav class="navbar navbar-fixed-top navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><strong>YOUNG'S PORTFOLIO</strong></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right enlargeItem">
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
CSS
body {
background-color: gray;
padding-top: 110px;
data-spy='scroll';
data-target='.navbar';
data-offset='';
position: relative;
}
JS
$('body').scrollspy();
When I scroll to target area where a tag is defined (#aboutBox, #portfolioBox, #contactBox), it does highlight the appropriate list item.
However, it is off a bit, so I wanted to change the offset by changing the data-offset but changing the data-offset does not do anything.
Here is the link to the codepen if someone wants to take a look at the whole thing
Argh. Couple things wrong with my code.
I was trying to set attributes using CSS! WOW rookie mistake. I need some sleep.
I was using navbar-fixed-top class. So I had to manually offset by 150px.
I applied this to my javascript:
$("body").attr({
"data-spy": "scroll",
"data-target": ".navbar"
}).scrollspy({
offset: 150
});
Come across this thread as i am looking to find out if you can have a negative value on data-offset.
In response to this post You don't have to add any extra JS or CSS for scrollspy to work it's all bundled with bootstrap, you would just add the attributes to the body tag. ref: https://www.w3schools.com/bootstrap4/bootstrap_scrollspy.asp
<body data-spy="scroll" data-target=".navbar" data-offset="150">
Try this code :
$(document).ready(function () {
offset = 10; // get extra padding
nav_top = $("#tsnav"); // get the top navbar hieght
side_nav = $("#cve_info") // target nav
nav_height = nav_top.outerHeight() + offset; // actual height from top where content go and fixed
side_nav.find("a").on('click', function () {
let $el = $(this);
id = $el.attr("href");
$('html, body').scrollTop( $(id).offset().top - nav_height);
return false;
})
});
I've got rather a confusing situation in my layout. As I have attached below, the design shows text which a double lined and single lined. I set a margin to single lined texts so that it gets aligned. When there is a double lined text, I have to manually set the margin. Is it possible to set this without wrting a javascript function? could it be cone using pure CSS without having specific margins for each text type.
My div structure is as following.
<div class="operation text-center">
<i class="icon fw fw-ringing fw-3x"></i>
<span>Ring</span>
</div>
Yes, rather simple too using line-height and height:
.operation .itemText{
line-height: 15px;
height: 30px; /* at least twice the line-height */
}
<div class="operation text-center">
<i class="icon fw fw-ringing fw-3x"></i>
<span class="itemText">Ring</span>
</div>
The trick is defining a space for the text to the height of two lines. The small worded items still take up two lines, but fill only one with text.
Alternatively, you could give the whole .operation a min-height, but I prefer not to, as mobile responsiveness gets trickier the more you define heights.
With CSS Flexbox you don't need any specific height, it will align anyway, using margin: auto 0, and it does not matter how many lines you have.
.wrapper {
display: flex;
}
.operation {
display: flex;
flex-direction: column;
}
.operation .itemText {
margin: auto 0;
}
/* styles added for this demo */
.wrapper { margin-bottom: 20px; }
.operation { padding: 10px; }
<div class="wrapper">
<div class="operation text-center">
<i class="icon fw fw-ringing fw-3x">icon</i>
<span class="itemText">Ring</span>
</div>
<div class="operation text-center">
<i class="icon fw fw-ringing fw-3x">icon</i>
<span class="itemText">Ring<br>2 lines</span>
</div>
</div>
<div class="wrapper">
<div class="operation text-center">
<i class="icon fw fw-ringing fw-3x">icon</i>
<span class="itemText">Ring<br>3<br>lines</span>
</div>
<div class="operation text-center">
<i class="icon fw fw-ringing fw-3x">icon</i>
<span class="itemText">Ring</span>
</div>
</div>
I'm building a site using Angular 1, and am trying to do things the "proper" Angular way, without using jQuery to fill in functionality.
Right now, I'm trying to build a header/navbar that will display differently depending on the view.
My template for the header looks like this, using ng-class to apply styles for the different navbar layouts:
<header ng-controller="headerController">
<div class="row topnav-row">
<div class="navbar" id="nav-main">
<div class="navbar-inner">
<a href="home">
<img class="col-md-4" id="topnav-logo" ng-class="{$scope.where == '/' ? 'logoCenter' : 'logoLeft'}" src="media/kg-icon-placeholder.png" />
</a>
<ul class="nav">
<li class="col-xs-4 col-md-2 topnav">Contact</li>
<li class="col-xs-4 col-md-2 topnav">About</li>
<li class="col-xs-4 col-md-2 topnav">Portfolio</li>
</ul>
</div>
</div>
</div>
<hr class="topnavline">
</header>
My CSS classes look like this:
.logoLeft {
width: 100px;
float: left;
}
.logoCenter {
width: 300px;
}
As you can see, I want to display an image at width: 300px when the homepage "/" is loaded, and make it 100px wide and float left otherwise. I've been wrestling with this for awhile, and can't find anything written that indicates how this should be done properly. What am I doing wrong?
How do I hide my navbar when the user clicks on the "bar-icon"?
I want to create a navbar which begins hidden and when the user clicks on the bar icon, the navbar displays
. Can you do that with JavaScript? Or do you need jQuery for that?
HTML
<div class="banner">
<header class="header">
<i class="fa fa-bars"></i>
<nav class="nav">
</nav>
</header>
<div class="bannerContainer">
<h1>Heading 1</h1>
</div>
</div>
nav {
height: 60px;
width: 100%;
background-color: #ccc;
}
<div class="banner">
<header class="header">
<i class="fa fa-bars"></i>
<nav class="nav">
</nav>
</header>
<div class="bannerContainer">
<h1>Display like that above!</h1>
</div>
</div>
I'm just trying to figure out how I can hide the navbar, so no fancy-looking 3D effects when it displays is needed, (for now at least).
If I haven't provided enough information, please tell me so that I can provide the right amount of information needed to solve this.
Here is how to control that with a simple show and hide with basic javascript:
function openMenu(e){
document.getElementById('menu').style.display = 'block';
}
function closeMenu(e){
document.getElementById('menu').style.display = 'none';
}
https://jsfiddle.net/7xo87kz6/
You may use jQuery for this purpose.
Make sure to include jQuery in your project.
Jquery Part
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#bar").click(function(){
$(".bannerContainer").toggle();
});
});
</script>
HTML Part
nav {
height: 60px;
width: 100%;
background-color: #ccc;
}
<div class="banner">
<div id = "bar">
<i class="fa fa-bars"></i>
<nav class="nav">
</nav>
</div>
</div>
<div class="bannerContainer">
<h1>Display like that above!</h1>
</div>