I'm working on a HMI using AngularJS(1.7.8) and Bootstrap in which there is four main panels : the navbar, a small up-left, a big bottom left and a big right one.
The expectation are that the small up-left one can collapse to become smaller and leaving more room for the big bottom left. I was able to do that easily using flexbox. Inside the bottom-left panel there is an area that is supposed to be scrollable when the up-left panel is visible. When it is collapsed the scrollable area is supposed to have enough room to display its content.
That last expectation is what I struggle with. The scroll area is not applying the overflow-y style attribute and its height is the whole content even though it is outside its parent (the bottom-left panel).
So far I tried playing around with flexbox, setting each panel as a flexbox, setting height and various other things but nothing seems to work. Unfortunatelly I do not control the content and won't be able to fix its height. Since it needs to expand, setting a max-height attribute doesn't work.
Here is an example on fiddle.
EDIT :
From #Pablo-Binar comment, it appears flexbox don't work that great with % height attribute. I haven't found anything in the doc unfortunately.
Also from #Pablo-Binar comment, one solution is to set a height in px to the root node giving flex attributes to the child and to the final one (the scrollable one) set an height in percentage (height:100%).
Use this code
height: 100%.
If that's to high use
height: calc(100% - 30px);
That should do the job.
Related
I'm trying to scroll some single-line labels in a single-line fixed-width container.
What I've tried so far is:
Create a container with fixed dimensions.
Place a scrollable container inside and attach the animation.
Place the labels.
The animation partially works, but the scrolling doesn't go all the way to what is configured (translateX(-100%)).
The overflowing part (green color in codepen) that exceeds the fixed container width is ignored.
I've tried various display and flex field combinations, but noting.
Here is a codepen sample.
https://codepen.io/efthymiosks/pen/QWQGVGg
The issue is that 100% is the size of the element, not the content. What I mean by this is because the content overflows the element, 100% only refers to the visible width of the container.
You need to change 100% to something else such as 150%. Unfortunately, this means that you need to know the width of the contents before. The only other way that I know of is using JavaScript to calculate the width of the contents.
Codepen
I have a CSS grid with a scrollable element placed in one of the grid's areas.
What'd I'd like is for the item to shrink if the content is too small to fit the area. I did this by setting align-self to start.
This works great, until the content grows. The element resizes past the end of the grid area it's assigned to.
How can I use align-start but still cap the height to the height of the grid area? I would have expected this to be the default behavior.
One solution is to have the element stretch but then have a child element inside it that contains the actual content. The parent would have overflow: auto and the child would simply grow until it's too large for the container. Unfortunately, this kills the box-shadow.
I could put the box-shadow on the outer element in this case, but then it'll be too large when the content is small.
Any ideas what I can do here? I considered using some Javascript shinnanigans but I'm not even sure how I'd grab the height of the grid area from JS.
JSFiddle: https://jsfiddle.net/1kLenm5a/2/
Apparently max-height: 100% works. I could have sworn I tried that but I was messing with so many other settings at the same time I must have missed it.
Thanks.
I am working with panel sliding effects and stuck with situation like,
I have panel of width 150px with some content inside it, at some point if I reduce it's size by 70px for which I need to add sliding effect to that panel.
I wrote a code for this as,
VerticalPanel myPanel=new VerticalPanel();
myPanel.setWidth(150+"px");
// here I do some operations
myPanel.addStyleName("animated slideOutLeft");
myPanel.setWidth(80+"px");
when I reduce it's size it should automatically inherit "animated slideOutLeft" style with the inner content shown as it is. But in my case, "slideOutLeft" gets applied but inner contents doesn't remain visible and myPanel slidesOut.
It should slide out partially i.e. from 150px to 80px should be visible which is not currently taking place, instead it is sliding out full.
What is wrong in this.? How can I solve this issue.?
you can refer an example in https://agileui.com/demo/monarch/demo/admin-angular/index.html#/ where I want that same logoSliding at upper left corner effect which slidesIn and slidesOut.
When you reduce the width of a panel, children elements within that panel will reflow within the new width.
The example you point to hides some children elements when the panel's width is reduced.
So your code will work if the panel always contained children that fit within a smaller width. Alternatively, you can try setting overflow: hidden on your panel and settings children's width explicitly.
Long time ago I asked something similar. I would suggest you this topic in which you could find a possible solution combining percentage width and px min-width.
I know this is a common problem and I feel really stupid for not being able to figure it out, but I have a 3 column layout in HTML, and I seriously cannot figure this out for the life of me.
Here is the basic layout of my site:
fixed header,
1 sidebar on each side,
middle area with content.
Here is a mockup of the site that I'm speaking about: http://eitanrosenberg.com/tests/pop/bootstrap/
It looks ok at first, but when the browser is resized, the sidebars get really small and there is a ton of white space. Why is this? Thank you so much in advance.
Look at it this way.
The height:100% of the container div (and the column divs) gets their height from the body-element (100% of that), and the height of the body element is calculated as 100% of the height of the html element
The height of the html element is then (in practice) calculated from the current height of the browser window (100% of that).
So the height of your boxes will all be set to match the heigth of the browser window...
and this is exactly what you see when you shrink the browser window heigth!
Because:
Once your content no longer fits within the height of its container (ie. when you shrink the browser window you also shrink the calculated heights of all your containers and eventually the headroom will be too small) - overflow happens. The content of the "highest" box will then be the first to overflow, and parts of its content will then spill out of it to be visible below the boxes (since you don't use overflow: hidden).
The browser will then allow you to scroll past the bottom of the boxes (so to speak) in order for you to be able to see the content that "overflows the box", but it doesn't adjust the height of container - the boxes will still keep the same height as the browser window while you scroll...
So the background patterns will always be the height of 100% of the browser window in this example (an not match the height of the highest content when the height shrinks below that)...
One way to remedy this - is to adjust the height of the boxes with Javascript (calculate the height of the highest column and set that as an absolute value for height on the container and the boxes - every time the page resizes)
... or you could use "display: table" and "display: table-cell" on the container and the columns respectively as a workaround (overriding the Bootstrap grid CSS) for this particular layout width/media queries...
Hope this helps!
Good luck!
I have a dojox chart (chartDiv) that gets created within another container div (panelContainer).
Even though I have the width and height of the chartDiv set to be 90%, it either introduces scroll bars into the chartDiv, or if I dtart altering the padding and margin settigns for the ChartDiv, it will spill outside of the parent container.
I know this is going to be a basic issue, but I have been playing with lots of different CSS settings but nothing seems to solve keeping the chartDiv within the confines of the panelContainer (taking up 95% of the space)
This fiddle might help you spot where I have gone wrong.
When you make a chart (or a dojox.gfx canvas) without width/height, it will try its best to determine its dimensions from the container you put it in. It can get confused though!
In your fiddle's case, #chart has a known width, because it's a block element and inherits its width from panelBG which is 100% of panelContainer's width.
The #chart div doesn't really have a height though, since a block element is 0px tall until you put something in it (or add some style to it). As a consequence, (I think) the chart simply assumes a height of some proportion to the width.
In your CSS, I see you have a #chartDiv rule with width and height 90%. I'm guessing you intended that to be #chart. That wouldn't actually have resolved the problem entirely though!
Assuming you changed that, the chart would now use 90%x90% as width/height, but if you try it, you'll see that the labels/axis are still positioned incorrectly.
Because you've floated the title container to the left, the chart container starts on the same "line" and tries to have its content "float" around the title container. This skews the axis labels out of place (green), while the actual chart (svg/canvas, pink) drops down below the title container.
To fix this, tell the chart container to stay clear of floats on both sides:
#chart {
width: 90%;
height: 90%;
clear: both;
}
It isn't really necessary to float anything though, and setting the height to 90% isn't always ideal. I made a suggestion in an updated fiddle: http://fiddle.jshell.net/froden/WsrHs/4/ .
The differences are just that the title container is a div spanning across the top, while the chart container is absolutely positioned so that it fills whatever space is left underneath. You can then just set width/height on panelContainer.
Absolutely positioned elements are taken out of the normal flow. This is why some of the elements are expanding beyond their containers. I have a feeling your floats are involved in that, too, but the fiddle is a little too complicated and a simpler version needs to be made.