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
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 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
I am having a difficult time figuring out why a div is being pushed down and out of another div.
If you go to the following link
http://www.chrismazzochi.com/index.php?subject=6
This page contains a contact form, and if you scale down to the 480px landscape or 320px portrait size viewport dimension, or view this site on an iPhone, you will see that there is a bit of a gap between the label and the input. If you use Firebug you will be able to see that the label and input in question is .styled_label and .styled_input respectively.
First I have used negative top margins to align the inputs because they were being pushed down and out of the .form_fields container. I don't want to do this. And I also can't get these input fields to budge over to the left.
Can anyone help?
I'd appreciate it.
Thanks,
Chris
I think this will help you. change the mazzo_style.css in line number 1005.
Change margin-right:1%; to margin-right:21.9592%
I have a div element with to resize:vertical style on it. The contents of the div are generated, so it could be empty or filled. The div needs a max height, so that the height increases as new items are added, but it caps the size at 150px and makes the div scrollable.
I could easily accomplish that with the max-height style, but if I want to resize it, it doesn't work.
The second idea I had, was to just use the height style, but by doing this, the div's not adjusting its height if the contents are smaller than 150px.
Is there any way of doing this without javascript?
I don't think this is possible without JavaScript and even if it would be: What do you want this for? Please take a look at browser support of resize!
(What do you mean by "filled" - is this done via PHP or JS? Actually no matter which one you use, you could check if there is any content and if so add an .empty class to the div)
I have a form I'm floating. When there is an error, via jquery, I'm adding some content to a p within the form. However, the form doesn't vertically resize to fit the new content. Is there something I have to do to get a floated element to resize when the content within it changes?
Do you have height or other css styling applied that would prevent it from vertically resizing?
Also, what browser(s) is it happening in? It may be a browser bug.
If the is floated, too, then depending on the styling (position: absolute), its dimensions may not be considered to be "in" the form.
Is there a height set on the content? When float is on, the default is to fix height to line height. It is possible that your width on the form is set too low, and the text is trailing off through the block element containing your form Try messing with the line-height property and see what you get. Also, position absolute will mess with you (as Richard mentions below)
Also, consider min-height. This won't work in IE6, but you can substitute with a height in IE6 which acts like min-height in certain circumstances.
Post you code so I can be more specific.