Angular cdk-virtual-scroll with wrap and responsiveness - javascript

I am looking at the cdk-virtual-scroll and hoping I can use this in my existing application, where I have a view containing items, who's width varies depending on screen size (eg phone vs tablet etc)
Forking this example, I have a modified version here.
My modifications are on App/cdk-virtual-scroll-overview-example.css, where I have changed the css to contain the following..
.example-viewport {
height: 200px;
width: 90%;
border: 1px solid black;
display: flex;
flex-direction: row;
flex-wrap: wrap
}
.example-item {
height: 50px;
background: red;
margin:0.5px;
width: 33%
}
#media screen and (min-width: 360px) {
.example-item {
width: 45%
}
}
So my aim here is have the items showing either 2 or 3 a row depending on the screen size. However, as can be seen, they do not seems to wrap at all...
I have used flex here (have I done this wrong?), but any css to get it working will do (perhaps flex grid, or other)
Is this possible using the cdk-virtual-scroll?
Thanks in advance

You could workaround it by chunking your items according to the number you want per row and then within the virtual scroll add ngFor to iterate each chunk. Then you can display flex on chunk div.

Related

Javascript for altering padding in css

I've encountered a problem while coding my website row by row. For specifying products I have made small slideshows for every one of them, but I have a hard time centering the images vertically due to some pictures are standing and some are laying down. I use "text-align: center" for horisontall centering, but since the pictures heights varies I've been trying to use js.
Here's how far I've come trying to code a script that calculates the top-padding depending on how high the image is:
function padding(nr) {
var heightPX = document.getElementsByClassName("IMG"+nr).clientHeight;
document.getElementById("frame"+nr).style.paddingTop = ((290-s)/2);
}
290 is the maximum height, so 290-s is what's left over, and then divided by 2 for the same space over and under.. You get the idea, this isn't working though.
Help pls
You can center an element vertically using a combination of display: flex; align-items: center; on the parent element. There are other techniques covered here https://www.w3.org/Style/Examples/007/center.en.html
img {
max-height: 50vh;
}
div {
height: 100vh;
background: #333;
display: flex;
justify-content: center;
align-items: center;
}
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>

Modal content gets cut off after first page in print preview

I am running into an issue when printing module content, and this happens to all browsers. When I print the modal content, it only previews the first page and anything after the first page would get cut off. I have tried debugging in Chrome print emulator but still cannot figure out a solution.
At some point, I added a scrollbar to the print emulator and I can scroll down to see all the content, but when I print preview, it shows the scrollbar and still cuts off any content after the first page. I don't know why print preview behaves so differently from the emulator.
The project is in react, plain modal that doesn't use any third-party library like bootstrap modal.
Media query for print:
#media print {
body, html {
height: 100%;
overflow: visible !important;
}
.account-header {
display: none;
}
.list-wrap {
height: 100%;
// overflow: scroll !important;
}
.account-content {
margin: 0;
padding: 0;
border: 2px solid red;
position: absolute !important;
overflow: visible !important;
visibility: visible !important;
display:block;
}
.account {
background-color: none !important;
display: inline-block;
font-size: 12px;
border: 1px solid blue;
}
}
Note: .list-wrap is a class applying to the parent container for .account-content. Using the overflow: scroll style would add a scrollbar to the print emulator and I would be able to see all the modal content there. But in the actual print preview, it still shows the first page only.
The problem, when printing, is that you have to set the page size property. The rules that give you the issues you are describing are the ones related to height.
Depending on how you would like to print pages and how you want to handle page breaks, you have to act as described in the following documentation:
https://www.w3.org/TR/WD-css2/page.html
The sections you should check are, at least:
https://www.w3.org/TR/WD-css2/page.html#page-size-prop
https://www.w3.org/TR/WD-css2/page.html#page-breaks
Another article that can help you is this one:
https://www.jegsworks.com/lessons/web-2/html/step-mediaprint.htm
If you want be make sure to have a more wide as possible compatibility with browsers, this GitHub repository may help you:
https://github.com/cognitom/paper-css

Removing vertical white space between divs, especially after hitting a breakpoint

