Angular flex-layout wrong overflow - javascript

I want to use Angular's flexLayout. Problem is, when I try to overflow flexible content, it wont be. When content is larger than its container, it simply "overgrow" it's container.
I have found solition, but Intrinsic & Extrinsic Sizing suport is poor at this moment.
Here is an plunker example. I have tried min-height prop:
.detail-row-item{
// min-height: min-content; //good solution, but poor browser suport
}
It worked on chrome. Is there any different solution to do min-height: min-content; result ?
Edit:
I found out that this example, works fine on Firefox and Edge only chrome has problem as shown on screenshot.

If you restrict the height of the div elements and their content overflows their size, you can use the CSS overflow property to adjust the behavior. So if you add overflow: auto; or overflow: hidden; to your .card-wrapper class definition, the cards will get scrollbars or just hide the overflowing texts.
Edit:
To achieve the same result as with min-height: min-content, just remove the flex attribute of the div.detail-content-wrapper element and set the following ones:
.detail-content-wrapper {
max-height: 50%;
overflow: auto;
}
You can check the modified plunker.

Add like this below in your CSS file.
.card-wrapper.detail-card {
overflow: auto;
}

Related

Why does will-change:opacity treat fixed elements differently than will-change:transform in chrome?

I am trying to optimize the scrolling of my web app. I have data tables with tons of data, and scrolling gets pretty bad. I added will-change: transform to the data table but it broke my table headers that are position: fixed (I make them fixed to allow them to scroll with the viewport). The elements don't move with the viewport at all, they just stay stuck in the flow of the document.
But by chance I discovered that if I use will-change:opacity instead, my fixed headers are fine. Can someone explain this behavior? I haven't been able to find any documentation that says they should act differently.
Here is a code pen with an example of what I am talking about. Toggle between the values, and scroll in blue div.
https://codepen.io/bkfarns/pen/aLYgrN
Here is the basic code from the pen too:
html:
<div class="container">
<div class="fixed">should be position: fixed</div>
<div class="too-tall">div that is too tall</div>
</div>
css:
.container {
margin-left: 100px;
background-color: blue;
width:400px;
height:300px;
overflow: auto;
will-change: transform;//changing this to opacity fixes the issue
}
.fixed {
background-color: grey;
position: fixed;
margin-left: 150px;
margin-top: 100px;
}
.too-tall {
background-color: red;
width: 90px;
height: 600px;
}
The whole point of will-change is to make all possible changes that browser would have to apply when the specified property will change in advance, reducing the time needed for the change itself. Effectively it means that by specifying will-change:transform you make the element transformed (though visually it stays in the same position), and descendants of the transformed elements can't be fixed per the CSS Transforms spec. Opacity doesn't have such effect, so will-change:opacity doesn't break fixed positioning.
Also, will-change per se doesn't have any "optimization magic", it only optimizes the changes of the specified properties. Some properties force the elements to the composite layers that theoretically can be processed by the GPU more efficiently, but if there is too many such elements it may have the opposite effect. For optimizing scrolling, probably other strategies would be more efficient.

Positioning div to the right with an undefined width

I'm going to have trouble explaining what I mean but bear with me. First here's my fiddle https://jsfiddle.net/jmajnqej/5/ (updated by Aziz)
#freelancewrapper {
width: 100%;
max-width: 1000px;
height: 440px;
background-color: #9D9D9D;
position: absolute;
}
I'm trying to get freelancewrapper to hug the right side of the screen with no padding. It needs to stay connected to the very right side of the screen no matter what width the window is. To make it more complicated it's parent div contentwrapper has to stay where it is with the same width and margins.
here is a representation of two screen sizes to show what I mean. http://imgur.com/a/IkOwx
Update: I didn't realize it at the time but this is a two part question. Positioning it was easy but getting the right correct width property is not. Here's my question for that Trouble defining width of a responsive div.
All you have to do is add the following CSS properties to your element:
position: absolute;
right:0;
jsFiddle fork
If you want the div to remain attached to the screen when scrolling, you can replace absolute with fixed.
Keep in mind that position: absolute works relative to the first parent tag with a position:relative. by default, that tag would be the body.
Also an important thing to keep in mind is that when an element is absolutely positioned, it will lose its space in the layout and hover over all elements.
I can't tell you the exact value you should need to achieve the desired result. What i would advice for trying to make your styling "responsive" is to start 1. from a mobile first approach(easier to up the screen size then downsizing).
To further answer your question try using relative units. your width for example is 100% this is relative. But instead of pixels try using em.
every ~16 px(not precise) is 1.0 em.
furthermore you can use position: absolute;
good luck further.
Like Paulie_D said you can use position
CSS
.contentwrapper {
width: calc(100% - 190px);
max-width: 1160px;
margin-top: 50px;
margin-left: 40px;
position: absolute;
right:0;
}
DEMO HERE
you can use negative right margin on <div class='contentwrapper'>
.contentwrapper{
margin-right: -48px;
}
https://jsfiddle.net/linkers/jmajnqej/3/

jQuery-ui's resize functionality fails to interact properly with the flexbox model in chrome but succeeds in FF and IE

