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.
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'm not sure who here is familiar with using custom CSS styling within the Mendix Low-Code Development platform, but I'm running low on ideas so I figured it was worth the shot.
So for the app we’re working on, one of the things we have is a popup that comes up that users can input information on. It has an autocomplete widget, two date pickers, a radio buttons widget, and a template grid, and then below all of these input widgets are two buttons (Continue and Cancel). The template grid has the paging buttons active on it, and has some custom CSS styling active on it to set it to a specific height, enable y-axis scrolling on autoflow, and move the paging buttons to the bottom of the template grid instead of the top.
Clicking to go anywhere but the first or last page works fine, however clicking the “last page” button, or clicking the “next page” button to go to the last page, will result in everything but the template grid, and the continue and cancel buttons disappearing, and the template grid’s height shrinks to an unusable level. In the opposite direction, clicking the “first page” button, or clicking the “previous page” button to go the the first page, will result in essentially the entire popup being wiped out, with all the input widgets and action buttons disappearing, and leaving just a white page.
After looking around, it seems it’s due to some custom CSS that I had taken from a Mendix community forum post that I used to move the paging buttons on the template grid to the bottom of the grid as opposed to the top that’s causing the issue. If it’s because of issues with the paging buttons trying to readjust, is there a way to edit this CSS code so that these issues do not happen? The CSS code I used is shown below, any critiques on it would be super appreciated. Thank you!
.mx-grid.mx-templategrid{
display: flex;
flex-direction:column;
}
.mx-grid-searchbar{
order: 1;
}
.mx-grid-controlbar{
order: 2;
}
.mx-grid-content{
order: 1;
}
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%" }}>
I want to use the webchat plugin together with Bootstrap 4. As soon as I put the webchat into a site with Bootstrap the chat box gets clipped on both sides.
If I inspect the element I can see that overflow is hidden. If I toggle that off then the chat bubble is entirely visible, but the user input is broken.
As an example, on the attached picture the left chat is being clipped. The text should say "Just now" but actually reads "st now".
If I use the webchat script in a plain HTML site with no bootstrap then it works as expected.
How would I go about resetting the styling so that it works within Bootstrap 4?
It looks like the row class in Bootstrap is conflicting with the row class in WebChat.
Add this to your CSS to keep Bootstrap from adding a margin to the rows in Webchat:
#webchat .row {
margin: 0;
}
Hope this helps!
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.