Simple code on code sandbox, which compares two cards I'm building. The first card is just a placeholder to organize the flexbox and configure the hover effect. And the second one does make reference to images.
I'm trying to understand why the images are getting bigger than the box-contrained from the first parent - since I'm using object-fit: cover. Can anybody explain me why?
I understand what is happening. FlexBox and images can sometimes work weird. But it's only weird because there's a lot of params to be track of and not because it is a broken feature.
Going into firefox dev tools, I saw that the second card had its header clamped by its minimum size, since the default configuration in flexbox is "A flex item cannot be smaller than the size of its content along the main axis".
The img element said to my flexbox column axis: "hey, I need more space", so my flexbox said: "sure". Now, putting into the header class:
min-width: 0;
min-height: 0;
overflow: hidden;
my flexbox answers: "sorry, but here we are allowed to go beyond minimum size. Deal with it".
This link helped to understand that.
Related
I am developing an information board for a university club of mine. I almost have it complete, except I have one annoying bug left: The center image expands beneath the viewport.
The image is supposed to shrink and expand to stay between the two side columns, which it does because of
a percentage width css attribute. However, I would like it to not expand further once the bottom of the image makes contact with the bottom of the viewport; it should simply remain centered.
For the life of me I cannot get a solution that both stops it from growing beyond the bottom of the page without mangling the aspect ratio of the image.
I thought I was on to something with object-fit: contain but alas, it appears width will always prioritize itself over object-fit.
Any help would be much appreciated, as I'm quite new to web dev.
Here is a link to a client-side view of what I have so far:
https://jsfiddle.net/ydumcrnk/
Have you looked into display: flex? You can wrap a div around the three .column classes, give that container div a property of display:flex and then you can add some subsequent properties that will line up the .column classes the way you want.
Here is a page on the subject I reference often.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I am trying to build up a responsive image gallery by following w3schools tutorials. Everything seems to working very fine except one serious issue. I googled a lot but couldn't find any silver bullet solution to fix it. I'm posting a screenshot to make your better understand about my issue. Here's a look:
It's very much obvious what's the real problem. Right. So what should we do? Should we have to give a min-height for every div? The text comes dynamically from the database and sometimes it is mandatory to display complete text without trimming it.
Note:
Using min-height causes one another problem. When we resize the browser to tab width then it creates a lot of blank space between div rows.
You've not post a code, so I can offer you a flexbox solution.
Here's a Fiddle.
These flexible boxes will stretch according to the text and they will fit the parent container, regardless of the text inside. I hope it will help you. Flexbox is a layout system which is very powerful and easy to learn, and it is mobile ready.
.flex-container {
display: -webkit-flex;
display: flex;
width: 500px;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
flex-basis: 200px;
margin: 10px;
}
.img {
width: 200px;
max-width: 100%;
height: auto;
}
In case that (almost) full and guaranteed support for the latest IE versions is required (or you want a fallback of some sort), and you do not wish to use JavaScript, there's also the option of using text-align: center on container and on image wrappers display: inline-block as well as vertical-align: top.
The text-align: center isn't actually required, but it will center the image wrappers (containers of image and image text).
This will still leave some white space beneath the image wrappers but each image will start on the same line, so to speak.
You can see a fiddle here, based on the layout of #Julsy : the fiddle
Note:
This solution does have a slight downside regarding white space due to the inline-block elements. This means that sometimes setting two inline-block elements to 50% width each will make them jump to each separate line. However I've used this solution in several applications by simply setting the width to 49% e.g. In many cases the difference isn't noticable at all, and given the white space between the elements they often are aligned properly (in my opinion). The white space can even make up for some of the spacing between the elements such as margin.
The white space stems from the actual spaces in the text of your HTML document.
You can read a bit about the phenomenon of these white spaces here. It seems that it's not really an error, but just the way the browser works.
The prettiest solution in my opinion surely is the one #Julsy suggests (the flexbox method).
As to why your own code isn't working is due to the float. When one of the elements is lower (lower height) than the other, the element following it will "float" underneath it. I think that the logic behind this can be thought of as the following (correct me if i'm wrong): if you view the containing element is a set of "text lines" (as in a regular book or text in here) with a reading direction from left to right, the element with float:left will attempt to get as close to the upper-left corner as possible (which is where you start reading from). In this case, the closest place to the upper-left corner is beneath the lower element as this is on a "line" above the bottom of the highest element.
I hope it makes sense :-)
As you already wrote, a min-height is the best method to make those floated boxes be the same height and still have the "emergeny option" to expand them if there is more content.
Add display: flex to the parent element. For more info about flexbox.
i tried to do the same with only css, but i got tired, maybe u can use javascript to fit these kind of stuff with different heights, because these needs to be calculated, i use this: http://masonry.desandro.com/ basically this convert every element with position absolute and give it top and left positions from prevs/next elements, for example
the first (size 100x200) will got left 0 and top 0,
the second (size 100x400) will got left 100 and top 0,
the third (size 100x200) will got left 0 and top 200,
the four (size 100x200) will got left 100 and top 400)
and continues...
I am blocking out a new page for my site that is going to be responsive with a sliding divide separating 2 columns. On the left column I have a couple vertically stacked divs, the bottom of which I want to scroll its contents when it overflows. I want only the div to scroll and not the entire page.
I have already set the overflow-y to scroll and while this does produce the scroll-bar it still expands the entire page rather than recognizing the edge of the window. I have a feeling it has to do with the parent containers size not being fixed and I thought setting it to max-height: 100%; would resolve this but it has not.
here is the jfiddle
jfiddle
It is basically just a grab from my sandbox site wtb.dsdcs.com but it seems to behave the same in the jfiddle so it should suffice.
Just a disclaimer: there is a video the autoplays in both the website and jfiddle that I left intact in-case its container is part of the issue, so may need to turn down speakers.
Clarification: #PlayList is the element I wish to be able to scroll.
You need to give your Playlist class a height - (e.g 400px). Then, as you add more a items you should get a scrollbar. You can remove max-height as that won't be needed.
If you want a dynamic height of the playlist, that always takes up the remainder of the height, you could add a jQuery script:
var h1 = $(window).height();
var h2 = $('.videowrapper').height();
$('.playlist').height(h1-h2);
Since your videoWrapper is set to take up 50% of the height, the other approach could be to set your playlist to have the other 50%. So set it to height: 50%.
.playlist {
padding: 10px;
font-size: 12px;
overflow-y: scroll;
height: 50%;
position: relative;
}
EDIT 17 Oct:
The reason the above might not work with all browsers is probably because of your implementation. Like I said in the comments below, you shouldn't be using table-type display properties because they don't support overflow very well.
The W3C even say that the overflow property only applies to block-type elements LINK.
The MDN suggests the same LINK.
As such, implementing overflow on any table-type element will always be a tricky and risky approach as browser support issues or browser display inconsistencies should be expected. To get a fully supported solution, I'm afraid you'd have to try other display properties such as flex or block.
Unfortunately, there is no way to get a fully supported solution for overflow on table elements, and therefore such answer cannot be provided. The only real "solution" here that would actually solve your problem would be a complete (or partual) overhaul of your entire site.
However, I hope the above gave you hint of direction of what to do next and as such being an acceptable answer for you.
Good luck!
So I have a post-view that I can't get to work properly, and flexbox seemed like the answer from heaven that I was looking for. Except, I can't seem to figure it out properly no matter what...
If you look at this code, there's two vertical divs that should both stretch as more content gets added to either. The div where more content appears grows accordingly, but I want the other div to match in length, and so the bottom edges to be aligned to the bottom of the flex box. The repeating images behind the two founder buttons and the "LOTS OF TEXT" should then fill up empty space down to the bottom where the bottom-edge images are.
I've been at this for a good week now and can't figure it out... I'm sorry if this is a really simple thing or I'm being dense about css, I'm still learning. Any help would be greatly appreciated.
In your .forumviewright class, add this property:
height: 100px;
That brings the baselines together.
Just tested it in Chrome Dev Tools. It works. It also works in FIDDLE. But it doesn't seem to work in the CSSDesk sample you provided.
Whether or not this is the permanent solution you're looking for, you can let me know in the comments below.
EDIT
Your question begins with:
Can't get CSS flexbox to expand properly.
Actually, the flexbox is working fine. Both columns are binded to each other and expand equally, as per the flexbox rules.
If you highlight the child divs (.forumviewleft and .forumviewright) in Chrome Dev Tools or Firefox Inspector, you'll see that both columns are equal height and track each other regardless of content size on either side.
To illustrate this, I've added a background color to each column div so you can see that the flex is working properly. No other changes to the code were made. In this example, no matter how much content is placed in either column, both color-coded columns remain equal height.
https://jsfiddle.net/eympj0yq/2/
Of course, the real problem is that the child container boxes inside these columns aren't tracking each other.
This will require some fundamental adjustments to your code. For a better understanding of this problem and how to fix it, see this post:
Height 100% on flexbox column child
Hope this helps. Good luck!
I'm trying to implement a windows 8 app using HTML/CSS with two flexbox layouts of articles (one on top of the other on the y-axis), that are set to overflow-x: scroll. However, I want an expanded view of an article to encompass the whole screen, overlaying the other flexbox container, by using the z-index property of the article. However, it's not working. I don't think that this is IE10/Win 8 exclusive, I think its a problem with my CSS somewhere as its not working in the jsFiddle with webkit flexbox properties.
See this jsFiddle for an example. As you can see, the expanded article still lies under the other flexbox container.
Any help please? I have been looking for this for some time now and cannot find the root of the problem.
I Think this current approach is a dead end.
As I understand, a flex box item expands (or shrinks) given the container's size, thus, a full screen should be impossible if the container is smaller.