I am trying to create a header with a image which responds to screen size like one: http://appex.no/referanser
Any ideas on how they did it?
<div id="banner" style="width:auto;overflow:hidden;">
<img src="..." style="width:100%;" />
</div>
should work; then the div stays auto for responsive layouts and the img takes the size of the parent div
they removed the image with something like:
#media handheld, only screen and (max-width: 400px){
div#banner { display:none;
}
(just used inline for sake of the demonstration but can be class of course)
Related
I'm building a Rails app with Bootstrap 4. I have a number of large tables to display and since the app users are not very tech-savvy I would like to display a hint when a full table doesn't fit their screen and becomes scrollable. Any tips on how to achieve this?
You can add a alert with class="something".
<div class="alert alert-primary something" role="alert">
The table is scrollable!!!
</div>
Then, In the CSS file you can do:
.something{
display: none;
}
Then also write a media query to update the something class to display block.
#media (min-width: 576px) {
.something{
display: block;
}
}
Result: It'll not display the alert until the window size reduced to 576px.
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.
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.
Is there some way to provide different image sizes for the carousel for different screen sizes ? I understand the CSS media query can get this information to provide different CSS settings for different devices/screens, but I don't see anyway to pass this information into the carousel. For a full-screen carousel this seems to mean it only works properly on devices matching the image size.
You could make the images take up a certain percentage of the screen by scaling them.
ons-carousel-item {
text-align: center;
}
ons-carousel-item img {
width: 95%;
}
And the carousel:
<ons-carousel overscrollable auto-scroll fullscreen var="carousel">
<ons-carousel-item>
<img src="http://placehold.it/350x150">
</ons-carousel-item>
<ons-carousel-item>
<img src="http://placehold.it/700x100">
</ons-carousel-item>
</ons-carousel>
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