I have a <div> called .PhotoBox which I am using as a flex container:
.PhotoBox{
display:flex;
flex-wrap: wrap;
}
This is within a React app which then renders a set of images to create a collage. This is the only CSS applied to the children:
img {
height:200px;
width:120px;
}
Currently by default, the flex box renders 7 items (images) horizontally before wrapping to a new row.
I want the user to be able to select how many items per row they want. The images are always 120px wide, so I was going to resize the flexbox to force this.
However when I do this to .PhotoBox, the flex container:
width:90%;
...the flex box now only renders one item (image) per row? When I've only marginally reduced the width? I expected after some trial and error / marginal reduction that I would find the point at which only 6 images per row are rendered, then 5, then 4 etc... but it went straight to one and essentially became a column display?
Should I be using a different method to reduce the width of the flex container a little so that fewer items render horizontally by default?
By styling .PhotoBox as
min-width: 90%;
max-width: 90%;
You can set a fixed width of 90% to the container.
Related
I really need your help here. I am very new to this Front End work and have submitted few questions related to this issue.
I am building an UI using react js. Where i display the cards for products and resources. I am using display flex in the container and making it center justified. But the issue is
I want to limit 4 cards per row
The width and hight of the cards to remain same irrespective of screen size
I have two sections where i display cards, at first place i am displaying 8 cards and the second place i am displaying two. I want the cards should start from same position in the UI
Alignment issue with header section
Here is the code and Demo: https://codesandbox.io/s/527rx9
Here is how it looks currently
I got some feedback from other questions i had pasted to use width to 1500px. But deep down i feel , not a right way and will break in some screen. But in this case as well i see alignment issues. below image by using 1500px in container width
Really need your help here to have a fix around it. If you are willing please paste the codesandbox or anyother link with a working code.
Regarding your container css for the grid:
.card-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
/* width: 1500px; */
}
It's no problem setting a max-width and you should do it, however dont use a specific width, instead set the max-width to 1500px if that's your desired max-width
.card-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
max-width: 1500px;
}
However i would recommend putting all the content below your banner inside of a div
<div class="content-container">
And setting the CSS of that one to the max-width in order to avoid some indentation problems to solve this specific problem
I am displaying verse: poetry and song lyrics.
I have one layout in which the lyrics flow as multi-column text. I have it working with flex layout, but it is not 100% to my satisfaction. See this codepen: https://codepen.io/sidewayss/pen/WNNEBgV
The remaining issue is the horizontal spacing of the columns. Flex layout spreads the columns as if I had set an alt version of align-items:space-between. I want the columns to align left, which can be accomplished only by setting the width of the container <div> to one pixel greater than the width at which it starts scrolling horizontally, the minimum width for displaying all the text.
It seems to me that there should be a way to do this with grid layout, but I have not been able to make it happen. I have tried a variety of settings, including the various auto flow settings.
Is there a solution for this in CSS, or do I have to rely on JavaScript? I have a way of doing it in JS, and I already have code that manipulates these elements, but I'd much rather do it in CSS. It seems like a supremely reasonable layout request, at least to me. The biggest problems I've encountered with grid layout are the need to set the number of rows and columns and to size those columns. I want that to be all automatic because otherwise I'm still writing JS code to set those values.
div {
display:flex;
flex-direction:column;
flex-wrap:wrap;
height:300px;
overflow-x:scroll;
/* align block to start*/
align-content: flex-start;
}
span {
padding:0 8px;
/* align child block to start*/
align-self: flex-start;
}
I have a problem that I have spent many hours on and could not find a solution in any way. I will link the code in CodePen. It is just a subset of my layout. This is the reason for some of the root element's styling.
I basically have a layout where the page/screen/window should not have a scroll, but the inner body of the table widget should, when there are enough elements that go beyond the expected area of the table.
Basically I have a top content on the page, and a table widget. The table widget is to take up the rest of the space of the screen. The table has a title and a header. The body is to take up the rest of the table space and to have a scroll when it has elements that go beyond that space.
I have searched many resources over stack-overflow and tried many things. I will provide the current state of the layout in the pen. Here you can see all that I think is my best try.
https://codepen.io/anon/pen/KLogbJ
The central area of interest is the .body element. Based on things I've read I have styled it:
.body {
display: flex;
flex-direction: column;
flex: 1;
overflow: auto;
padding: 0.5rem;
min-height: 0;
}
I would appreciate any help on this.
You could add overflow: scroll; to .body and give the .item a min-height
Also give your .table a max-height: 100%;
See this fiddle
The problem is that the contents of the area you want to scroll is set to scale to fit it's container. For the internal scroll you are looking for you would need to have:
A set height for the container so it won't expand to fit the content (in this case you want it to be 100% of the screen)
The content must not scale in height to fit it's container. It has to maintain it's height so that it remain larger than it's container.
If you have those 2 conditions you should find the scroll bars appear.
I've faced a problem with bootstrap table. Basically, my table will be dynamic and at first some columns will be hidden. Some/All hidden column will be showed dynamically based on user's action. When, many/all columns are shown, a scroll-bar will come at the bottom of my browser window. But, I want that scroll-bar come to my table instead of page/browser window. I mean, this is happened now which I don't want:
I want bootstrap .table-responsive feature for my larger screen too when my table's width cross the visible width of the browser:
Also I want vertical scroll-bar when it'll cross a definite height. To make this, I've applied a css like this:
.table-custom {
max-height: 150px;
overflow: auto;
}
which is not working. And for horizontal scroll-bar(when table's width cross the parent's width), I can't apply any fixed width as I've to concern about all large and small screen. So, what can I do to appear scroll-bars(both vertical and horizontal) when the dynamic table cross the width and height of it's parent div?
My fiddle
I think you simply need to apply overflow: scroll; to a containing element of your table, which you already have with .table-responsive.
.table-responsive {
max-width: 150px;
overflow: scroll;
}
fiddle: http://jsfiddle.net/vwrva9L6/11/
I want to achieve that result as my web app layout:
I create application for mobile usage first. I want to fixed top menu that stretch to it content and content at the bottom of this menu. Content height can be very long but I want to use overflow-y: auto;. I use CSS display: table; for container and display: table-row; for menu and content to solve this problem. JSFiddle example here.
Which pros and cons should I expect? I.e. mobile browsers interoperability, performance issues and so on.
I had this exact same issue and I solved it in exactly the same way you did. The only issue I ran into was that the row on the bottom:
#content {
display: table-row;
height: 100%;
}
IE will not respect this and it will see height:100%; and instead of taking of the remaining space of the table like every other browser it will be equal to 100% of the entire table causing your layout to render incorrectly. The only way i found to solve this was to use a bit of jquery with a window resize function to basically only fire when it's IE and apply a pixel value height to the #content based on what it should be.