I'm working on a responsive page design at the moment and I'm running into an issue with white-space between the divs, especially after hitting breakpoints.
body, html {
padding: 0;
margin: 0;
}
.header {
padding-top: 5px;
background-color: red;
width: 100%;
}
.sub-header {
padding: 5px;
margin: 0px;
background-color: yellow;
width: 100%;
}
.main-content {
padding: 5px;
background-color: blue;
width: 100%;
}
.footer {
position: absolute;
bottom: 0;
padding: 5px;
background-color: green;
width: 100%;
}
#media screen and (max-width: 320px) {
.sub-header {
display: none;
}
}
}
<div class="header">Header
<div class="sub-header">Sub-Header</div>
</div>
<div class="main-content">Auto adjust size</div>
I want to have the blue div take up the remaining space in this white space, as well as after the sub-header is removed at the break point.
<div class="footer">footer</div>
Here's a quick mock up of what I'm experiencing: http://jsfiddle.net/gaych7vp/6/
I understand what I have to do in order to make it take up the remainder of the white space before it hits a breakpoint (I'm assuming just tweaking the height values), but how would I go about making the blue div take up the remaining white space that gets created when the yellow div gets hidden after hitting the breakpoint?
I'm still really new to javascript but from other answers I've read it could be done by creation a function that finds the height of the browser and then subtracts it from the other divs. Is that possible and if so, how could I accomplish that?
Use position:absolute with different top values
.main-content {
position:absolute;
top:51px;
bottom:0px;
}
and
#media screen and (max-width: 320px) {
.main-content {
top: 23px;
}
}
fiddle
Another approach is using display:table and display:table-row
body, html{
width:100%;
height: 100%;
}
body{
display:table;
}
.main-content {
width: 100%;
height: 100%;
display:table-row;
}
fiddle
Make a div fill the height of the remaining screen space
You can use calc on the .main-content div to calculate the size, but you would need to set the heights of the header, footer, and subheader divs. Seems to me though you could just give the body a background color of blue, and achieve the same thing?
Change
#media screen and (max-width: 320px) {
.sub-header {
display: none;
}
}
to
#media screen and (max-width: 320px) {
.sub-header {
visibility: hidden;
}
}
I think this is what you meant. Fiddle.
There's no need for a JavaScript solution here.
The white area is caused because you are using position: absolute to force the footer to the bottom of the window, regardless of the content.
This isn't the normal way to achieve this, you'll run into issues later on when you do add content to your main-content div. You'll find that the footer will be positioned over this content (this will also happen if you shrink the window vertically).
I think what you'd like to do, is give the main-content div a min-height:, this way, the page won't collapse and look terrible if there is little content, but it will stretch naturally when more content is added.
You can also and remove the position: absolute from the footer div.
Here is a demonstration:
http://jsfiddle.net/t46aopas/
** UPDATE **
If you'd like a dynamic solution, I've created a heavily annotated JavaScript example here: http://jsfiddle.net/nahgdkaw/
(I included lots of comments since you said you were new to JavaScript ;) )
That should hopefully help you along the way a little.
Be aware that if the content inside the .main-content div is larger than the .main-content div area, the div will NOT expand to accommodate it.
You can however use the code provided and add in an if statement to, before resizing the .main-content div, check if the .main-content content
is larger than the available area (you may need to add a wrapper div around the .main-content content). If so, then resize the .main-content div to match the .main-content content height (otherwise, perform the resize as it currently is).
(Also, I strongly advise against using HTML tables for anything other than tabular data)
I edited my original answer but don't have the reputation points necessary to add a comment to notify you. I'll remove this answer after you've seen my updated answer above.

How to change the width of elements based on container?

Hi in my website I have one container with Registration form elements. Now I want to change the size of labels, Text fields and button based on the container size.
My requirement is The textboxes should be on the right of the labels (and expand up to 40px before the right border of the grey container - 40px is the container's padding anyway) when the width of the screen is >=1024px .
If the width of the screen is <1024, the textboxes should be under the labels and their width should be as long as that of the grey container minus the container's padding on the left and on the right side.
Please suggest me the way to do this.
I have also attached a screenshot:
Here background with grey color is the container in website.
.dnnForm .dnnFormItem {
clear: both;
width: 100%;
display: block;
position: relative;
text-align: left;
}
#media screen and (min-width: 1025px)
#rox-custom-box-06 .dnnForm {
width: 100%;
}
#media screen and (min-width: 1025px)
#rox-custom-box-06 .dnnFormInput, .password-strength-container, .password-strength {
display: inline-block;
width: 35% !important;
}
To accomplish this you are going to need to think a bit more granular in nature with your solution.
The Container &/or form will need to have specific CSS classes applied so that you can then make things work. You might also look at using Bootstrap or similar in your skin to assist as it looks like you are trying to make a responsive design, but without having any supporting framework.
Otherwise, a more detailed example with your HTML could assist.

How to make point where divs stop shrinking with browser size

There are a lot of dynamically designed websites out there where there divs or images shrink as the browser size decreases.
An example of this would be http://en.wikipedia.org/wiki/Main_Page
The div in which the text is in shrink as the browser size decreases. This happens up until a certain point, where it just decides to stop shrinking, and just start to cover the text boxes.
I would like to do this effect with a JSFiddle I am working on:
http://jsfiddle.net/MrLister/JwGuR/10/
If you stretch the size of the fiddle, you will see the pictures dynamically adapt.
The goal is to make it just stop shrinking at a certain point, and just start covering or caving in on this pictures. I want to do this because eventually it gets so small that they text on each image overlaps and it looks bad.
Here is the CSS for the Fiddle:
.figure {
position: relative;
display:inline-block;
max-width: 33%;
}
.figure .figcaption {
text-align: center;
height:0;
top: 40%;
width: 100%;
font-size: 55px;
color: white;
position: absolute;
z-index: 1;
}
.figure img {
display: block;
max-width: 100%;
}
Simply add a min-width size to the things you want to stop shrinking :)
Like so:
.figure {
position: relative;
display: inline-block;
max-width: 33%;
min-width: 150px;
}
Here's an updated fiddle: http://jsfiddle.net/jakelauer/JwGuR/13/
min-width:500px;
would cause the window to have a minimum width of 500px.
http://jsfiddle.net/JwGuR/14/ after you reach 500px the images stop resizing.
Here is an example of media queries. You use css to define min and max widths for certain cases. In your case, just give a max-width case and set the css properties there.
http://css-tricks.com/css-media-queries/
img{
width:100%;
}
#media all and (max-width: 699px) {
img{
width:500px;
}
}
This is a basic example. As Jake said, you can also just give it a min-width but in many cases, the layout of the page should change for mobile or tablet view where simply defining a min-width won't suffice

Categories

Resources