I have made a div which is split in two columns with a handler in between. The user can drag this handler right or left and the column widths will adapt accordingly (one column will widen, the other will become smaller and the total width will remain constant).
How I tried to accomplish this can be found in the following jsfiddle example: minimal working/failing example. If you test this with one of the latest versions of FF or IE, you will see that this works as intended. In Chrome, however, the handler becomes invisible.
I think this might have to do with an interaction between the flexbox model and the way jquery-ui's resize functionality works (which uses css positioning tricks). I have found some hacks (setting position to relative and left position to 0) in order to overcome this. I think Chrome reacts differently on these hacks than FF/IE.
Can anyone explain to me what is going on or hint me in the right direction for solving this?
ps: This question is where I got the ideas for the hacks
HTML:
<div id="container">
<div id ="left">left</div>
<div id ="resizable">
<div id="handler" class="ui-resizable-handle ui-resizable-w"></div>
<div id="right">right</div>
</div>
</div>
JavaScript:
$("#resizable").resizable({handles: {'w' : '#handler'}});
css:
#container{
background-color: black; /* we are not supposed to see any black but we do in Chrome indicating that the handler of the resizable box is not visible(in IE and FF everything works as intended) */
display: flex;
flex-direction: row;
height: 100px;
}
#resizable{
display: flex; /* a flex box itself so the right panel can take all space not taken by the handler */
flex-direction: row;
width: 50%;
/* hack to ignore the absolute positioning done by jquery ui */
left:0 !important;
position:relative !important;
/* removing this completely destroys the functionality in IE and FF */
}
#left{
border-right: 1px solid yellow;
background-color: darkred;
flex : 1;
text-align: center;
}
#right{
border-left: 1px solid yellow;
background-color: steelblue;
flex : 1;
text-align: center;
}
#handler{
background-color: green;
width:5px;
/* hack to ignore the absolute positioning done by jquery ui */
position:relative!important;
left:0px!important;
/* removing these makes the handler visible in chrome but makes it not pixel perfectly positioned in FF and IE as can be derived from the yellow borders being invisible */
}
check this UPDATED Fiddle
I just change it a little bit as below
#container{
...
position:relative;
}
#handler{
...
position:absolute!important;
}
Actually, your problem is quite simple. It's that of inheritance.
What you can do is set resizable to:
height: inherit;
and it works. Alternatively you can also set it to "100%".
Why does this happen? I am not certain; my guess would be that this has to do with the flexbox specification. I am a bit old school and I don't like flexbox at all (though it will rightfully become the standard soon if it hasn't yet). Its specification is a bit tricky. For example the way it works on chrome is that height takes the percentage of the parent container which is explicitly specified.
Now you specify height on "container" and on "handler", but since the parent of "handler" ("resizable") does not have a height specified, it probably uses the 100% of the default chrome value of height which is "auto".
That would be my guess. As to why it is invisible, you can be certain that it's an issue with height/positioning in flexbox setting on chrome.
I tried it on chrome and firefox and it seems to be fine - here's the fiddle.

Hiding multiple scrollbars CSS all browsers

I'm having a very difficult time accomplishing what I want to do, and I'm starting to wonder if it's possible at all. Essentially, I have three divs that each vary in width depending on which one you're hovering over (simple transitions). The height of these divs is always equal to 100% height of the browser window, calculated with jQuery.
I use overflow-y: scroll to accomplish multiple sections of scrollable content. However, it looks clunkly to include three scrollbars, so I'm trying to get rid of them. On chrome, it's easy, I just use ::-webkit-scrollbar { display: none; }, but for other browsers it isn't quite as simple. Other questions have answered saying I need to be wrapping my content in a div that has overflow: hidden but I can't quite get that to work without all these transitions completely failing.
Here's a demo of what I'm talking about. Thanks in advance!
overflow-y: hidden will hide the scrollbars, if you set this to scroll on :hover only you will still be able to scroll each panel when the user hovers over it:
.panel {
overflow-y: hidden;
}
.panel:hover {
overflow-y: scroll;
}
The previous examples were missing the default hidden, that will stop the panels scrolling back to the top.
You can show the scrollbar on hover
#container .display-panel:hover {
overflow-y: scroll;
}
remove the overflow-y from display-panel http://jsfiddle.net/9T7ex/1/

How do I stop a parent DIV from stretching when I put an iFrame into it?

I won't post the code directly but you can see it here: http://markbrewerton.co.uk/work.html
I have links which load an iFrame into a DIV when they are clicked, however, as you will notice, the parent DIV is stretched and goes down really far. I'm pretty new to all this, so could you explain how I can fix it?
Cheers
The first part is the setup the bounds of the div by using the height and width styles.
After that set the overflow style.
Overflow has different values. Auto will likely get your the desired result. http://programming.top54u.com/post/HTML-Div-Tag-Overflow-CSS-Style-Scrollbars.aspx
Try this (if you want scrollbars):
#yourdiv {
height: 300px; /* fixed height */
overflow: scroll;
}
...or this (if you want to just clip the content):
#yourdiv {
height: 300px;
overflow: hidden;
}
Edit: You can also fix the height of the <iframe> itself:
#youriframe {
height: 300px;
}

Categories