I'm trying to move the caption outside the coursel towards the left side but the problem it's not working. Whenever it moves outside its parent container it stops showing. Can somebody please help me out. Here is a JS bin link --> JSBin
It would be great if anyone could help me out. Thanks
OS: Mac
Browser: Chrome 74.0
Bootstrap version: 4.1.1
Set the caption relative to the image:
.carousel-inner img {
width: 100%;
height: 100%;
position: absoloute;
}
.carousel-caption {
color: #000;
position: relative;
float: left;
left: 0;
margin-left: 30px;
margin-top: 30px;
}
The element with the class carousel-inner has the following declaration set by Bootstrap: overflow: hidden. It prevents any of its children elements placed outside its padding-box to be visible.
To prevent that behaviour, you need to override that declaration with: overflow: visible. Then, to prevent the slides from being shown when moving, you need to wrap the carousel inside another element, add some padding at the bottom of that element to allow the caption to be visible (60px for instance), and set its overflow property to hidden.
So you need to add the following code to your CSS:
.carousel-container {
padding: 0 0 60px 0;
overflow: hidden;
}
.carousel-inner {
overflow: visible;
}
<div class="carousel-container">
<div class="carousel">
<!-- The code of the carousel -->
</div>
</div>
Related
Yesterday I faced a CSS issue which seems to be related to mat-drawer and Angulars router-outlet. I have got a fullpage flexbox with two children. A mat-toolbar at the top and a custom component app-sidenav at the bottom. This works fine and the app-sidenav fills the rest of the page since the flexbox is stretchy. Have a look at this simplified setting before continue:
<div class="flex">
<mat-toolbar></mat-toolbar>
<app-sidenav></app-sidenav>
</div>
The related css is
.flex { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: stretch; }
mat-toolbar { flex: 0 0 auto; }
app-sidenav { flex: 1 1 0; }
In the app-sidenav component I now have the following template
<mat-drawer-container>
<mat-drawer></mat-drawer>
<mat-drawer-content>
<main><router-outlet></router-outlet></main>
</mat-drawer-content>
</mat-drawer-container>
And the related styles are
mat-drawer-container, mat-drawer-content { display: block; height: 100%; }
main { height: 100%; overflow-y: auto; }
This works fine and the height is appropriate unless there is no content larger than the app-sidenav height. The scrollbar appears at the outer flexbox component and not at the main-tag. I also tested !important at the heights and also 100vh but with no success. So how can I get the overflow-y at the main tag working?
I'm pretty sure that there is a simply trick, but I can't get it for know. Thanks for your help.
Cheers!
Edit:
I made a stackblitz for this issue. When you navigate to the ciao component you see that the scrollbar appears at the document root and not in the main tag.
In addition to #Sakkeer's working solution I found another way without hacking the position attribute but with usage of flex. Just add (not replace) the following css rules to the existing styles.
app-sidenav { display: flex; }
mat-drawer-container { flex: 1 1 auto; }
Try this for main css class
main {
position: absolute;
right: 0px;
left: 0px;
bottom: 0px;
top: 0px;
}
This worked for me!add it to style.scss:
.mat-drawer-inner-container{ overflow: hidden !important; }
if it doesn't work for you, try below in style.scss:
*{ overflow: hidden !important; }
<mat-drawer-container autosize style="position: absolute;right: 0px;left: 0px;bottom: 0px;top: 0px;">
<mat-drawer #drawer mode="side" class="toolbar">
<app-sidenav></app-sidenav>
</mat-drawer>
<router-outlet></router-outlet>
</mat-drawer-container>
Above code just worked for me, when I put style directly and use autosize so that mat-drawer-container will not overlap on the router page.
It will add two scrollbar. One for main page scroll and another scrollbar is for the mat-draw which slide from left. The mat-draw will have its own scroll bar. Just like the screenshot.
.mat-drawer.mat-drawer-end {
position: fixed;
overflow: auto;
}
Beside having long page i can see the mat-draw on the top with its own scroll. I hope this helps with minimal code require to achieved what we want.
I'm essentially displaying a banner image on a page. At the base of that image is an overlay (the abs. pos. div) with a semi-transparent background image to make a "see through" effect. Everything is positioned properly and working fine except the overlay at a width of 100% expands outside of my container div. I've tried setting the overflow to hidden of the container div but that does not seem to work. My parent container has a position relative as well. This is responsive so the overlay with need to shrink and expand to the image width. Here's my code:
.hero-img-wrap {
position: relative;
margin-top: 35px;
padding-left: 15px;
padding-right: 15px;
}
.hero-img-wrap img {
width: 100%;
height: auto;
}
.hero-img-wrap .trans-overlay {
position: absolute;
bottom: 0;
z-index: 9;
height: 19px;
background-image: url('../images/semi_transparent_white.png');
width: 100%;
}
<div class="hero-img-wrap">
<img src="images/banner_image.jpg" alt="">
<div class="trans-overlay"></div>
</div>
I could pull this off with JQuery but I'd like to avoid that. For what it might be worth - this code is within a Bootstrap 3 column.
Since you've defined the height, why not a negative value
position: relative;
top: -19px;
Just a thought, heres a fiddle for ya
http://jsfiddle.net/g11yggap/
Try
Width:inherit;
On overlay div
Can't figure out what's going on, I know it's div related but can't quite figure out where I'm going wrong. Can someone have a quick look and tell me where I'm goofed, or better yet, how to fix it?
It's the blue line at the bottom of the page. I've tried everything I know (which isn't much anymore). Thanks for any advice!
Website:
http://www.cityplaceselfstorage.com
-Jason
Change the height property on #templatemo_middle to auto. Currently the height is specified at 347px.
Update following rule:
#templatemo_middle {
background: url("images/templatemo_content.jpg") no-repeat scroll left bottom transparent;
clear: both;
color: #F6F6F6;
height: 305px;
margin-bottom: 40px;
width: 960px;
}
changing height auto will misplace the world map image of background of this div.
You have to do few arrangement of css code and add extra div
First Step:
Change CSS of .templatemo_middle to following
.templatemo_middle{
clear: both;
width: 960px;
height: auto;
color: #f6f6f6;
margin-bottom: 40px;
/** remove background image from here **/
}
/**add new class which will be used for new div */
.new_class{
background: url(/images/templatemo_content.jpg) no-repeat scroll left top transparent;
}
Second Step:
Content Within .v_divider should be enclosed to another div and the background can be assigned
<div class="col_w540 float_l v_divider">
<div class='new_class'>
....here goes content....
.....
</div><!-- end the new div -->
</div><!-- end of div.v_divider -->
Save it and run
I have an image container based on Jquery Mobile listview element structure.
Looks like this:
<li>
<div class="ui-btn-inner">
<div class="ui-btn-text">
<a>
<img src="img/products/l/demo2.jpg">
<h3>product2</h3>
</a>
</div>
</div>
</li>
I'm overriding JQM-CSS to create an image gallery-list. Images and h3 are both contained inside a link element. As the images can have different heights, I want to set a CSS fixed-height/overflow:hidden to the link element to cut off images at the top using vertical align: top.
Here is my CSS so far:
li {
display: inline-block;
min-width: 200px;
max-width: 300px;
width: 24%;
}
li img {
width: 100%;
position: static !important;
max-width: 185px;
max-height: inherit;
}
// fix height and overflow hidden
li a {
height: 100px;
overflow: hidden;
vertical-align: bottom;
}
It doesn't work... If I check on Firebug, the element-height is set to 100px, but it covers the image top versus covering the image bottom and h3, which I do not want to crop away.
I have tried setting line-height to 100px as well, but this does not work at all.
Any hints on what I'm doing wrong?
Thanks!
EDIT:
Can't use clip either, because I don't know at what height I want to start (img.height-100px) and I cannot clip from the bottom. Or can I?
SOLUTION:
It would work like this:
li a {
position:absolute;
bottom: 0;
left: 0;
}
li div.ui-btn-text {
position: relative;
height: 100px;
overflow: hidden;
}
Doesn't use vertical-align but the result is ok.
I'm afraid that can't work. Adding display:block; to your link and would be a start for your method, but check the result: http://jsfiddle.net/uu96D/
vertical-align: bottom; won't push the a tag to the bottom of the container. Here is a guide of how vertical-align works: http://phrogz.net/css/vertical-align/index.html
To solve your problem i'd go to some js solution, and add a negative top margin to the image if its taller than, for example, 80px. Here's a fiddle with the result: http://jsfiddle.net/uu96D/1/
And the code using jQuery:
$('img').each(function(){
var height = $(this).height();
if (height > 80) {
$(this).css({marginTop: "-" + (height-80)});
}
});
I certainly do not want to add to the pile of vertical alignments CSS questions, but I've spent hours trying to find a solution to no avail yet. Here's the situation:
I am building a slideshow gallery of images. I want the images to be displayed as large as the user's window allows. So I have this outer placeholder:
<section class="photo full">
(Yes, I'm using HTML5 elements). Which has the following CSS:
section.photo.full {
display:inline-block;
width:100%;
height:100%;
position:absolute;
overflow:hidden;
text-align:center;
}
Next, the image is placed inside it. Depending on the orientation of the image, I set either the width or height to 75%, and the other axis to auto:
$wide = $bigimage['width'] >= $bigimage['height'] ? true: false; ?>
<img src="<?= $bigimage['url'] ?>" width="<?= $wide? "75%" : "auto"?>" height="<?= $wide? "auto" : "75%"?>"/>
So, we have a fluid outer container, with inside a fluid image. The horizontal centering of the image works, yet I cannot seem to find a way to vertically center the image within it's container. I have researched centering methods but most assume either the container or image has a known width or height. Then there is the display:table-cell method, which does not seem to work for me either.
I'm stuck. I'm looking for a CSS solution, but am open to js solutions too.
This works out fine:
section.photo.full {
display: table;
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
text-align: center;
}
section.photo.full a {
outline: 0;
display: table-cell;
vertical-align: middle;
}
section.photo.full img {
margin-top: 0;
}
I'm guessing display table-cell hadn't worked for you because it's parent container wasn't displayed as a table.
Here is a demo in jsfiddle:
http://jsfiddle.net/duopixel/5wzPS/
Maybe this works for you (div is the div wrapped around your image):
div {
display: table-cell;
vertical-align: middle;
text-align: center;
}
Running example.
Let's skip all of the table nonsense! :)
<div>
<img src="https://placehold.it/1000x1000">
</div>
div {
position: relative;
}
img {
position: absolute;
width: 70%;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0);
}
Example: https://jsfiddle.net/te29m9fv/1/