i've been trying to properly set the css properties to have a ng-bootstrap carousel image fit into a given space (div) inside a custom ng-bootstrap modal. Watch this forked stackblitz code.
As seen in the sample source, the image overlaps the given space (height) of the modal as well as the col-8 where it is placed.
How do i make carousel follow the size of its parent col-8? so as to not overlap with modal size.
UPDATE
For those who can't see the issue, you can visit the actual app here
After some trial and error, i've come to this point. Only carousel-inner and its children does not follow its parent div which is ngb-carousel.carousel-modal. See this image below
As shown in the image above, i can't make carousel-inner follow the size of its parent ngb-carousel.carousel-modal which already follow the modal height. it always overlaps and extends over the carousel-modal height. Do note that i set them to max-height:100% to make it responsive.
Basically you just need to bring height 100% down the hierarchy of tags.
To set the modal-body height I set 100% - Modal Header Height (69px).
.modal-body {
height: Calc(100% - 69px);
}
ngbd-modal-content, ngb-carousel, .carousel-inner, .modal-body .row {
height:100%;
}
Stackblitz: https://stackblitz.com/edit/angular-csyyp8-heb7xf?file=styles.css
Give the image a fixed height within the container (that has a fixed height too). Then position the carousel caption accordingly, like so:
img {
height: 650px; /*adjust for your project*/
width: auto !important;
}
#media only screen and (max-width:767px){
img { width: 100% !important
}
}
.carousel-caption {
position: absolute;
bottom: 20px;
left: 3%; /*adjust for your project*/
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
max-width: 50%; /*adjust for your project*/
}
Play around with the values til it fits your needs.
After hours of understanding height, max-height and its relation to its parent tag. I've came up with the fix. see updated stackblitz here.
Basically, i made the image resize to fit in parent content giving the parent content as well as the img a fix height. Therefore, it will make the image auto resize to fit its parent div.
Related
I have centered my div ui-content to the middle of my page on a resolution of 1920x1080, but when I check it on a resolution of 1366x768 the div doesn't adjust itself for a lower height. On the 1920x1080 resolution, when I resize the height I have the exact same problem. I would have expected it resize to something smaller, as it does with the background image.
I tried working with the atrribute max-height, but that just adds a scroll bar and does nothing. I also tried Oliviers suggestion, but that didn't seem to do anything either. I created a JSFiddle with the full code here and added the relevant css code below.
element.style {
margin-bottom: 30px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.ui-content {
padding-top: .5em;
max-width: 768px;
margin: 0 auto;
background-color: rgba(19, 23, 23, 0.38);
border-radius: 26px;
}
The problem is that he parent div of the ui-content element has no specified height. I made another fiddle to demonstrate:
https://jsfiddle.net/v8exwacj/
Note in the fiddle that the % height element only gains a height when its parent has a specified height, ie height: 200px;
You could remedy this by giving the parent element a specific height, or by using javascript to adjust the height dynamically. The issue is explained in much further detail here: Percentage Height HTML 5/CSS
That answer mentions the following as a solution for modern browsers:
div {
height:100vh;
}
Which would make the div 100% of the viewport height.
I've created the following demo to show my issue:
http://francisbaptiste.com/nov17/
Each div is 33.33% wide. Within the div is an image with 100% width. I want it to be a perfect grid of images, but the height of the div is always a little more than the height of the image.
Shouldn't the height of the div be set by the height of the image within it? So why is there that little bit of space at the bottom?
The gap is coming from the actual whitespace after the image tag. You can use this to fix it:
.card img {
display: block;
}
Fiddle
Or a more hacky solution:
.card {
font-size: 0;
}
Fiddle
I thinks the problem is the height of outer div, you cannot use auto since the browser may have some default action for the div and its inside content. Instead, I specify the percentage of height and solved the problem
.card {
width: 33.333%;
height: 50%;
overflow: hidden;
float: left;
background: black;
color: white;
}
Does that make sense to you?
I'm trying to make extensible sidebars to the full document height without Javascript. I started to wrote some code to make this happen, but however, both div height are not extending after the viewport size.
Here is a small codepen of what is my problem http://codepen.io/anon/pen/bpAzo. As you can see, if you scroll down, height of both sidebars are just set to viewport size which is weird because i set both body, html, #sidebars to height: 100%;.
Is there a way to extend to full page height without using Javascript ?
Thank you.
You just set your sidebar height to 100% which gives it just a 100% of current browser size. Remove the height of your sidebar and remove also the html and body code.
#sidebar {
position: absolute;
top: 0;
width: 100px;
color: green;
color: #FFFFFF;
}
.left {
background-color: blue;
left: 0;
}
.right {
background-color: red;
right: 0;
}
DEMO HERE
http://codepen.io/anon/pen/jfEhH
If you set html and body to 100% height it will just be 100% of the window ( it's parent ) size. You need to set a specific height ( 3000px ) or 200% for example, which will be 2 times the windows height.
Body tag on codepen by default have margin. Without margin all looks good.
http://codepen.io/suez/pen/zJhne
But in the future, i will reccomend you to use overflow: hidden; on body (combined with margin: 0), this will provide 100% confidence that all of your content always will be inside viewport (without any scrolling).
Edited: if you want to use more than 100% of viewport height for your site, then you need to use position: fixed; on sidebar.
Just make the "height" attribute in your CSS style sheet to "auto", like as follows,
sidebar {
position: absolute;
top: 0;
height:auto;
width: 100px;
color: green;
}
Don't worry about "sidebar.right" ,as u will see no red color on right side of your page. It will automatically show up when you add up some content to it or just add few <br /> tags.
I'm building this 15 page website so I really want to make my main container ( the light grey one ) be flexible in height.
When I select specific pixel height on my home page ( the only page so far ) everything is great but when I change it to 100% height, my container completely disappears. Is there anything I should do differently?
My link:
http://dariawdesign.com/acupuncture/StamfordAcupunctureHome.html
CSS for the container:
#maincontainer {
width: 1110px;
height: 3900px;
background-color: #E6E7E8;
margin-left: auto;
margin-right: auto;
margin-top: -16px;
}
Don't set your height to a pixel value, let it be auto. Then add overflow: hidden to your #maincontainer styles to expand the container to fit its floated children.
I have a footer i created for a website, but for some reason when i change the width of the window the background image seems to just disappear throughout the right side as i'm shrinking the width of the window.
The footer is supposed to stretch 100% accross the bottom of the screen and does so until i start shrinking the width of the window to a certain point.
You can see an example of my issue Here
Any ideas how to fix this? I am totally stumped. Maybe i did something wrong with width?
The width of #footer is set to auto, and the content within (#content-wrapper) has a fixed width.
This is causing the horizontal bars to appear.
To solve this, you can set overflow:hidden to the parent div (#footer).
Try this:
#footer {
background-image: url("images/footer-bg.png");
background-repeat: repeat-x;
height: 451px;
margin: auto 0;
width: 100%;
overflow: hidden; //What you're looking for.
}
If you also want the inner div (#content-wrapper) to dynamically resize itself, use a percentage, instead of a pixel dimension for width:
#footer #content-wrapper {
height: 451px;
margin: auto;
width: 83%;
}
Hi i have check to your demo page you have define your footer width 1265px and now
than your define min width your html or body as like this
body, html {
min-width: 1265px;
}
because your max width is 1265 define to your footer so that you define same width your body or html