I'm making an angular web-app with a sidebar view attached to the side of every page. I'm using twitter-bootstrap to handle grid/spacing on the page and ui-router to handle the different views.
My views are laid out like this:
index.html
<div ui-view="sidebar"></div>
<div ui-view="content"></div>
<div ui-view="content-2"></div>
The markup for my sidebar is as follows:
sidebar.html
<div class="col-sm-3 sidebar">
<!-- sidebar view content -->
</div>
and the markup for my content views:
content.html and content-2.html
<div class="col-sm-9 container-fluid">
<!-- content view content -->
</div>
the content views are stacked one on top of the other next to my sidebar.
The problem is that one of my pages includes a dynamically expanding component, which increases the height of the content views. This pushes the lower content view ('content-2') down the page, and when it goes below the bottom of the sidebar view, it slides left, underneath the sidebar, instead of staying on the right below the first content view.
I've tried adding style="padding-bottom:500px" and style="vh:100" to the sidebar div, which works for a bit because it extends that view down, but I'd prefer a solution that doesn't unnecessarily extend the page beyond what is currently necessary. Additionally, once the content-view2 reaches the bottom of the padding, it still slides over just like before.
Update:
I finally got my plunker up, so hopefully this will illustrate the problem and what I'm trying to do: http://plnkr.co/edit/EbGJAqxdjHRCMjjC6waA
The content.html view will dynamically increase/decrease when the user presses the button, illustrating the problem (make sure to scroll down to see what I'm talking about).
The simplest working solution without layout changes. The problem is the float:left of the 2nd content, so let's change it to right when the screen size is large enough - plunker:
<div class="content2 col-md-10 container-fluid">
<div class="container-fluid" style="background:#800000;color:white">
<h2>Content Frame Two</h2>
<p>Centered below Frame One at start, should still be centered after button press.</p>
</div>
</div>
#media (min-width: 992px) {
.content2 {
float: right;
}
}
A simpler working solution + plunker:
Remove this from sidebar - style="padding-bottom:100vh" - as we don't need it anymore.
Change your html markup, so that both content areas would be wrapped in one big float. In this way, the 2nd content, can slide left.
Index:
<div class="container">
<div ui-view="sidebar"></div>
<div class="col-md-10 container-fluid">
<div ui-view="content"></div>
<div ui-view="content-2"></div>
</div>
</div>
Content 1:
<div class="col-md-12 container-fluid" style="padding-bottom:20px">
<!-- the padding on the following container is to simulate the added space
that appears once the div dynamically increases in size -->
<div class="container-fluid" ng-style="vm.contentStyle">
<h2>Content Frame One</h2>
<button ng-click="vm.expand()" type="button" class="btn btn-default">{{ vm.change }} Size</button>
<p ng-show="vm.info">{{ vm.info }}</p>
</div>
</div>
Content 2:
<div class="col-md-12 container-fluid">
<div class="container-fluid" style="background:#800000;color:white">
<h2>Content Frame Two</h2>
<p>Centered below Frame One at start, should still be centered after button press.</p>
</div>
</div>
Previous non-working solution:
It's bit hard to hard to replicate the problem without a working plunker/fiddler, but I think that setting the height of the sidebar to 100vh or the padding to calc(100vh - height of sidebar) will solve your problem.
1vh is 1% of the view port height - ie the available browser display area, so setting it using vh will resize your sidebar or the padding dynamically according to screen height.
Note of caution - vh (and vw) are only supported by modern browsers (see caniuse).
Related
I used thumbnail section and view section in my project. So I divided parent div into two div, first is col-md-3(that is thumbnail div) and second is col-md-9(that is view section). Now I want to hide first div and change second div into col-md-12 for small device like mobile or ipad.
Is there any way to make it with media query?
Bootstrap col system for grid has this built in.
When you specify col-md-3 you are saying "at medium screen give this col 3 blocks".
You can also do, side by side col-sm-12 to give it the entire row when on large screen and col-sm-0 to hide it when on smaller screens.
Look here for a better explanation about bootstrap grid system:
https://getbootstrap.com/docs/4.1/layout/grid/
<div class="row">
<div class="col-md-3 d-none d-sm-none d-md-block">THUMBNAIL</div>
<div class="col-md-9">Some data</div>
</div>
This will solve your issue.
For extra small and small screen thumbnail will not appear.
i have downloaded an html template and it has a banner after the nav bar, i am trying to replace the image banner with my image, i changed it to the same size of the image in the template and added, the html is like below:
<div class="single-creative-shop-banner parallaxBg bg-img" style="max-width:100%; height:auto;"
data-bg="assets/img/home-banner/home_shop_creative_01.jpg">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div class="creative-shop-banner-content">
<h2>Minimal Collection</h2>
<p class="mb-0">Unlock The Goddess In You</p>
</div>
</div>
</div>
</div>
</div>
the css is so long , not able to post in the question, my website is https://likhaa.com
the problem is when i am adding the banner image, its not properly displaying, instead some part is hiding under the navbar, and the width is also not proper. is there any code in html to fix it or can anyone help me with my code
Please remove the inline margin of 131px from the div having the class "shop-creative-banner" also remove position fixed from the div which is children of div having id "jarallax-container-0"
Background/skill: I am starting to test out using bootstrap 4 (first time using bootstrap) for a custom Wordpress theme. I have the basic understanding of HTML and CSS, but with the newer CSS and with any jQuery or javascript, I am fairly clueless and usually just hacking code I find online to try and make it work for me, with little understanding of how/why it works if I succeed.
Missing out a bunch of page header info link links to scripts and stuff which I do understand may eventually affect any suggested method, and just to keep it simple. For now I have the following HTML so far:
<div id="page" class="site">
<div id="header" class="container-fluid">
<div id="masthead" class="site-header row row-eq-height">
<div id="logo" class="col-sm-4 col-md-6 col-lg-3"></div>
<!--logo-->
<div id="fruits" class="align-self-center d-none d-md-block col-md-3 col-lg-6"></div>
<!--fruits-->
<div id="social" class="d-none d-md-block col-md-3 col-lg-3"></div>
<!--social-->
</div>
<!-- #masthead -->
</div>
<!--header-->
<div id="jumbotron" class="row">
<div id="notice" class="align-self-center col-md-3"></div>
</div>
<!--jumbotron-->
<div id="content" class="site-content"></div>
<!-- #content -->
<div id="footer" class="container-fluid">
<footer id="colophon" class="row"></footer>
<!-- #colophon -->
</div>
<!--footer-->
</div>
<!-- #page -->
The jumbotron has a background image and a div (#notice) inside it which will float to the left with some text inside. I want the div to take up all remaining viewport space after the header. I have managed to get the jumbotron div be the height of the viewport minus the header using the following CSS:
height:calc(100vh - 155px);
But this only works if I know the height of the header is 155px. In reality, it changes at different screen widths and depending on content.
Is there a way to set the CSS to use a calculation for the dynamic header?
If not, do I need to use some kind of jquery or javascript? If so, I would be very grateful for some fairly detailed instructions.
Note: I do not want the #jumbotron to be the height of the page and sit behind the header div as a solution because the background image display is important.
Thank you in advance :)
Since you can't know easily the height of the header in every device because it is a percentage of the height... And because it depends on a big bunch of CSS rules form BootStrap and your Wordpress theme... You will just measure it to deduct the remaining space.
<script>
$(document).ready(function(){
function adjustJumbotronHeight(){
var headerHeight = $("#header").outerHeight();
var viewportHeight = $(window).innerHeight();
var remains = viewportHeight - headerHeight;
$("#jumbotron").css({"height":remains});
}
// On page load
adjustJumbotronHeight();
// On resize (or mobile orientation change)
$(window).on("resize",function(){
adjustJumbotronHeight();
});
});
</script>
So I have created my website using Bootstrap. I want to add a facebook-like collapsible sidebar. I have tried to divide my website into two columns. One for the sidebar and other for the whole website using col-md-2 and col-md-10 but the problem that was occurring was the site was being overflown towards the right side. This is what I did:
<html>
<head></head>
<body>
<div class="container">
<div class="col-md-2">...Sidebar...</div>
<div class="col-md-10">...Rest of the website...</div>
</div>
</body>
</html>
But the site was overflowing towards the right side. I tried that with many other col-* but to no avail. I also added .clearfix class to the body but still could not fix the overflowing issue.
Q1. How can I fix the overflowing issue?
Secondly, I want to make the sidebar collapsible. I thought I would do that by hiding the col-md-2 and changing the class of the website holder div to col-md-12 and reversing the thing when the user un-collapses the sidebar but the problem I know that would be occurring is that I would not be having a smooth sliding effect.
Q2. How could I make a collapsible siderbar with a smooth slide effect?
Demo of what's happening.
Q1: Have you tried adding a row after the container?
<div class="contianer">
<div class="row">
<div class="col-md-2">...Sidebar...</div>
<div class="col-md-10">...Content...</div>
</div>
</div>
Q2: You can create you sider bar off the top of the screen and animate it in using jquery to slide it down to where you want it when the menu button is clicked.
I'm new to jQuery. I'm using Accordion. When I click on the accordion it overlaps on the footer. How can I avoid it
Below is the code for the footer -
<footer>
<div class="row footer_class">
<div class="container">
<div class="col-lg-8 font_color">Copyright © 2013</div>
<div class="col-lg-2 pull-right font_color">Powered by Test</div>
</div>
</div>
</footer>
Below is the picture of how accordion overlaps the footer.
I don't want it to overlap the footer but the footer should move down below the accordion when the collapsible menu is opened.
The problem is either the CSS for some wrapper for the accordions
Or the footer has been set to be fixed at that position on the page.
Make the wrapper (e.g. div) for the accordion fluid such that when accordion expands the wrapper height extends as well. Or you may add a dummy div after the accordion wrapper which will change in height when accordion is opened thus pushing the footer down.
set relative position for your footer.
position:relative
Happy Coding:)