How can I fix this white line?enter image description here
If I make height:100% it looks so:enter image description here
In your main page component which contains all the components of your page like App.js
Add a Box element and add some styling in it.
<Box sx={{height:'100vh', background:'your_background'}}>
Your components
</Box>
Related
I created a component in Sitecore Next Js React. The component is basically a full width banner. I need to set an image as the background of the parent dive and this should be editable through the experience editor.
How would I go about doing this in nextjs?
You can make it similarly to react or with Next component.
Place image to public folder and add path to image in background-image property
Import image and place import to background-image property like this:
backgroundImage: url(${bg.src})
Use next/image component. https://nextjs.org/docs/api-reference/next/image
This component make some optimization.
You should place image in src prop like 1 variant or just pass image import, add layout = fill, and position: relative to parent.
Official demo: https://image-component.nextjs.gallery/background
Docs: https://nextjs.org/docs/api-reference/next/image
enter image description here
Hello, I want to delete the space between the menu and the button, so the button and the drop-down menu will be combined. I don't know how to do this can you help me?
I can not find how can ı remove it .
You can do it by wrapping the Button inside a span element. like this:
<Dropdown placement="bottomLeft" ...>
<span>
<Button>bottomLeft</Button>
</span>
</Dropdown>
it works because Dropdown will calculate it's popup position based on the top of the element which placed directly inside the <Dropdown>, and since in the above solution, span has y-overflow, so the the popup will be shown without any space between Button and popup. You can controll the space between popup and Button by styling the span element like this:
<Dropdown placement="bottomCenter" ...>
<span style={{ display: 'inline-block', height: 27 }}>
<Button>bottomCenter</Button>
</span>
</Dropdown>
I've implemented an example Here on stackblitz you can check it out.
It would be a better way for us to help you if you share the code you wrote here.
So imagine we want to have an image inside a TouchableOpacity button.
The image is slightly taller then the button and we want it to overflow. Currently the image gets clipped just before the top. I am debugging on Android.
How can I get an image to overflow a button in react native?
Use absolute position with image :
<TouchableOpacity>
<Text></Text>
<Image style={{position:'absolute', width:.., height:.., left:.., top:..}}/>
</TouchableOpacity>
I am working with Material-UI tabs. Thanks for the help of others in the threat at Creating a Material-UI tab with image tabs instead of text labels, I was able to get images working for my tabs but I cannot control the width of the tabs no matter how small I make the images - the tabs do grow in width if I make the images larger.
I have a Code SandBox at https://codesandbox.io/s/lucid-stonebraker-q1r4v?file=/src/App.js that demonstrates the problem.
I did manage to set the width of the tabs using inline styles but it just clipped the content to the right rather than centering the image in the narrower tab.
Without the inline style, there is a responsive breakpoint at about 600 pixels. Below the breakpoint, the tab width is about 72 pixels. Larger than the breakpoint, the tab width is about 160. I just guessed these numbers by measuring a different browser window and overlying this app on it. If I do manually force the width with the inline style, I can see that the image location still moves at the breakpoint as though the underlying width that the images are centering to is the original tab width as though I hadn't forced the width.
I settled on these exact numbers of width because the visual measurement matched very close to two min-width numbers in the Material-UI tab.js source code. It could be coincidence. I actually did try changing those in the source code and testing again but they had no effect on the breakpoint behavior so I put the file back to original.
If it's at all possible, I'd like to be able to set the width to my own needs, set margins/padding to my own needs, and still have the images centered in the result.
Ciao, to center the image on Tab you have to pass a style to flexContainerVertical class on Tabs in this way:
<Tabs
orientation="vertical"
value={value}
onChange={handleChange}
aria-label="Vertical tabs example"
className={classes.tabs}
classes={{
flexContainerVertical: classes.flexContainerVertical // pass the class flexContainerVertical
}}
>
Then on your makeStyles:
const useStyles = makeStyles((theme) => ({
...
flexContainerVertical: {
display: "flex",
alignItems: "center",
}
}));
And Tab images will appear on center of the Tab.
Here your codesandbox modified.
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?