I'm displaying this component in an NgbModal:
<div id="gallerypopup">
<div id="main-image">
<lib-ngx-image-zoom id="zoomer"
[thumbImage]="item.thumbnailUrls[selectedIndex]"
[fullImage]="item.imageUrls[selectedIndex]"
zoomMode="click"
></lib-ngx-image-zoom>
</div>
<cdk-virtual-scroll-viewport orientation="horizontal" itemSize="400" minBufferPx="400" maxBufferPx="400" class="viewport">
<span *cdkVirtualFor="let thumbnail of item.thumbnailUrls; let index = index;" class="thumbcell">
<img [src]="thumbnail" height="300" (click)="selectImage(index)" /
</span>
</cdk-virtual-scroll-viewport>
</div>
with the following CSS:
#gallerypopup {
height: 75%;
width: 75%;
}
.thumbcell {
height: 300px;
width: 400px;
background-color: #dddddd;
margin: 0;
padding: 0;
cursor: pointer;
}
.viewport {
height: 300px;
}
.cdk-virtual-scroll-content-wrapper {
display: flex;
flex-direction: row;
}
.ngxImageZoomFullContainer {
cursor: zoom-out;
}
.ngxImageZoomThumbnail {
cursor: zoom-in;
}
But even though the scrolling viewport is set to horizontal orientation, the thumbnails still appear stacked vertically. How do I fix this? I suspect the problem is that the scrollable area is being incorrectly constrained to fit its width inside the width of the modal popup (which for some reason isn't 75% of the browser window, despite the first CSS rule).
Did you tried the following in order to display the elements horizontally?
.cdk-virtual-scroll-content-wrapper .viewport {
display: flex;
flex-direction: row;
}
Thing is .viewport children layout is still vertical.
Solution :
.viewport .cdk-virtual-scroll-content-wrapper {
display: flex;
flex-direction: row;
}
here is stackblatz this is example from angular material doc and i have modified it.
Related
I want grid container to maintain square shape. So when screen is resized, it will get bigger or smaller, but it's height will be always same as it's width. I want to place 3 images inside, with top one taking up two columns, and bottom ones are square taking one column each.
HTML:
<div class='container'>
<div class='grid'>
<img></img>
<img></img>
<img></img>
</div>
</div>
SASS:
.container: {
background: #fff;
max-width: 600px;
padding: 10px;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 10px;
& > img:first-child {
grid-column: 1 / span 2;
grid-row: 1;
}
img {
width: 100%;
background-color: #000;
object-fit: cover;
}
}
I tried adding pseudo element to grid to maintain square ratio, only to find out that it won't work for grid. I tried giving img height: 100% but it made the too long.
I found some questions about how to keep images inside square, but non of them was about how to keep grid container square and prevent from being stretched out by children.
I'd do the following:
Make the grid width and height responsively sized - for this use this method (.container and &::after pseudo element)
Make the grid itself follow the square width and height of the container (.grid-wrapper)
Use a container for the images, so that the containers resize inside the grid (1st row = 2 col wide, 2nd row = 2x1 col) (.grid-box)
Use absolute positioned images in the divs, so they actually cover the divs
HTML code:
<div class='container'>
<div class='grid-wrapper'>
<div class='grid'>
<div class="grid-box">
<img src="https://picsum.photos/200/300"></img>
</div>
<div class="grid-box">
<img src="https://picsum.photos/200/300"></img>
</div>
<div class="grid-box">
<img src="https://picsum.photos/200/300"></img>
</div>
</div>
</div>
</div>
SASS code:
$-gutter: 10px;
$-max-width: 600px;
* {
box-sizing: border-box;
}
.container {
position: relative;
max-width: $-max-width;
width: 100%;
background: #ffff00;
&::after {
content: "";
display: block;
padding-bottom: 100%;
}
}
.grid-wrapper {
position: absolute;
width: 100%;
height: 100%;
padding: $-gutter;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: $-gutter;
width: 100%;
height: 100%;
&-box {
position: relative;
width: 100%;
height: 100%;
&:first-child {
grid-column: 1 / span 2;
}
}
img {
position: absolute;
width: 100%;
height: 100%;
background-color: #000000;
object-fit: cover;
}
}
Here is a Fiddle demo: https://jsfiddle.net/robertp/uLfj1swm/
And a screenshot of how this solution renders:
Is it possible to make this 2 circles always on the right and left of the bottom of the image? They need to be always one on the bottom left, the second on the bottom right of an image- when I resize the image. (they should always stick to the bottom corners of an image) How to position them like that?
enter code here
Codepen:
https://codepen.io/anami90/pen/KeEqRw?editors=1100
according to your quesrion the circles should appear on the outer column isnot it?
hope this helps:
div {
height: 100vh;
}
.col-3 {
background: lightgreen;
}
.col-6 {
background: pink;
padding: 0;
display: flex;
align-items: center;
position: relative;
}
.circle-left {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: yellow;
position: absolute;
left: 0;
bottom: 0;
}
.circle-right {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
position: absolute;
right: 0;
bottom: 0;
}
img {
width: 100%;
height: auto;
vertical-align: middle;
}
<div class="row">
<div class="col-3">col-3</div>
<div class="circle-left"></div>
<div class="col-6">
<img src="https://www.w3schools.com/w3css/img_lights.jpg"/>
</div>
<div class="col-3">col-3</div>
<div class="circle-right"></div>
</div>
https://codepen.io/anon/pen/zabLoq?editors=1100
I would like to position this 2 circles as it is on this picture below:
enter image description here
I'd like to know how can I code the 3 blocks fader from the Spring.io website. Image here:
It has a dividing line that changes the image gradually as you move it.
This can be done with simple HTML and javascript code. Here's the complete jsfiddle https://jsfiddle.net/zn3b1hov/34/
Basic Idea is very simple.
First, You need 2 SVG images one is colored and another is grayscale. I am using this 2
grayscale-image
colored-image
Now Create 2 absolute div one on top of another and use these images as background.
Then create a slider as wide as the images. I am using HTML range type input
Finally change the top div's width according to sliders value.
Complete HTML, CSS and JS
<style>
#fader-diagram-your-app {
position: relative;
height: 286px;
}
#fader-diagram-modern-java-gray {
position: absolute;
height: 238px;
width: 800px;
margin: 31px auto;
background: url('https://spring.io/img/homepage/diagram-modern-java-gray-9a417697a51646e42df7e9d7f024709d.svg') no-repeat;
background-size: 100%;
}
#fader-diagram-modern-java-color {
position: absolute;
height: 238px;
max-width: 800px;
margin: 31px auto;
overflow: hidden;
width: 200px;
}
#fader-diagram-modern-java-color div {
position: absolute;
height: 238px;
background: url('https://spring.io/img/homepage/diagram-modern-java-color-e10b7eec68b1fe60eefeab0cf20a20da.svg') no-repeat;
background-size: 100%;
width: 800px;
}
#fader {
background-color: #34302d;
width: 6px;
height: 275px;
border-radius: 4px;
position: absolute;
left: 0;
}
#myRange {
width: 800px;
position: absolute;
top: 50%;
}
</style>
<div id="fader-diagram-your-app">
<div class="sidebyside" id="fader-diagram">
<div id="fader-diagram-modern-java-gray"></div>
<div id="fader-diagram-modern-java-color" style="width: 39.6875px;">
<div></div>
</div>
<div id="fader">
</div>
<input type="range" min="0" max="800" value="0" class="slider" id="myRange">
</div>
</div>
<script>
var slider = document.getElementById("myRange");
var coloredImage = document.getElementById("fader-diagram-modern-java-color");
var fader = document.getElementById("fader");
slider.oninput = function() {
coloredImage.style.width = this.value + "px";
fader.style.left = this.value + "px";
}
</script>
I would like to achieve the effect where one image is revealed over the other when scrolling the page.
You can see an example on livearealabs.com (new york / seattle). Does anybody know how to create it using CSS3?
Check out this jsfiddle to create the sliding effect.
The trick is to have one div rotated 60 degrees. You position it so that it covers the entire wrapper and the overflow is hidden. Then with javascript you just have to move the slice container either by changing the left property or by changing the translate-X property.
Here is the code:
HTML:
<div class="wrapper">
<div class="bg"></div>
<div class="slice" data-show="true"></div>
</div>
CSS:
.wrapper {
position: relative;
overflow: hidden;
width: 20em;
height: 10em;
}
.bg {
background-color: red;
width: 100%;
height: 100%;
}
.slice {
position: absolute;
top: -12em;
left: -8em;
width: 30em;
height: 30em;
background-color: blue;
-webkit-transform: rotate(-60deg);
}
JS:
var hidden = false;
$('.wrapper').click(function() {
console.log('click');
if (hidden) {
$('.slice').stop().animate({left: '-8em'}, 2000);
hidden = false;
} else {
$('.slice').stop().animate({left: '-34em'}, 2000);
hidden = true;
}
console.log('click end');
});
Also check out this jsfiddle for a similar sliding effect that can be achieved with CSS only.
I'm trying to make a centered, 100% high layout that has NO FIXED width (argh). Everything seems to be ok with the solution below, apart from the img that I need to scale to height: 100%, that doesn't scale inside table-cell (outside of the div everything's ok).
EDIT: I am able to set fixed height like 100px or so, both in css and tag. Why doesn't this work with %?
<div id="center">
<div id="tcontainer">
<div id="tleft">a</div>
<div id="tright"><img id="bgright" src="images/bgright1.jpg" height="100px" /></div>
</div>
</div>
And styles:
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
#bgrepeat { /* unnecessary ATM */
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
}
#bgright { /* HERE THE PROBLEM */
height: 100%;
}
img { border: 0; /*float: left;*/ }
#center {
text-align: center;
height: 100%;
}
#tcontainer {
text-align: left; /* POTRZEBNE ? */
background: red;
height: 100%;
display: table;
margin: 0 auto;
}
#tleft {
display: table-cell;
}
#tright {
background: pink;
display: table-cell;
}
OK, so the problem has been baldy formulated. I've had just forgotten to pass "height: 100%" in consecutive children. It didn't have anything to do with display: table nor images.