here's my plunker: http://plnkr.co/edit/HSVBuzzp1IIDjFdbuf4E?p=preview
in short: I cannot find a way to put the footer at the bottom of the page.
I tried to just rely on html:
<footer></footer>
I tried using bootstrap ui's class:
<div class="modal-footer">
or
<div id="footer">
<div class="container">
...
</div>
but nothing...It just doesn't seem working...
Check this out:
http://plnkr.co/edit/caLGN05wzH3Ls2PcRoTe?p=preview
html, body {
height: 100%;
}
.modal-footer {
position: absolute;
bottom: 0;
width: 100%;
}
I have added some more css in the head of the page.
Firstly, if you inspect the page, the length of the body is only half of the page. So we have to give it height 100% so that it takes the whole page.
Secondly, to place footer at the bottom of the page, we need to position it as absolute so that it aligns itself to its first positioned parent(in this case none, as we have not specified position to any other element), and then you can specify bottom as 0 so that it sticks to the bottom.
This is the normal way in which we can put footer at the bottom. You can check if bootstrap might have something inbuilt.
Hope this helps.
Related
I have a modal window that shows a few data that also has Images which open in Blueimp gallery. The problem I have is, when the image is opened in BlueImp gallery, the image is not vertically aligned in the middle of the screen. Its either to the bottom or to the top and it depends on where I have scrolled in the modal window. I need to go to the middle of the modal window and open the gallery in which case the Lightbox looks centered. This issue doesnt happen when blueimp is used directly in the page without a modal. It appears the blueimp gallery's lightbox is centered to the whole modal height instead of the viewport height. How can I override that for blueimp inside modal windows only? Is there a css fix or js fix to override this when blueimp is used in boostrap modals?
Here is a sample of my set-up:
<div uib-modal-window="modal-window" class="modal fade" role="dialog" size="xl" index="0" animate="animate" ng-style="{'z-index': 1050 + $$topModalIndex*10, display: 'block'}" tabindex="-1" uib-modal-animation-class="fade" modal-in-class="in" modal-animation="true" style="z-index: 1050; display: block;">
<div class="modal-dialog modal-xl">
<div class="modal-content" uib-modal-transclude="">
<div class="lightBoxGallery">
<a ng-repeat="image in vm.ngModel" ng-href="{{::vm.imageurl(image.name)}}" data-gallery="">
<img ng-src="{{::vm.getImage(image.name)}}" class="img-responsive img-thumbnail animated fadeIn">
</a>
<div id="blueimp-gallery" class="blueimp-gallery">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol> </div>
</div>
</div>
</div>
</div>
My set-up: Angular 1.5 + Bootstrap 3 + Bootstrap UI + BlueImp Gallery
UPDATE:
The problem I am having here is, my Bootstrap Modal window has overflow-y as scrollable and it has a fixed positioning:
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: none;
overflow: hidden;
-webkit-overflow-scrolling: touch;
outline: 0;
}
And when the blueimp-gallery is opened, as a child div with fixed position, it is positioning the Div to the center of the parent's fixed position instead of center of the viewport:
.blueimp-gallery {
position: fixed;
z-index: 999999;
overflow: hidden;
background: #000;
background: rgba(0,0,0,.9);
opacity: 0;
display: none;
direction: ltr;
-ms-touch-action: none;
touch-action: none;
}
The blueimp-gallery is aligning to the middle, but I dont want it aligning to the middle of parent (modal) div. I want it aligned to the middle of viewport. For example, in my laptop, my modal has a height of 2000px where as my viewport height is a lot less like 860px. That is why the gallery lightbox is opening either to the top or bottom of the viewport unless the user is right in the middle of the modal window. If I place the blueimp-gallery directly in the body without the modal window, I dont have this issue. But in this use case, I have to place the blueimp-gallery inside a Modal window that has variable height depending on the dynamic content loaded in it.
I am still stuck on this, does anyone have a suggestion to this problem please?
The only way I was able to resolve this issue was to pull the "#blueimp-gallery" element out of the Modal Window and then insert it again as a direct child of the body element. Using Jquery, I added this code that fixed the issue:
$(document).ready(function(){
$("#blueimp-gallery").prependTo($("body"));
});
Now, after the above code, the BlueImp Gallery's fixed position is relative to the body element and therefore the height is that of the viewport. The Modal height no longer affects the BlueImp Gallery's height since it is now placed as a direct child of body element.
You should try to put the blueimp in a div with the class row and then another div with the class col-md-6 not 100% sure but it should be alligned in the middle then.
<div class="container">
<div class="row">
<div class="col-md-6">
<div id="blueimp-gallery" class="blueimp-gallery vcenter ">
...
</div>
</div>
</div>
Edit tried it it has to have container tag above it to.
most likely this is not the sollution to getting it to the center vertically but this is worth a try i guess
ADDITION
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
create a costum tag add it in a css file and call on it.
Under my root div react creates another div "automatically". Is there a way to add a class to that div? I need to add height: 100% to it to prevent the background content to scroll in mobile when an overlay is shown.
This is how it is shown when i inspect the element on the site. I need to add height:100% to the data-reactroot div when a button is clicked. But that div is nowhere in my source code.
<div id="root">
<div data-reactroot data-reactid="1" data-react-checksum="161698...
I could add this code in the container's componentDidMount()
let root = document.querySelectorAll('[data-reactroot]')[0];
if (root) {
root.style.height = '100%';
}
But isnt there a better way to do it? This feels like kind of hacky (in a bad way)
#root > [data-reactroot] { height: 100% } in your CSS should work.
Or just the tag itself:
[data-reactroot] { ... }
If you want to use in-line css, just make your top div position is absolute and left, top, right, bottom is zero.
So if you inspect the element:
<div id="root">
<div data-reactroot>
<div style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px>
....
So simple by using the id reference
#root{
/* your css here! */
}
How would i come across the effect from this website http://www.theqcamera.com or http://plugandplaydesign.co.uk (the video + image at top) so that the image fills the screen on any screen size. Im not sure if this is responsive height but really would like to know how to do it.
There are a few ways to do this. The easiest is to use vh (vertical height) in your CSS. A setting of 100vh will make your div be 100% of the height of the screen being used to view the page. Combine this with a background image that is set to "cover" and a 100% width on the domain and you should be good to go.
<body>
<div class="container">
<div class="div_1">
content
</div>
<div class="div_2">
other content
</div>
</div>
</body>
.div_1 {
width: 100%;
height: 100vh;
}
.div_2 {
width: 100%;
height: auto;
}
Please note: vh is not supported in IE8. If you need to support IE8 for your project, going with position:absolute; height:100%; width:100%; margin: 0; is a slightly more complicated, but more backwards compatible answer.
try using height 100% , position absolute , margin 0 auto
this is how I've made my picture 100% on my website (http://www.dotto.be)
In my AngularJS app there is a controller which contains a list with messages:
$scope.messages = []
This list is updated as the application runs. In the template it is rendered in the following way:
<div style="height: 200px; overflow: auto">
...
<li ng-repeat="msg in messages">{{msg}}</li>
...
But when more messages comes than fits the 200px height, the scroll remains on the top.
How to automatically scroll to the bottom of the message list?
There is a directive "scroll-glue" from this library https://github.com/Luegg/angularjs-scroll-glue that solves the problem.
Just add scroll-glue directive to the div:
<div style="height: 200px; overflow: auto" scroll-glue>
...
Here is the link :
www.guidegather.com
(sorry, tried posting image but cannot)
If you look at the footer section, it appears correctly in all major browser (including IE9) but in IE7, the width of the div#mainfooter follows the max-width of .center class instead of extending horizontally to fill the space.
Here is the CSS :
.center{
margin:0 auto;
padding:0 50px;
max-width:960px;
}
#mainfooter{
background-color:#000;
color:#CCC;
list-style:none;
}
Here is how the HTML roughly looks like :
<body>
<div class="center">
Something here
</div>
<div id="mainfooter">
<div class="center">
Something here
</div>
</div>
</body>
As you can see, the div#mainfooter is independent of the previous div, but the width is restricted to the max-width of the previous div (and child div). Any solution to this?
Any help is appreciated. Thanks!
Since #mainfooter's rules will take priority over any inherited rules, you could specify a width for #mainfooter (width: 100%, or barring that, max-width: 100%). That should solve the problem.
So the solution is to add display:block to #mainfooter. Hope this helps anyone facing this issue in the future and great thanks for those who tried helping me