So this issue is making me scratch my head. I have a fiddle where the code works exactly how I expected it to.
But I have similar if not the same code implemented here, and you'll see because I have more text it's causing the first flex-item's width to adjust itself.
I'm still new to flexbox, but I've been doing a bunch of reading on them, maybe I got something wrong in the css? I don't see how since the fiddle works but the real example doesn't.
CSS
.comment-meta-body {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 30px 0;
border-bottom: 1px solid #eee;
}
.comment-meta-text {
font-size: 12px;
line-height: 20px;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
EDIT
flex-basis of 70px seems to make it work, but I still don't understand what's happening with the live example, in the fiddle I've tried setting a width to the parent container trying to replicate it but I can't. The fiddle works perfect. Doing some more testing, in the live example, if I set a max-width on the tag that's less than the width of the container, by let's say 100px, it looks fine too.
In the web you have this css for the images:
img {
width: 100%;
height: auto;
}
In the fiddle you haven't and the image uses its original size.
Related
I have a problem with flexlayout and overflow. Here you can see my Problem:
The icons are not 100% scrollable. I have absolutely no clue how to fix this. In theory, I think everything should be correct. I use Angular, Angular FlexLayout, Custom CSS. The Icons are grouped using flexlayout="column" and flexlayoutalign="space-around center" and everything is encapsulated with a div flexlayout="row", flexlayoutalign="space-around center". This row is now not fully recognized by my overflow CSS variable using custom CSS. Here are my classes. First, I set a fixed boundary for the popup (one hierarchy-level over the mat-card), and the latter is added to the mat-content section of the mat-card.
CSS for the Popup:
.max-height:{
max-height: 500px;
}
CSS for mat-content:
:host{
overflow-y: auto;
display: flex;
flex-direction: column;
height: 100%;
}
mat-dialog-content{
max-height: unset !important;
}
.example-card{
height: inherit;
}
.mat-card-content{
max-height: 300px;
overflow-y: auto;
}
.min-width-icons{
min-width: 100%;
}
Any ideas on how to fix this error?
Edit:// here are inspection figures:
Edit:// if I set a fixed height on the icons, e.g., 50px, the icons move out the upper boundary even more:
Edit://
issue persists even if i use png/jpg:
Edit://
Maybe it has something to do that the description class is adding word-break: break-all; But, either I do not how to counter that.
Edit://
Ugh this is some nasty CSS sh... got it working! It has something to do with the overflow-wrap/word-break of the underlying description:
As far as I noticed is that everything got better after i added width/min-widt of 100%. After that, i tried to set the height value to 100% (not worked). But, as far as i add a height in px (every value from 1px to 2000px) everything works as expect, which makes absolutely no sense to me, maybe some CSS mastermind can me pin point the reason. Field height is marked in black and green is the overflow word-break.
But, for now the problem seems to be solved with this css:
.text-area{
word-break: break-all;
min-width: 100%;
width: 100%;
height: 100px;
}
Centred flexbox items can have undesirable behaviour when they overflow their container.
Several non-flex solutions have been provided for this issue, but according to MDN there is a safe value which is described as follows.
If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were start.
It can be used as follows.
align-items: safe center;
Unfortunately, I haven't been able to find any examples or discussions of this, or determine how much browser support there is for it.
I have attempted to use safe in this CodePen. However, it doesn't work for me. The safe seems to be ignored, or perhaps the container element is improperly styled.
I'd really appreciate it if anyone could shed some light on safe and whether and how it can be used to solve the overflow problem, as demonstrated by the CodePen example.
The newer keyword safe still has bad browser support, so to get the same effect, cross browser, use auto margins for now, which should be set on the flex item.
Updated codepen
Note, to compensate for the modal's 50px top/bottom margin, use padding on modal-container.
.modal-container
{
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start; /* changed */
position: fixed;
width: 100vw;
height: 100vh;
overflow-y: scroll;
padding: 50px 0; /* added */
box-sizing: border-box; /* added */
}
.modal-container > #modal
{
display: flex;
flex-direction: column;
align-items: center;
margin: auto 0; /* changed */
padding: 12px;
width: 50%;
background-color: #333;
cursor: pointer;
}
safe isn't implemented in most browsers yet. You can recreate some of its functionality with auto margins.
I was trying to use justify-content: safe center to have a bunch of items centered in a footer when the viewport was wide, but have them able to scroll without clipping off the left side when the viewport was small.
When I tried to fix this with auto margins as Ason suggested, it did fix the clipping, but it also spread the items out evenly, which isn't what I wanted.
I found I could simulate safe center in this context by applying auto margins to only the first and last elements.
Assuming my flex items have class "item":
.item:first-child {
margin-left: auto;
}
.item:last-child {
margin-right: auto;
}
CodePen with examples comparing each solution
Use align-items: flex-start; instead of using it with the safe keyword, Also, you can add margin/padding to get the desired behavior for the same.
http://www.remotegoatdesign.com/sayhey/pages/edit-valentines-marc-card.html
Doing this site for an assignment due tomorrow. In the proccess of making it responsive.
I am having an issue with the last color block, although its put into its container using percentages, it keeps moving out. In chrome its outside it straight away, whereas in Firefox its only when I resize. Although the difference is only a few pixels, so I'd assume its to do with the monitor size.
Any ideas guys? I'm stumped.
Try add this code snippet into your css file.
#tab-1 > div > div
{
width: 8%;
}
You can change the width.
Good Luck!!
Try using property " display:inline-table " for the class color_container
and give margin for the smaller color divs for space inbetween
try putting slightly smaller percentages(in the color block) and test it until it looks good. also it fits right in wider monitors as you say, because you have one css, that is best for wide screens. the point of responsive design is to have more than one media queries if the one you have breaks the design in smaller screens. so either make the color blocks really small, or myou should make more media queries
Your issue here is display: inline-block;. When you use it, it adds an extra space between elements. If you want to sort out this, you have 2 fixes:
a) negative margin-right
.box {
display: inline-block;
width: 8.74%;
height: 100%;
margin-right: -4px;
}
b) font-size: 0; on the container and default font-size on the elements inside
.color_container {
width: 98%;
height: 60px;
min-height: 60px;
padding: 5px;
background-color: #fff;
font-size: 0;
}
.box {
display: inline-block;
width: 8.74%;
height: 100%;
font-size: 1em; /* or what is your default font-size */
}
I have here a code in Dabblet: http://dabblet.com/gist/5705036
I wanted to have these segment to stick at their position even if the browser is re-sized without using absolute positioning. Like for example, The main content container breaks a new line when the browser is re-sized [I use CSS Floats in most of my containers].
Is there something wrong with my coding?
Do floats proper for layouts ? or I need to use anything else?..
I just can't fix it by myself and by doing a lot of research , still, haven't got a good idea to use it as a way to fix this. [Also, I use HTML5 tags such as: section, article, nav, etc.. ]
Just remove the float:left; from maincontent id and apply a display:table-cell;. Your issue will be resolved.
Here is the code.
#maincontent {
border: 1px solid #BBBBBB;
border-radius: 5px 5px 5px 5px;
display: table-cell;
margin-top: 15px;
min-height: 400px;
padding: 2px 6px;
width: 700px;
}
Hope this helps.
First of all You should always clear parent element if You use floats inside the parent element. Your right element go down because You don't have minimal width of container, ther is sample of code:
#contentWrapper {
width: 1000px;
overflow: hidden; /*scroll / auto it's depends on You */
}
I noticed that in your code you had a space in <div id="contentWrapper "> which stopped your CSS for that element from appearing. Also, you needed 2 more pixels of width on your #contentWrapper.
#contentWrapper {
width: 992px;
}
Removing the space and changing the width of #contentWrapper worked for me. I had a quick look at the maths but haven't worked out why it needs to be 992px. Anyone?
So, in answer to your question, I'd say floats are fine and your approach is good, there were just those two minor errors.
Here's the page: http://www.thresholds.org.uk/museums-collections-poets/kettles-yard/
It looks great in Chrome even when you resize the browser, everything looks great. However, in Firefox, columns overlap one another and images don't resize.
The main grid classes are .c-1 (the smaller width column) and .c-2 (the width of two .c-1 columns). Whats going on in my code to cause this problem?
For quick reference, I'm using CSS3 box-sizing: border-box for my grid, here's the code for my .c-1 and .c-2 classes:
.c-1 {
width: 288px;
float: left;
margin-left: 28px;
display: block;
}
.c-2 {
width: 604px;
float: left;
margin-left: 28px;
display: block;
}
.c-1:first-child, .c-2:first-child, .c-1:nth-child(4n+1) { margin-left: 0; }
I'm also using the following code for responsive images:
img {
border: 0;
-ms-interpolation-mode: bicubic;
vertical-align: middle;
max-width: 100%;
height: auto;
margin-bottom: 1.875em;
}
EDIT Ok I've seemed to have fixed the responsive images for most sections now. A classname of .active was missing a width value but I've still got a crazy problem with the Blog section. Even though the same layout has been used on that page (.c-1 and .c-2 inline together) this section seems to overlap one another...odd!
Ok well it seems Firefox doesn't like calculating widths of elements when these elements don't have a width specified, which explains why responsive images were not working. An image set to max-width must have a container with a set width otherwise images won't scale.
I thought browsers defaulted elements to 100% width, if a width hasn't been specified in the CSS?
Anyways, all fixed now. Put widths on your wrappers people!