I have a masonry grid to display products and in some cases the first item's border move to the next column. It doesn't happen always and I can't find the reason for this to happen.
Link to the page:
http://en.naaman.b24online.com/b2c-products/tsb-163746/
Thanks.
One solution would be to create a wrapper around each box, so the box with border is inside and cant be breaked
OK. I found that the height of row of the pins (defined as #columns) is too short. I added the height for the different screen sizes and it seem to work.
Not sure why the row is not taking it's full height.
Related
The grid column takes more space than is necessary for the item to fit in.It is the last item in the grid. If I try to set bigger width to the element it keeps expanding both ways and even though it has space on the right side ( as shown on the picture ).
Do you guys know why the grid is giving it additional space?
Have you tried to add 'overflow-hidden' to the grid container to see what happens? Also don't use fixed width 'w-32' instead use 'w-full'.
I've been provided the following layout (see link) but I'm not 100% certain which approach I should take for layout. I've spent 6 hours playing around with grid and flexbox but I keep thinking "This bit should be grid not flexbox and this bit should be flexbox not grid" and I've been going back and fore. Its a bit confusing so I was looking for some advice.
In the screenshot which will need to be clicked through to, to see. The grey portions of the UI are always present, the main nav column can expand and push whats to the right of it over. As shown it will be an icon based menu and when expanded will show the icon labels.
For this reason at a high level the the logo and main nav are one column and everything to the right is another column. Hence I display grid on this. The "rows" inside the first column are two flex item elements where the parent has display: flex, flex-direction: column on it. The first item just has a min-height with the "second" item having a flex 1 on it to fill the remaining height of the container which is equal to the viewport height. This then creates the visual of a row. I follow a similar pattern in the second column but the second "row" is it's self a flex wrapper for the "rows" it contains such as the orange ,blue sections.
The orange and blue bars wont always be shown depending on the page and what happens on it but the ui has to cater for them seamlessly.
I repeated this pattern for the inner two column section (green / pink areas) where the outer container is display grid with just two columns, 1 row. Everything inside is then display: flex, flex-direction: column.
To me everything seems one dimensional as I've only really got one actual row in each column when the ui is broken down. It seems odd to me to define a grid with only one actual row hence I was thinking it should all just be flex box as I don't really have any two dimensional layout as far as I can tell. Does it actually matter? I'm an experienced CSS developer but not with grid, so theres a bit of confusion in my head right now.
This all has to work with IE10 unfortunately too and be accessible so I have to set min-heights on all the row looking bits if they have text in them as the user might increase the font size.
As with the main nav the green side panel is hidden by default but a button when clicked will cause it to slide into to view and nudge the pink column over.
If you saw this UI how should it be broken down? Any advice or insights would be very welcome. Thank you.
Mocked UI layout wireframe
Good morning,
for purpose of sizing problem and element's positions on the screen between several devices, I want to display a grid as background (like a chess Grid) like this pic, for after that, displaying items like Text and Images on it.
The problem, is that the grid must be dynamical for each differents screen devices (like flex:1). That s why I don t want to use an image. Any idea about how to do it using code ? :/
I think I understand the problem and I'll explain how I would do this.
Firstly I would be using grid: https://css-tricks.com/snippets/css/complete-guide-grid/ if you aren't familiar.
I would set the parent's width and height to be dynamic and depend on the device.
Then set parent to display:grid; grid-template-rows:repeat(#,1fr) and grid-template-columns:repeat(#,1fr) where # is number of rows or columns. The fr unit basically evenly splits the available space between all of the columns/rows it needs to make. Put simply, 100px wide parent with 2 divs each with 1fr means both divs get 50px.
Put the right amount of children divs in the parent, it should auto fill the grid for you, if not then you would have to go through and put a grid-area:rowNum/colNum/span 1/span 1; on them.
Id give all divs in a row a class and then do .rowOne:nth-child(even) to style with chess pattern, so white and black.
If you needed to select a particular tile do .rowOne:nth-child(tilenumber) and go for your life.
Let me know if this helped or I did not understand the question at all :)
There is a library called [react-native-bgimage][1] which allows you to create a tiled background image, so I think this could help you do the trick. If you provide an image of 100x100 pixels with 10px tiles, I would assume the library would repeat that image for you.
Disclaimer: I have not yet tested this out!
I have this ui-grid containing a random number of rows, but sure thing, it contains a great number of columns.
That said, I have a someway responsive-related problem: I want the grid to fill the remaining space of the page, in both width and height.
Apart from look-and-feel reasoning, the logic behind this is, on large screen devices, to allow the user to look at as much columns as possible and to extend the ui-grid height to the bottom, even if there are few rows displayed (btw, the page has no footer).
So, using a media query, I set width: 100% to the grid and manage to do the first part of the trick, but I'm struggling for the second part: the height.
I can't really make the gridWrapper height to expand the grid to the bottom, even if his width behaves correctly, without using Bootstrap but... the css struggle is real.
So I managed to have something near to what I want, but:
it's a ridicoulusly complicated, weak and un-reusable solution;
the row selection icon layout (the one on the left side of the rows) messes up as the row number grows, and i can't get rid of the selection feature by now;
the height of the grid is greater than the height of the page. I could set it to 90% instead of 100% to make it work... close, but not responsive, still.
Even if this scenario is the subject of many issues on the GitHub of the project, I'm asking you:
Is there a way to obtain what I want in a responsive, maybe bootstrap-inclusive way before I delve in a swamp made of display: table;, display: flex; & Co.?
give grid height: auto either in css or once grid is ready i mean once you have assigned array to gridOptions.data after that
$(".ui-grid").css("height", "auto");
I am affraid that only way how to achieve this is use of JS and setting css height and width programatically.
You have to set it when:
grid is created
window size changes
I hope you will understand me. There is a wrapper with width of 360px, it allows only 3 columns of divs. I just want to be able to drop in another div anytime I want and then all previous will be moved along. I have a problem, it seems like divs go to next row but they align verticaly to the tallest one from previous row. Please have a look at the example below (I had to use a picture as the code wasn't showing right). The last green one should be touching the tall red one from above. I am not looking for static positioning it has to be automatic so when I change wrappers width to larger more divs will automatically be included in the rows.
Below is the image of a wrong result.
Masonry script is the closest as I can get to what I need, shame it is JS...