I have a custon class inside my react js render , it's a style to make 3 buttons inline (2 on the right and one to the left) in the same line.
But the buttons are not responsive to mobile and other screens, I tried to put the style in a custom css stylesheet but it didn't work and the buttons didn't show up inline.
Here is my CodeSandBox.
Many thanks
Please check with the property flex-wrap: wrap on parentStyle. This will make the prev and next buttons move to the next line as you resize. Similarly you can use the same property in this line <div style={{ ...childStyle, justifyContent: "flex-end" }}> as well to move the next button below the prev button if the browser is resized further
Please take a look at this, I want to put each button in new line in this case :
Small screen test
They seem to line up - what is the problem?
Related
I need to use the entire dialog window space to utilize by both cancel and save buttons.
Can anyone help me on this?
Assuming that your buttons are contained in a mat-dialog-actions div, you can do this by simply adding the following definition to the CSS file of your dialog.
button {
flex-grow: 1;
}
Please have a look at the following StackBlitz
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%" }}>
Hi I am using bootstrap drop down button but it's height is smaller than button
I don't wont to use since I'm Using already.
thanks in advance
Because you provide only image, so i can only provide bootstrap document
http://getbootstrap.com/components/#btn-groups
Please be sure you add class btn-group on wrapper div of dropdown button.
Try this: http://www.bootply.com/MincjjEhJw
I've run into some trouble with Bootstrap 3.2.0. Basically, I have a header menu with some li elements and inline with that I have a simple login form.
Please see my code here
the problem is that the css in not correctly handling the left and right floated elements
Weirdly enough, everything seems to work when only a single input element is present, as you can see here
Please note that the html is taken directly from Bootstrap examples at
- http://getbootstrap.com/examples/jumbotron/
- http://getbootstrap.com/examples/dashboard/
p.s. the Jumbotron seems to work just fine with the login form but I'm guessing that is because there is no ul/li left floating menu
I'd appreciate any help you can offer
Thank you
Edit
Hey guys and thank you for replies so far. I'm not sure whether this is the expected behaviour
->
i.e. the login form is pushed to the next row, but I would expect it to collapse everything into a "mobile" type of menu before pushing the form down onto the next row.
Edit 2
p.s. the screenshot above is from Firefox 31.0 (and I see the same Chrome Version 36.0.1985.125 m)
A few ways you can handle this...
1) Customize the Bootstrap CSS so the menu collapses at a different screen size: i.e. at http://getbootstrap.com/customizer, change #grid-float-breakpoint to = #screen-md-min.
2) Add some of your own custom CSS to shrink the input fields to ~ width:100px at the right time, via a custom class added to the input-group, and a media query:
#media(min-width:768px) and (max-width:992px){
.custom-class{width:100px;} /* tweak this px-count to get exactly what you want */
}
3) Using Bootstrap's hidden/visible column classes, put the login elements within a popover for only the sm screen size. This is the "Advanced" option, and is probably overkill, but fun to try. It would be something like:
...
<div class="visible-sm">
<div class="popover" html="true">Put your inputs, button and other HTML here</div>
</div>
<div class="hidden-sm">
<input ... ><!-- Put your regular login here -->
I want to apply styles on input type=file's upload button to make it attractive as like bootstrap buttons. Is there any way to apply styles on this button. Is there any support for it in bootstrap ?
The common solution would be give your input[file] a opacity:0 and postion:absolute(make sure the parent element has position:relative), then let it appear on your normal bootstrap button.
See this demo I create for you.