On my web site, http://tinyurl.com/yhvj6g
Why is it that Internet Explorer is placing my "Find listing" submit button on a new line whereas Firefox & Chrome keep the submit button inline horizontally with the input field (which is the desired result)?
I would like Internet Explorer to behave the same as Firefox & Chrome in that it keeps the "Find Listings" submit button horizontally inline with the input field.
I assume this is a CSS issue. Any help would be appreciated. Thanks
try setting width on that button so that textbox + button + padding < 400px (size of your container). Seems to me that the button slips to the second line simply because it's too wide to fit on the same line
Looking at both, the button is significantly wider in IE than in Firefox. I'd guess that it's too wide to fit in the available space on IE, and is getting moved to the next "line". Try reducing the padding to 0 on the button and see what happens; also, you might put the form inside an explicitly-sized div to force enough room.
I figured it out. My FORM width was not wide enough
Related
This Stackblitz example opens a simple dialog which contains a radio group in the mat-dialog-content div.
You can see that the dialog-content shows an ugly scrollbar:
This does not happen when other components are used: e.g. input, etc.
Using chrome dev-tools, I can see that the mat-radio-buttons have a height of 20px:
but the mat-radio-group only has a height of 17px:
Is this a bug in angular material components (the example uses version 12.0.4), or is there a simple workaround/css that we can use to get rid of the scrollbar?
I've tried explicitly setting the height on the mat-radio-group, but this has no effect.
Notes:
in production we do of course have many dialogs and some of them are large and need the scrollbars
we need an application wide solution/workaround
simply hiding the scrollbars is not okay: it must remain auto so that the dialog can react to size changes (e.g. user rotates device, some items are shown/hidden dynamically, etc.
For now we came up with a workaround that fixes the issue in all our 30+ dialogs.
The nice thing is that we can apply it in one place, in styles.scss:
.mat-dialog-content {
padding-bottom: 10px !important;
}
We just add a padding to the bottom of the dialog content area and then scrollbars: auto works as expected in all our dialogs (small and large). i.e. when you make the browser window larger/smaller, the scrollbar is automatically shown/hidden.
And it also works when there are multiple mat-radio-groups in one dialog.
The additional padding between the content and bottom dialog-actions is acceptable for our ui.
Stackblitz example with workaround
The reason this happens is due to the ripple effect on the radio button - which takes up additional space and causes the scrollbar to show. See https://github.com/angular/components/issues/20344
There are a number of ways to resolve this, such as using padding or margins on the components or on the dialog content itself like you did. The important thing is that there is enough space added to accommodate the ripple.
I am developing a React app using Material UI. I am having an issue with one page of the app.
That page contains some text and a button, which are vertically aligned with one another. It also contains a second piece of text and a second button, which are vertically aligned with one another and which are initially hidden. The first button can be used to reveal the second piece of text and the second button. The second button can be used to conceal the second piece of text and itself (i.e. the second button).
Here's a link to a screenshot of the page with the initially-hidden content visible (I don't have enough StackOverflow rep points to embed an image yet).
react-material-ui-app-page-screenshot
The issue I'm having is:
When I click the first button (i.e. the "SHOW" button), then click the second button (i.e. the "HIDE" button), then click the first button again; the first button jumps across the page. More specifically, it goes from having its right edge touch the right edge of the <body> element, to having its left edge touch the right edge of the preceding piece of text.
Once the button has jumped, when I resize the browser window (e.g. by clicking and dragging the Chrome application window), the button returns to its original location.
Note: The jumping happens in Chrome, but not in Firefox.
Do any of you know why that is happening?
I created a demo of this phenomenon on CodeSandbox. Here's a link to that demo:
https://codesandbox.io/s/mui-hidden-grid-item-jump-4wsft
Upon a closer look, it appears to have to do with having flex-wrap: wrap on a display: flex; flex-direction: column;.
wrap={"nowrap"}
...fixes it.
See it here.
It's difficult to say if it's a bug or not. What should we expect from a flex column container with flex-wrap:wrap and without a set height, in terms of column width?
Because the correct behavior might be to shrink the column as much as possible.
The bug is that it renders differently in different contexts. Whatever the correct behavior is, it should be consistent.
You can prevent the behavior by adding a width to line 19.
19 <Grid item style={{ border: "1px dashed lightblue", width: "100%" }}>
Using a default/vertical form, the bootstrap documentation suggests that the submit button sits underneath the various inputs but that's not the case in my form.
When the browser has a large viewing space, it sits beside the last input field and is not in line. If you resize the browser to a phone or tablet width, Responsive takes over and it displays correctly.
Changing the wrapping div from .span12 to .span3 pushes the button down, but it seems like a hackish fix because adding .span3 to the inputs and buttons to make them uniform in size yields the button pushed off to the side.
Am I missing some markup or is there an issue with Bootstrap? In their docs, the button is preceded by a checkbox label and some help text wrapped in a p - so that could be affecting their styling to make it look correct.
You have to put your submit button in a div with the class controls.
If you check the source on the Bootstrap documentation page, they even divide all the inputs and buttons in control-groups and controls.
Chrome has some cute features to make the selected form element (input ect) stand out like adding a border color and, more annoyingly, it slightly reduces the margins on some of my form elements after they've been selected, shifting the page slightly each time a text entry box is selected.
It's not the textarea draggable resize effect that chrome has, it's effecting input elements that should have a constant size, but they automatically change once selected.
Is there any CSS to disable this feature, or do I simply have to make sure my text box margins/padding are set up such that Chrome doesn't resize them?
Here it is
textarea { resize:none; }
I love working on other people's sites...the problem was javascript they were using to restyle form elements after click and I have no idea why. Solution was to remove that junk.
How do I increase the native FORM submit button size for OSX-Safari?
I want to keep the native look of a FORM submit button for it's respective operating system while also enlarging the size of the submit button. (Meaning, no use of images, custom borders etc..)
Using the following CSS:
input.submitbutton {font-size:150%;}
On Windows, this increase the submit button size height and width as desired ... regardless of the browser (Safari, Firefox, IE, Chrome).
But on OSX - Safari does not increase the button size at all. The form button size remains the default size.
Try to include this CSS property on your style:
-webkit-appearance: button;
Hope this helps!
Safari's form buttons are notoriously hard to style (if not impossible).
As others have said, height is pretty much untouchable.
What you can do is set the font size to an exact pixel size to resize the button.
input.submitbutton {font-size:14px;}
That should make the font size larger and the button as well. It does max out though...you can't just keep increasing the font size.
The "native look" of a pushbutton includes a fixed height by definition
Push Button Specifications
Control sizes:
Push buttons are
available in regular, small, and mini
sizes. The height of a push button is
fixed for each size, but you specify
the width, depending on the length of
the label text you supply. If you
don’t specify a wide enough button,
the end caps clip the text.
What you want would not be "native" and therefore will necessarily involve the creation of a custom image, or you can always do something like this
http://girliemac.com/blog/2009/04/30/css3-gradients-no-image-aqua-button/
If you apply a border to the button, Safari abandons it's glossy button and you can do what you like with it.
I am using several input type="button" and they style ok using:
input[type="button"] {
-webkit-appearance: button;
height:40px;
}
They did not style without the -wbkit- line.
or use the <button> tag.
Particletree! Rediscovering the Button Element
It’s an edge case, but if you’re trying all sorts of things and just can’t get Safari to make button labels smaller, you might have activated the “Never use font sizes smaller than X” option in Safari’s preferences:
This snagged me yesterday. Just turn it off and Safari will be much more likely to respect your CSS directives.
input.submitbutton{
width:200px;
height:500px;
}
Seems obvious, but have you tried changing the element size instead of the font size?