I have a Components which exists as a common layout for all my pages. The layout of this component is as follows (made using paint so please sorry :p):
Right arrows mean that this layout is a HorizontalLayout and down arrows VerticalLayout.
I'm really interested in making bodyContent layout SCROLLABLE. Within this layout I usually introduce lots of UI components (more layouts, text fields, forms, grids...) and sometimes components aren't shown due to the lack of vertical space and the absence of vertical scroll. So is there any way to make bodyContent scrollable (using SCSS/CSS or any other way)?
Thanks in advance.
EDIT:
I've solved this thanks to #JaneVi:
.v-ui > .v-widget {
overflow: visible;
}
Try using Panel within which you can put your bodyContent(vertical layout) using setContent() and can have scroll bars when height of your layout exceeds the panel's height.
Related
I have a mat-dialog which contains a mat-stepper. Inside this stepper, I have a step which contains a form. In this form I have multiple elements (list, mat-card and table) which I want to always fill the height of the dialog. Basically, I want the height of the table and also the height of the list on the left side of the table to adjust to the dialog height. The mat-card, which is shown when selecting an item in the list, should always be at the bottom left of the dialog and the list above it should either show all elements (if possible) or display a scroll bar if there is not enough space left to show all elements. The table should also either show all elements if there is enough space or display a scroll bar if there isn't enough space. I do not want any of the elements in this dialog to cause an overflow which would require me to scroll in the actual dialog.
A colleague attempted to solve this by using max-height: calc(90vh - <x>px) before but this really does not work very well at all. How can I do this properly?
Here is a stackblitz which shows the problem:
Stackblitz
Hopefully, my question is clear. If not, please let me know and I will try my best to explain it in more detail.
Your problem is quite simple, the content of the dialog does not fit the height of your dialog.
Every child of the dialog mat-dialog-content, mat-stepper etc, should be maximizing their height (either with height:100% or flex:1 in a flex container).
Here is a quick example of this.
I'm trying to achieve a 50/50 panel layout using Bourbon Neat 2.x, where the left panel is going to have a background colour, but grid margins are causing me some issues.
I initially just had the standard grid-container as a parent, with two divs using the #include grid-column(6) mixin. Trouble is, that left a margin at the left and right of the grid so the 50% background colour panel didn't quite work.
I then tried adding the grid-collapse mixin to try and get rid of the margins (codepen example), but that seems to have the effect of making the page > 100% width, leading to a horizontal scroll for the user.
Is there a simple way to achieve this layout, or should I use a custom grid definition for the panels with no margins at all?
Neat can cover this use case but it requires slightly more html. the trick is that the object with the class grid-collapse (.container in your example) needs a wrapper around it with width: 100%; overflow: hidden;.
Here is a question that also answers this → Remove outside gutters in Neat 2
I want to know what the best way is to have two divs (unless this is using some table?) that are side by side, separated by a vertical divider.
Notice how when the handler is resized, the elements appear to be resizing to accomodate the new width:
Notice how when the handler is further resized, it appears to overlap the elements on the sidebar exposing just a little bit of the text. If the user continues to resize to the left, it covers up all the text.
How to create this with css/html5/maybe some javascript? Examples would be great of (divs? or whatever basic elements with text or anything necessary to illustrate).
There is a splitter plugin for jQuery.
I'm trying to implement a design with a shrink-wrapped left bar and a fluid main panel, which will allow as many pictures to be shown as the window width will accommodate, without a horizontal scroll bar.
I'm having massive trouble doing this. When I float:left the control bar, the content of the main panel begins to flow around it. Floating the main panel as well solves this, but causes the content to be shrink-wrapped, meaning that the images tend to be lined up in a single column.
Is there any elegant solution to do this?
I've made a mockup of the problem here: http://jsfiddle.net/PYKwg/2/embedded/result/
Try this: http://jsfiddle.net/CXvRn/10/ It's all in the code:
I wrapped #main in #mainWrapper
I added padding-left 220px to #mainWrapper.
I added float:left to "#top .thing" and "#bottom .thing"
http://jsfiddle.net/CXvRn/29/
here is the most basic jquery version:
You have to set some constants such as the total horizontal padding and the horizontal margin for the #main. you could derive those using jQuery but if they are never going to change them you might as well set them your self and save some lines of code.
If you'd like to do it with jquery you can figure that out here: Padding or margin value in pixels as integer using jQuery
The solution is "overflow:auto" on the main-content section. This establishes a new frame of block flow, which content won't flow out of (under/behind the floated control section). Reference: http://www.w3.org/TR/CSS2/visuren.html#block-formatting
See it in action here:
http://jsfiddle.net/PYKwg/3/embedded/result/
(Thanks Alex)
I am creating templates using grids and object oriented css. The goal is to separate components from containers. The challenge i run into is that in header and footer container i would like that components are stacked from bottom up instead of top down.
For example
<div class="gridX gridY" id ="Footer container">
<div id = "links component"></div>
<div id="copyright component"></div>
<div>
In the example the requirement is that 'copyright component' has to be at the bottom of the footer container(which is the page) following other components stacked on top. Right now the only way i know how to do is by keep components height fixed which enables me to calculate the position of each component that way positing as needed making it work from top to bottom, however. This way it goes against the goal of oocss - being able to swap components in the layout while having height flexible
display:table -> display:table-cell with vertical-align:bottom is not working in IE, so this solutions is not applicable in our case.
I am new to grids and oocss, perhaps, i am missing some understanding.
how to stack components from bottom up instead of top down in defined grid container?
Thank you,
Margots
HTML is a top-down technology.
The height can be flexible. Use min-height: and let content grow naturally.
Don't resort to using tables for layout. CSS can do everything you need.