I am trying to create a SPA with react and material-ui. I want the page the page to have the size of the screen and the content has to resize and fit to it.
I am using a Grid from material-ui with two rows and one column.
The first row has a ImageList with images to fit the remaining room.
The second row has some stuff that does not matter.
The problem: when I load the images the first row resize itself growing more than the room available to it. I tried to fix the size of the ImageList but it transform itself to a scrollable component. So, the images never resize! The size set to them are to fit to the parent size.
Thank you
Related
enter image description here
Instagram image layout on the search screen withe pictures of different height and width
You should use FlatList. Every FlatList item will consist of 5 pre-prepared Views. You should start from this https://reactnative.dev/docs/flatlist
#BeginnerProgrammer
Every FlatList item will consist of 5 containers with image in it. If FlatList item have only 4 images - structure of item will be the same.
So the feed data should be not an array, it should be multidimensional array.
For example:
All items (arrays) with odd indexes will have prearranged structure with full height image at the right side of contaner.
All items (arrays) with even indexes will have prearranged structure with full height image at the left side of contaner.
Something like on picture.
I am using the npm react-masonry-component to create a masonry grid for my page. When I introduce a lazy loader like react-lazy-load-image-component the elements on the page overlap. The issue is only when the page first renders. If you adjust the width of the screen the masonry grid rearranges and the images are the heights that they are supposed to be. What would be the best method to resolve this? You can view the codepen example I have created here
This is how the images look when they are overlapping
This is how the images are supposed to appear after the images are finished loading.
there is 10 development div in a row and i want to display 7 and remaining show in dropdown button when we use lx-px and when shirink it toward the mobile resolution its automatically decreases to 6, 5, ... and remaining added to dropdown button.
You need to detect first what is the dimension of your parent element, then, if each of your elements have a fixed size, it's trivial to determine how many of them will fit into it.
If your elements don't have a fixed size, then you need to check the size of each of them and compute how many of them will fit.
What remains to do is displaying the elements that fit into your screen and display the rest in your dropdown
A few leads:
window.resize
element.getBoundingClientRect
React refs and the DOM
I have bootstrap button group, each button with dynamic with based on it's content. I need to move buttons to dropdown menu if they didn't fit to block size. Is should be recalculated on each resize event. What is the best way to pre render button group and measure how many buttons fit to screen and avoid performance issues?
Example
So I have a graph and table that show results according to the number of flights, but I want their size to be automatic, but right now if I don't give the div that is wrapping them together a specific size, they will end up collapsing. See the attachment enter image description here
The div container cannot be resized by charts. All charts as a default fir to the div container. It means that you should define the div size by CSS manually, for example, 100% of the parent's element or specific size in px.
Inside the div, you can adjust the table and chart manually.
In the comment below you can find the sample of a table and a column chart. Every one of them is 50% height of the div container. And the div container occupies 100% of the body.