I am using Bootstrap 3 with the following sticky footer from http://getbootstrap.com/examples/sticky-footer/
I set the #footer to min-height: 420px; so it will work responsively and adapt to narrow width and expand in height and stack the column boxes. This works just fine.
But when setting a min-height the footer will cover the content in top of it.
Is there a solution to this so the footer will be "pressed" down?
This feature works by also setting a bottom margin on the body to offset the size of the footer.
For instance, sticky-footer.css contains:
body {
margin-bottom: 60px;
}
You'll need to adjust it to the height of your #footer.
Related
I want my fixed navbar that stays on the top of the page to display over everything as I scroll down through the page, but when I scroll down the Carousel ends up on top of the navbar.
I have tried to give a z-index: 0 with an !important tag to the carousel, and z-index: 1 to the nav bar but that didn't do the trick. There is a photo attached to show the problem I am talking about.
give the zindex of fixed navbar some higher value like
z-index: 1090
I wrap the Navbar in a sticky div:-
<div className="sticky-top" style={{ zIndex: 1090 }}>
<Navbar></Navbar>
</div>
BTW I use react-bootstrap.
I'm looking at my header CSS properties. My header has a z-index: 1. Fiasco.
Change it to 1090. It will help you.
Check all elements what was overflow by the gallery. Check them all!!! (z-indexes)!
I am trying to make the checkbox's closer together... without so much space in between vertically.
I'm using a cls to make the font size smaller which is working properly. Any ideas?
.my-class .x-form-cb-label
{
font-size: xx-small;
font-weight: bold;
}
here is a pic of the spacing that is too large
I created my css class, declared margin-bottom: -4px; (you can pick your size) and attached it to checkbox components with help of cls config. Here's the FIDDLE check index.html for css class.
I'm working in web project(Angularjs) and facing one problem. I have given height: 80% and my screen resolution is 1280 x 1024. but when I opened same project in my laptop(Resolution 1386*768) Div get invisible. I have tried following code
#media (min-height: 500px){
#chatViewList
{
overflow-y: auto;
position: relative;
height: 80%;
}
}
Please suggest andd help me.
Is the height of the parent element fixed? If not you can't use a percentage based height (there are some exceptions but they're unlikely to be practical).
I would suggest using the viewport height unit instead. vh allows you to specify a height in relation to the viewport window.
#media (min-height: 500px) {
#chatViewList {
height: 80vh;
overflow-y: auto;
position: relative;
}
}
Browser support: http://caniuse.com/#search=vh
VH is what you need!
height: 100vh; = 100% of device height
You can of course use like 80vh for 80% of the device height. VH means viewport height
You can set the responsive height of a div when it's part of a parent div that has a defined height.
Or, You can pre-define the height of the div or dynamic specify static values based on various commonly available heights <-- could be an overkill but can work.
Alternatively, try the following links"
https://www.sitepoint.com/community/t/how-to-make-div-height-responsive/30438
OR
http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
Its not best practice to create media queries to resolution height. how ever as you asked here I guess you trying to create full screen web page. to make it work set you html tag and body tag height 100%
ex:
html, body {
min-height: 100%;
hight: 100%;
}
like this what ever resolution you working on web page hight will remain 100%. then add CSS height as percentage as you wish. And also make sure you set min-height and max-height to all.
This is a little trick that I am using when creating full screen web pages
Hope this will help
for calculating the screen height for every screen we can use this formula.
height:calc(100% - 200px);
which calculate the height and subtracts 200px from it.
we can use any value in place of 200px
example
#div1 {
height:calc(100% - 200px);
}
if the screen size is 1000, Resulting div1 height will be 800
Default Material Design gives a sidenav width of 304px. I am trying to implement material design's use of flex boxes, by adding in a flex="66" attribute inside the md-sidenav element.
When I did, it shortened the sidenav vertically, instead of horizontally.
It seems like I'm unable to override that 304px without pure CSS, which, although I can accomplish, is something I was specifically hoping to stay away from.
I haven't seen this concept referred to in the Material Design documentation. Anyone else have this issue?
If you will look at angular-material.css as below
md-sidenav is displayed as
display : none
when its closed & its displayed as
display : flex
when its visible.
If you want to change its width you need to write below lines in yr custom.css which you should load after loading angular-material.css
width : 500px !important;
min-width : 500px !important;
max-width : 500px !important;
replace 500 with yr custom value.
How do I make all images align to top, not the middle? Also how do I adjust the position of the caption? For example to align it to the top left corner.
The images are center aligned by CSS with the !important Flag asigned.
you could either:
donwload a developement version, and change the css,
Apply a new css after loading the fotorama.css, also use the important flag
overwrite the css rule with javascript with the style.setProperty method
(note, you have to use this method on every image using the fotorama api
$(".fotorama").on("fotorama:show",function(){......})
the caption can be easily modified just by css with the class fotorama__caption - for example:
.fotorama__caption{
top:1%;
left: 2%;
font-size: 200%;
}