I am using Material UI accordion. Inside AccordionSummary component where title should be placed I am creating a flex layout with two flex items.
The first flex item contains accordion title while second flex item has some buttons. The second flex item has fixed width and I want rest of space occupied by the first flex item.
So here width of first flex item is dynamic which is based on the width of accordion which in turn depends on screen size.
Now I want the title to shown as text ellipsis if title text length is more than available flex space but in practicle that is not the case. When title text is long it overflows out from the Accordion component and even content of second flex item also overflows
It's complicated to put my project code here so I have reproduced it in the codesandbox
You need to provide width if you're using noWrap, I have created this fork with a required fix. Check the description of noWrap here for further details
What is the difference between Box and Grid in Material-UI
When to use each one
I'm confused by that
The grid creates visual consistency between layouts while allowing flexibility across a wide variety of designs. Material Design’s responsive UI is based on a 12-column grid layout.
How it works
The grid system is implemented with the Grid component:
It uses CSS’s Flexible Box module for high flexibility.
There are two types of layout: containers and items.
Item widths are set in percentages, so they’re always fluid and sized relative to their parent element. Items have padding to create the spacing between individual items. There are five grid breakpoints: xs, sm, md, lg, and xl.
A Box is just that, a box. It's an element wrapped around its content which by itself contains no styling rules nor has any default effects on the visual output. But it's a place to put styling rules as needed. It doesn't offer any real functionality, just a placeholder for controlling the styles in the hierarchical markup structure.
I often think of it as semantically similar to the JSX empty element:
<>
Some elements here
</>
But just with some Material UI capabilities:
<Box component="span" m={1}>
<Button />
</Box>
In short:
Box is a more powerful, convenient, and potential replacement for div. You can change it to any HTML elements (e.g. span), but most of the time you will use it as div replacement.
Grid is the syntactic sugar of Grid Layout.
Use Box when you want to group several items and control how they look on the page. For example, you can take several paragraphs and use a box to put a border around them.
Use Grid for setting up a grid layout system for organizing content in columns on the page. Designers will divide the page into 12 columns with the idea that it is more visually appealing to have content aligned along each column or group of columns. Here is an article that provides much better detail on the subject: https://www.interaction-design.org/literature/article/the-grid-system-building-a-solid-design-layout
Box
The Box component serves as a wrapper component for most of the CSS utility needs. The Box component packages all the style functions that are exposed in #material-ui/system . It's created using the styled() function of #material-ui/core/styles
Grid
GridBox is the low-level representation of Grid. Except for low-level notebook expression manipulation, GridBox should not need to be used directly. In a notebook, columns of a GridBox can be added using and rows using . or a menu item can be used to start building a GridBox.
Box
The Box component serves as a wrapper component for most of the CSS utility needs.
The Box component wraps your component. It creates a new DOM element, a <div> by default that can be changed with the component property.
Let's say you want to use a <span> instead:
<Box component="span" m={1}>
<Button />
</Box>
This works great when the changes can be isolated to a new DOM element. For instance, you can change the margin this way.
Grid
The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.
The grid creates visual consistency between layouts while allowing flexibility across a wide variety of designs. Material Design’s responsive UI is based on a 12-column grid layout.
How it works
The grid system is implemented with the Grid component:
It uses CSS’s Flexible Box module for high flexibility.
There are two types of layout: containers and items.
Item widths are set in percentages, so they’re always fluid and sized relative to their parent element.
Items have padding to create the spacing between individual items.
There are five grid breakpoints: xs, sm, md, lg, and xl.
Further Reading
Docs on Box & Grid
I have a search suggestion component that is displayed under a TextField. whenever text is entered into the TextField the search suggestion component displays a list of possible matches based on the current entered text... I have more content under the TextField that gets pushed to the bottom whenever the Search suggestion gets populated with results. Is there any way to overlay the search suggestions over the content underneath it instead of pushing the content down? in HTML/css I would apply the position absolute and z-index css properties to the search suggestion component but this doesn't seem to be the case in Nativescript. I see that Nativescript does support the z-index css property but just applying that doesn't seem to do anything. It doesn't look like Nativescript supports the position property... Any idea how I can make this work/what i'm missing?
You have a couple quick options. One is to use a grid as mentioned in the comments. Set the views on the same row/col. This is the same as stacking views on the z axis. Or an absolute layout and use the same positioning of the views within that layout.
When using the visual editor in the Wordpress there WOffice it gives you the option to add "Extra Class to the column". underneath the text box it says "Such as: center to align in the middle the content inside." Now i have tried many other options other than "center" but nothing seems to work. please let me know where i can find these activation words to change the area of the text.
https://woffice.io/ is using Bootstrap so you can simply use text-center to center any content in your column. See: http://getbootstrap.com/css/#type-inline-text
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 -->