I need to resize this form, I changed the "WindowsResize" dynamic property.
I've also added a scroll, but the probem is that the scroll not reach the Save button.
Can I fix that?
Did you change design properties Width and Height property from Auto to Column width (height)?
Sometimes it is needed to change this properties on all design parts that are needed to change size with form size.
Similar question
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 make the following sign up box fluid responsive in CSS.
Here is an example: http://cssdesk.com/aYLwW
I would like the input field width to be "flexible" and shrink depending on the page.
You can see from the example when I shrink the window, the button eventually drops down below the input field.
With this in mind, what should I set my input#iiihuu-iiihuu field width to be to allow the input field to gracefully resize without any bumpage?
Many thanks for any pointers :-D
Give a min-width:550px; to the div containing the text-box and button. Your control will not break then.
Working ex. here http://cssdesk.com/dUjxF
As the definition says min-width sets a min-width to the element, it doesn't go below that size under any circumstances.
You can change the css widths to percent based.
See here
I have two-column layout with a header and footer. I have created a JSFilddle with demonstrating this.
The left-column will normally have more content than the right-column.
How can I get the right-column to expand to the height of the left column, or just fill the height of the view-port? I have sene examples of something similar, but not with a footer that is always at the bottom of the display.
How can I get the textarea to fill the height of its parent, the right column (I haven't even got close to solving this one).
I've just edited your jsfiddle.
The idea is to set a min-height on your right column block, and have it determining the height of the whole content section instead of inheriting height attribute from its parent.
Secondly, regarding the text-area. This bit is tricky, you need to use javascript to render it upon everytime a user resize their view port, and update the attribute height of the textarea accordingly.
Cheers
minHeight is important incase you have an empty content container and you dont want the footer to be pushed up right under the nose of the header. Hence minheight prevent that from happening. Once the height of the right column exceeds minHeight, the parent div will be expanded accordingly.
I see nothing wrong with h being the height of the viewport if you really want it to always expand full windows. However I recommend using $(window).innerHeight instead of Height(). But again, this is javascript and your code will never render the same thing on different browsers, so keep that in mind :)
$(window).resize(function() { var h = $(window).height(); $('#MyTextarea').css('height', h-300); });
By default the height of an Flex Accordion container is the height of the initially selected child. I'd like to be able to set the height to the tallest child so that no resizing or scrolling is necessary when other children are selected.
I do not want to use the resizeToContent property. I want the size of the container to stay constant no matter what child is selected.
My current thought is to extend the accordion class setting the creation policy to "all" and then override the measure function to loop through all the children and find the tallest one and use that for the height. This seems a little kludgy though, so I'd like to know if there is a better approach.
Ultimately my question is: is there a way to set the size of an accordion container such that the container never resizes and scoll bars are never necessary to display any of the children?
IMO your idea is probably the best way to go, one problem with it though, you're still going to have a scroll bar since it will set the height to the child and not take into account the chrome of the accordion. So you will need to add additional height for each header of the accordion.
Simple to figure out the header height and multiply it by the number of children, but still something you should keep in mind.
How do I create a scroll in GridView using ASP.NET without using fixed sized div's around it like shown here http://www.aspnettutorials.com/tutorials/controls/gridviewscroll-aspnet2-csharp.aspx .
You can set the div's width or height to a percentage as well, and with overflow:auto, the div contents will scroll if the browser is sized to less than the content.
Without any size settings, your div will simply expand to hold all content, so a percentage, fixed, or inherited size in at least one dimension is required for scrolling to ever occur.
In order to get a scroll bar, you need a fixed height container with overflow set to scroll.
Whether you do it with the grid's properties, like in the example you linked, or by just wrapping it in a Panel with a height and overflow set on it, it doesn't matter much. The key thing is just to get it inside a fixed height container. How you want the UI to look (where the scrollbar is, etc.) will dictate where you create the div.