The following CSS increases the height but not the width:
.mat-bottom-sheet-container {
min-height: 100vh;
min-width: 100vw;
margin-top: 80px;
}
Anyone know how to increase the MatBottomSheet width? Stackblitz new window demo.
Note that the demo has to run in a new window (Open in New Window) in order to see that the MatBottomSheet is not full view.
this is because you have mat-bottom-sheet-container-large applied to the same element which is having css
.mat-bottom-sheet-container-large {
min-width: 512px;
max-width: calc(100vw - 256px);
}
remove this class or add !important property to min-width in your mat-bottom-sheet-container class
.mat-bottom-sheet-container {
min-height: 100vh;
min-width: 100vw !important;
margin-top: 80px;
}
Better instead of CSS overwriting .mat-bottom-sheet-container, you can use your own custom CSS class for every bottom sheet and pass that class to the MatBottomSheet with the panelClass attribute in the configuration object.
this.myBottomSheet.open(MyComponent, {
panelClass: 'my-component-bottom-sheet'
});
In your global styles you define your custom class:
.my-component-bottom-sheet {
min-height: 100vh;
min-width: 100vw !important;
margin-top: 80px;
}
And so you can define separate classes for each bottom sheet.
So for something like this, when you want to edit the size, it's easiest to wrap your bottom sheet component in a div, and set the min-width on that - rather than trying to override the outer/parent width.
HTML:
<div class="bottom-sheet-containter">
//Bottom sheet content
</div>
CSS:
.bottom-sheet-containter {
min-width: 80vw !important;
}
I had ran into the same problem but this solution worked perfectly for me.
Related
I'm looking for CSS rules that allow setting fixed element width (let's say width: 500px), but combines it with max-width: 100% if a container is narrower than the element.
I'm thinking about something similar to:
.elem {
width: 600px;
max-width: 100%;
}
This snippet works perfect - if a .elem's container is narrower than the .elem itself, the .elem has container's width - smaller than 600px.
How to achieve the same effect with min-width? The following snippet doesn't work:
.elem {
min-width: 600px;
max-width: 100%;
}
Maybe any ideas using CSS Grid or even JavaScript?
Are you looking for someting alike :
body {
margin: 0;
}
div {
/* demo purpose */
width: 90%;
margin: auto;
padding: 1em;
border: solid;
/* flex optionnal */
display: flex;
flex-wrap: wrap;
gap: 1em;
}
button {
min-width: clamp(320px, 600px, 100%);
}
<div class>
<button>hello</button>
<button> hello hello hello</button>
<button> hello hello hello hello hello hello hello hello hello hello hello hello</button>
</div>
320px (can be 0 to X ) is the min-width you agree width, 600px the max-width you allow and 100% the limit not to pass.
here is a pen to test and play with : https://codepen.io/gc-nomade/pen/bGqyJmL
Its seems like clamp(MIN, VAL, MAX) is your answer in this case.
The clamp() CSS function clamps a value between an upper and lower bound. clamp() enables selecting a middle value within a range of values between a defined minimum and maximum. It takes three parameters: a minimum value, a preferred value, and a maximum allowed value. The clamp() function can be used anywhere a length, frequency, angle, time, percentage, number, or integer is allowed.
clamp(MIN, VAL, MAX) is resolved as max()(MIN, min()(VAL, MAX))
https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()
min-width cannot overwrite width in your written code, I think same as #dantheman. you might looking for width: 100%; max-width: 600px min-width: 320px.
It will take the whole container but not higher than 600px and not smaller than 320px.
I got my page working how I wanted it (based on the previous question I asked). However, when I display the timeline (default is display:none) it creates a large gap of empty space beneath it. How can I remove this empty space? I just want the timeline to replace the image when it is clicked and vice-versa.
Here is my code pen
I don't know what code to include here.
You are using position:relative and giving css top value. That is causing this issue. I have done some change in css with position and top values. That works as you require.
#timeline{
position:absolute;
background-color:beige;
/*top:-829px;*/
top:210px;
width: 755px;
height: 827px;
margin-left: 180px;
}
Hope this resolves your issue.
change the css,
#main-image-div{
position: relative;
margin: 0 auto;
width: 750px;
height: 400px;
}
#main-image-div img{
max-width: 100%;
}
#timeline{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
Hope this will solve the issue.
I created a nicer toggle effect and i think that's what you wanted.
http://codepen.io/anon/pen/dvdLpY
var img = $('img');
var list = $('.list');
list.hide();
img.click(function(){
$(this).fadeToggle(function(){
list.fadeToggle();
});
});
list.click(function(){
$(this).fadeToggle(function(){
img.fadeToggle();
});
});
How can I get my Avada (or Custom Wordpress Theme) scroll 100% height divs to go full height of the browser when I have to scroll down or up?
Thank you in advance
Live example
You have two options:
1º - With CSS, using Viewport Units (vw,vh)
section {
width: 100vw;
height: 100vh;
}
section.one {
background: red;
}
section.two {
background: grey;
}
section.three {
background: blue;
}
DEMO
2º - With JQuery using fullpage.js script
DEMO
I have a webpage that has jpegs that switch to gifs when you hover over them. I do this using this code
<img src="images/e911_icon_vi_site_2014_white.jpg" onmouseover="this.src = 'images/e911_icon_vi_site_2014_white.gif'" onmouseout=" this.src = 'images/e911_icon_vi_site_2014_white.jpg'" class="servicesimages">
I gave it a class of service images so I can apply this style
.servicesImages{
height:300px;
width:412px;
}
The class worked when it was just a normal image. However, now that its a rollOver image, the class doesnt apply and the image defaults to its normal size, for both the gif and the jpeg.
A live example can be seen HERE
How can I fix this?
In fact, you dont need JavaScript to do this. You can use only pure CSS.
JSFiddle
HTML
<div class="imgif"></div>
CSS
.imgif {
height: 400px;
width: 400px;
background-position: center;
border-radius:50%;
background-image: url("http://placekitten.com/400/400");
}
.imgif:hover {
background-image: url("http://i.imgur.com/YzGK6hf.jpg");
}
You can set the height and width in your onmouseover handler like this:
onmouseover="this.src = 'images/e911_icon_vi_site_2014_white.gif'; this.style.height = '50px';"
However, you might want to change your approach to using CSS. Then you can use a :hover class instead of messing with mouse handlers. example.
#Service1 {
height: 300px;
width: 300px;
background: url('http://upload.wikimedia.org/wikipedia/commons/9/9a/Avenger__Westphalian_horse.jpg');
background-size: 300px 300px;
}
#Service1:hover {
height: 300px;
width: 300px;
background: url('http://www.canadianpetconnection.com/wp-content/uploads/2014/02/horse-OSPCA.jpg');
background-size: 300px 300px;
}
Currently I have four images side by side. When the window is resized or viewed on a smaller device it does a line jump (three images and the fourth one beneath it). However what I want is for all four images to just shrink relative to the window size. To make it clear, I've included some images and my code. Here's the jsfiddle as well: http://jsfiddle.net/hxeJb/
^ That is what I currently have.
^ That is what I want to achieve.
HTML:
<div id="headerline">
<img src="http://s21.postimg.org/l6t6akypj/line.jpg"/>
</div>
<div id="menu">
<img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png">
<img class ="music" src="http://s18.postimg.org/4st2fxgqh/image.png">
<img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png">
<img class ="bio" src="http://s18.postimg.org/5xn4lb37d/image.png">
</div>
CSS:
#headerline {
width: 100%;
overflow: hidden;
margin: -10px auto 20px auto;
}
#menu {
max-width: 700px;
text-align: center;
margin: auto;
}
#menu img {
width: 150px;
}
http://jsfiddle.net/hxeJb/2/
#menu img {
width: 20%;
}
See if this help you, just don't provide a fixed width, let image width relative to its parent width
Observing your CSS part in jsFiddle, I think assigning width in percentage rather than fixed pixels will resolve your problem.
You can try this instead of current CSS.
#menu img {
width: 31.33%;
}
Hope this might help you.
The other answers are probably all correct but you may want to add a max-width: 150px; so that hte image does not expand too big and lose quality.
#menu img {
width: 30%;
max-width: 150px;
}
Fiddle: http://jsfiddle.net/hxeJb/4/
Try with the width in percentage to set the image size as per the browser width. It's always preferable to set the width in percentage(instead of pixel) while re-sizing the element based on window re-sizing.
#menu img {
width: 25%; //give the width as per the requirement
}
Hope this will solve your problem :)