Let's say I have the code from here:
https://stackblitz.com/edit/react-nqkupy?file=demo.tsx
which is the code from the material ui docs, "Responsive drawer" section:
https://mui.com/material-ui/react-drawer/#responsive-drawer
but I added an image as a logo at the top of the menu.
How can I remove the space above the logo?
Thanks.
Just remove the <Toolbar /> if you don't use it. Or move the logo above <Toolbar />.
You can do the following :
img {
position: relative;
left: 3.5em;
bottom: 1em;
}
/** Also Use a Class Selector if you don't want to alter all <img> elements on page.**/
Add this to your CSS File. This should work although you might need to play around with some media queries in order to make it responsive.
It also centers the logo, looks better IMO.
Related
I am using material ui ,I want to fix the left side fix and right side scrollable but its not working.I am trying in this way....
<Stack direction="row">
<Box sx={{ position: "fixed", width: "25%" }}>Left-side box content</Box>
<Box sx={{ overflow: "scroll", width: "75%" }}>Right-side box content</Box>
</Stack>
Thanks in advance...
It sounds like you are trying to create a layout where the left side of the page is fixed and the right side is scrollable. To do this with Material-UI, you can use the Grid component to create a two-column layout, and set the style property of the left column to { position: 'fixed' } and the right column to { overflow: 'auto' }.
You can also use grid-template-columns: fixed-value auto in CSS to achieve this.
It is important to note that you will likely need to adjust the widths of the columns and the container to make sure everything fits correctly on the screen.
It is also possible that you are facing some other issue, please provide more details about your code and the exact problem you are facing, so i can help you in a better way.
I'm new to React and wanted to ask what's the cleanest way to implement a background design like this. I want to know how you could change the background to blue and have the images overlap into the white area or the rings in the corners. So what is the best approach? And I don't want to use a background image
Background I want to implement
position: fixed;
background: "your image or some colors";
width: 100%;
height: 100vh;
Other contents should appear accordingly if you apply proper z-index
There are several options.
You can add !important behind the code that wnna be overwrite.
add z-index for the each element. note : the higher z-index number of the element, it will be place at the top.
in-line style. where you can add tag style={{ your style here}} within your element. example
<div style={{z-index : 10, backgroundImage : black}} > Text here </div>
manual CSS with tag backgroud-image.
I want my fixed navbar that stays on the top of the page to display over everything as I scroll down through the page, but when I scroll down the Carousel ends up on top of the navbar.
I have tried to give a z-index: 0 with an !important tag to the carousel, and z-index: 1 to the nav bar but that didn't do the trick. There is a photo attached to show the problem I am talking about.
give the zindex of fixed navbar some higher value like
z-index: 1090
I wrap the Navbar in a sticky div:-
<div className="sticky-top" style={{ zIndex: 1090 }}>
<Navbar></Navbar>
</div>
BTW I use react-bootstrap.
I'm looking at my header CSS properties. My header has a z-index: 1. Fiasco.
Change it to 1090. It will help you.
Check all elements what was overflow by the gallery. Check them all!!! (z-indexes)!
I'm familiar with Bootstrap and how to make it show/hide objects via responsive classes. However, Stencil appears to use it's own class names, and I'm unable to find reference to them. I have found some Stencil documentation, but I can't find this in it.
I'm using the theme Exhibit and found in the sidebar code that I can make an object appear in the drawer on small screens by declaring class="drawer-item drawer-extras". I can't find what is needed to make an object disappear from the sidebar, so that it is not in the drawer on small screens.
You can add css to hide or transform these items by saying something like
#media (max-width 768px) {
.drawer-item {
display: none;
}
}
For information on nesting these media queries, you can check Using multiple #media (max-width) CSS
Can I have a multi line toolbar?
I need a fixed header for all my pages, but the ons-toolbar have only one line. I need two of it in my header.
It is possible to do that?
Thank you!
You can put an extra <div> with the appearance of a toolbar with class="navigation-bar": http://onsen.io/reference/css.html#toolbar
It is also possible to change the CSS of your current toolbar to make it bigger, if you want. The anwer of this question may be helpful: Doesn't show div in onsen ui and angularjs
Hope it helps!
Edit: some CSS to do this...
Fix the position to the top under a main toolbar: position: fixed; top: 44px;
Change the page content so the new toolbar does not overlap with it:
ons-toolbar ~ .page__content {
top: 88px;
}
Working here: http://codepen.io/frankdiox/pen/YXKyjX