I'm using ion-slide-box, but the issue is, my ion-slides image is not in the same size, its dynamically repeated different size image using ng-repeat
<ion-slide ng-repeat="sliderimages in sliderimages">
<img src={{sliderimages.url}} style="width:100%;height:auto;"/>
</ion-slide>
</ion-slide-box>
I used this CSS to fit image height to all
.slider {
height: 200px;
width:100%;
}
.slider-slide {
color: #000;
background-color: #fff;
height: 100%;
width:100%;
}
but the height is not so fit
I have to add any size of images and that to be fit in the Ionic slider.
max-width: 100vw !important;
max-height: 100vh !important;
this worked for me ;-)
Do not apply an explicit width or height to the image tag. Instead, give it:
max-width:100%;
max-height:100%;
Example: http://jsfiddle.net/xwrvxser/1/
Regards.
Related
I used Styled-components in my React.js app. I want to make some area blur on mouse hover action. So I tried to use &:hover and all line works fine in &:hover area except backdrop effect.
How to make blur effect (on mouse over) in styled-components?
My code
const Adiv = styled.div`
width: 300px;
height: 60px;
background: #ffa5;
&:hover {
backdrop-filter: blur(2px); // This line doesn't work
-webkit-backdrop-filter: blur(2px); // This line doesn't work
cursor: pointer;
border: 1px solid red;
}
`
But when I try in normal HTML (such as w3schools.com/"Try it yourself"), it works well.
<!DOCTYPE html>
<html>
<head>
<style>
#aaa {
width: 300px;
height: 60px;
position: absolute;
top: 150px;
left: 50px;
}
#aaa:hover {
cursor: pointer;
backdrop-filter: blur(5px);
border: 1px solid red;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<div id="aaa">bbbbbbb</div>
</body>
</html>
Edited
I want to get this effect like above image.
I don't want the text inside the div to blur. filter gives a blur effect to the text itself in the div. I just want to give blur effect to the letters behind div when mouse hover. So I want to use backdrop-filter.
Only when I use styled-components, it doesn't work. I am still curious why. What's wrong in my code?
It seems like the css entities backdrop-filter and -webkit.backdrop-filter are not what you have described in your image.
Backdrop-filter applies to the elements behind the target node, while filter applies to the node itself. In order to look like the image you added, the styled component would be:
const Adiv = styled.div`
width: 300px;
height: 60px;
background: #ffa5;
&:hover {
webkit-filter: blur(2px);
filter: blur(2px);
cursor: pointer;
border: 1px solid red;
}
`
The results looks like this.
I would like to present desktop users with a phone image and overlay an iframe that displays an external website to fit the phone screen. Both should be responsive.
If possible, When the visitor is already on a mobile phone then they should see the the same thing that is seen on the desktop, but without the phone as a frame.
Does anyone know how this can be done?
Here is the method that I use for responsive stacked divs.
This will work for both methods you asked for, but I would suggest not loading a desktop version to the mobile users, for bandwidth purposes being they have no option to prevent the content to load.
It is based on percentages and from my experience, it has the best responsive results, with minimal coding. Once you replace the photo, you will need to adjust the width and height percentage values in the CSS to scale as desired.
The Markup
<div id="container">
<div id="photo">
<img src="https://d3nj7353mvgauu.cloudfront.net/media/categories/iphone-6-6s-6-plus-6s-plus-1.png" width="100%" height="auto">
<div id="site">
<iframe src="https://www.godaddy.com/" width="99%" height="99%"></iframe>
</div>
</div>
</div>
The CSS
#container {
position: relative;
width: 100%;
max-width: 600px;
height: auto;
}
#photo {
position: absolute;
width: 100%;
}
#site {
position: absolute;
width: 100%;
max-width: 43%;
height: 76%;
top: 11.75%;
left: 28.25%;
border: none;
}
JsFiddle Demo Link
How can I changed the height of md-toolbar in material design?
http://jsfiddle.net/kostonstyle/gsroofa5/
On the first toolbar I want a height from 30px and tried that:
<md-toolbar style:"height: 30px;">
But it does not work at all. I need a navbar with two bulks, that because of two toolbar.
I try this, but now letter disappear.
http://jsfiddle.net/kostonstyle/r178sp9o/1/
You can use an inline style like this
<md-toolbar style="min-height:30px">
Use min-height to make the toolbar smaller
The height of the toolbar can be changed by adding the classes to the md-toolbar.
For a medium sized toolbar add class="md-medium-tall"
For toolbar bigger than the normal add class="md-tall"
You can also inline style the toolbar style="height:50px;"
The accepted answer did not work for me. Here is how I got it working in my Angular Material app:
<mat-toolbar color="primary"
style="min-height: 30px !important; height: 30px !important;">
This worked for me on Angular 8. Put this code in your scss
.mat-toolbar {
min-height: 50px !important;
height: 50px !important;
}
.mat-toolbar-row {
min-height: 50px !important;
height: 50px !important;
}
Replace 'mat' with 'md'
If just setting the min-height doesn't work, like it didn't work for me, you will also have to add in max-height with the same value:
HTML
<md-toolbar class="toolbar"></md-toolbar>
CSS
.toolbar {
max-height: 30px;
min-height: 30px;
}
Okay so simply I have this layout consisting of two elements, a navigation ("left") and the actual site content ("right").
Now what I want is that the "left" div just stays like it is, but when downsizing the screen to a certain size, I would like the content div's width to decrease with it.
However, I have no idea on how to start. When I look up responsive web design I can only find skeletons for entire layouts with loads of divs and percentages but I just want this for one div only and I'm totally confused.
This is what I have right now:
.right {
width: 750px;
margin: 40px 0 40px 50px;
float: left;
position: relative;
}
.left {
margin: 40px 0px 40px 40px;
width: 210px;
float: left;
position: relative;
}
Hopefully this http://jsbin.com/uquzaw/1/ isn't too overwhelming.
Essentially, you need percentages in your css and a meta tag in your html to get the effect you are looking for.
What you're asking for isn't exactly responsive design. If I understand you correctly, you are going to need percentage widths.
HTML:
<div id="left">
Nav1 <br>
Nav2 <br>
Nav3 <br>
Nav4 <br>
</div>
<div id="right">
This is where the main content will go.
</div>
CSS:
body { margin: 0; padding: 0; }
#left {
width: 20%;
height: 100%;
background: red;
float: left;
text-align: center;
}
#right {
width: 80%;
height: 100%;
background: blue;
float: left;
text-align: center;
}
I'm trying to make a cross browser CSS nav-bar for mobile and desktop using Jquery Mobile.
I don't want to use media queries for retina/non-retina devices, so I'm basically trying to use a single hi-res CSS icon/sprite on all devices. The following works nicely except on IE7+8.
HTML
<span class="hasIcon">
<span class="someText"></span>
<span class="someBackground"></span>
</span>
CSS
.hasIcon {
display: inline-block;
position: static;
height: 30px; width: 30px;
background-color: none;
background: url("http://www.franckreich.de/x/IMG/gen/6060dummy.png") no-repeat;
background-size: 30px 30px;
-o-background-size: 30px 30px;
-webkit-background-size: 30px 30px;
-moz-background-size: 30px 30px;
-ms-background-size: 30px 30px;
}
JsFiddle example here
Of course this breaks in IE7+8, as backgrond-size is not supported...
My question: Does anybody have an idea how I can achieve this effect on IE7+8?
Solutions, I don't want to use:
CSS Media Query for retina/non retina = miss out on good looks on desktop
put retina/non-retina icons in single sprite & position accordingly = works so-so & serving bigger file
Curious to see if anybody can help me out.
Thanks!
You can use a filter: http://jsfiddle.net/thirtydot/QTT4N/3/
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='http://www.franckreich.de/x/IMG/gen/6060dummy.png',
sizingMethod='scale');
http://msdn.microsoft.com/en-us/library/ms532969(v=vs.85).aspx
Duplicate of IE 8: background-size fix.
Short answer: Use IE Filter. http://www.pziecina.com/design/turorial_demos/resize_background.php