I would like to build a layout like the homepage example of semantic-ui: http://semantic-ui.com/examples/homepage.html
The first vertical black segment has nearly full height. It is done by the masthead class, but I don't understand from where this class comes.
I'm using react, so this is my layout so far:
render() {
return (
<div>
<Segment vertical inverted>
<p>Main</p>
</Segment>
<Segment vertical>
<p>First</p>
</Segment>
</div>
)
}
But with this the first segment doesn't have full height.
Take a look on this example with SUIR, source is also avialable. masthead class is defined in SUI example and isn't part of framework, these behaviour was implement with custom styling:
<Segment
inverted
textAlign='center'
style={{ minHeight: 700, padding: '1em 0em' }}
vertical
>
Related
I am trying to experiment with Bootstrap 5 within React, but somehow fail to understand the padding and margin. Consider the following code:
const Breadcrumbs = (props) => {
return (
<div className={"bg-dark rounded-start"}>
<Breadcrumb>
<Breadcrumb.Item href="#">Home</Breadcrumb.Item>
<Breadcrumb.Item href="https://somelink.com">
Library
</Breadcrumb.Item>
<Breadcrumb.Item active>Data</Breadcrumb.Item>
</Breadcrumb>
</div>
)
}
Its a Component which is later on shown in a Container. I chose a dark background to better show the issue. With this code, the Breadcrumbs render like this:
Now I want them to have some padding within the surrounding box, lets say only in vertical direction. According to the Spacing documentation I should be adding modifier classes, for example py-2 which should add a Padding to both top and bottom to $spacer * .5. When applying the additional class like this:
const Breadcrumbs = (props) => {
return (
<div className={"bg-dark py-2 rounded-start"}>
<Breadcrumb>
<Breadcrumb.Item href="#">Home</Breadcrumb.Item>
<Breadcrumb.Item href="https://somelink.com">
Library
</Breadcrumb.Item>
<Breadcrumb.Item active>Data</Breadcrumb.Item>
</Breadcrumb>
</div>
)
}
It now looks like this:
My question now is: how can I add padding that keeps the Breacrumbs vertically centered within the surrounding div?
//Edit: I think I found something. The <ol> element created by Breadcrumb has a margin-bottom set. How can I remove that?
i am building a web-app using react js and i am trying to put a backround image which will stay there for every page i visit.My App.js render code is this :
render() {
return (
<div > ---> Case 2: <div className="classN"> instead of <div>
<NavBar user={this.state.user} />
<main>
<Switch>
...Routes...
<Route path="/evcharge/api/admin/healthcheck" component={Healthcheck}></Route>
... More Routes...
</Switch>
</main>
----> Case 1: <img src="/images/backround.png"/>
</div>
);
}
}
What i have tried after searching online is 2 things.
As shown above in case_1 source the image there which will cause this in main page:
picture1
But if i go to,for example,login this happens:
Picture2
For the second case this is my css code:
.classN{
background-image: url(./images/backround.png);
}
In this case the image is like this :
Picture3
This both wont get bigger than the Menubar and will also disorder my other elements of the page.
What i would like to achieve is just have the same backround image be displayed in the backround of each page without influencing the other elements of each page,such as the login form.I have been stuck in this for a while and i can't seem to get it to work.Any advide would be helpful.
Thanks in advance.
If you want to use it in every page put that background image directly in body so It will be global
body {
background-image: url(./images/backround.png);
}
In storybook, all stories are sitting tight agains the top left corner of the container.
This is causing problems when displaying items that have visual appearance outside the relative container e.g. a box-shadow.
So I am wondering what is the best way to add margin to the surrounding container. I had a look in the theming docs of storybook, but could not find anything related?
In .storybook/preview.js, you can just add the following:
addDecorator(storyFn => (
<>
<div style={{ margin: '1rem' }}>{storyFn()}</div>
</>
))
This way all the stories will appear with a margin of 1rem.
Adding to my preview.js:
export const decorators = [
(Story) => (
<div style={{ margin: '3em'}}>
<Story />
</div>
)
]
solved the problem for me
It's better to add padding on each component because not all components needs margins.
For example, in your .stories.tsx file
const Template: ComponentStory<typeof IconButton> = (args) => (
<div style="padding: 20px"><YourComponent {...args} /></div>
)
You can even use layout parameter to center all stories in the UI globally.
See Story layout for more details.
<!-- Checkbox.stories.mdx -->
import { Meta } from '#storybook/addon-docs';
import { Checkbox } from './Checkbox';
<Meta
title="Checkbox"
parameters={{
layout: 'centered',
}}
component={Checkbox}
/>
I'm building my first React modal. The basic structure is now done but I want to have more padding in between the border and the contents. I thought this would be simple but I've tried several things and none work.
return (
<div className={classes.backDrop}>
<Modal
backdrop={'static'}
size='lg'
show={true}
centered={true}
style={classes.modalContainer}
data-testid='addFleetCustomerModal'
>
<div className='modalContainer'>
<ModalHeader>
</ModalHeader>
<Modal.Body>
<Modal.Title>
Add Customer
</Modal.Title>
<Form.Group>
<Form.Label className={classes.highlight}>Company Name*</Form.Label>
<Form.Control id='companyName' data-testid='companyName' type='text' placeholder='For example: ABC Corp.'
/>
</Form.Group>
<Form.Group>
<Form.Label>
<strong>NOTES</strong><br/>
Notes added here can only be viewed and edited by other team members.
</Form.Label>
<textarea className="form-control" id="companyNotes" rows="3"></textarea>
</Form.Group>
</Modal.Body>
<Modal.Footer>
<Row>
<a href='/#'>Cancel</a>
<Button variant='secondary' size='sm'> Next </Button>
</Row>
</Modal.Footer>
</div>
</Modal>
</div>
);
Any ideas on what CSS I should add (and where) to move the content of the modal inward a bit more?
add this to your css:
.modal-header,
.modal-body,
.modal-footer {
padding: 2rem; //change the padding as you want
}
this will change the padding but the with full width lines between sections.
See Working demo 1
you can also add the padding around the whole modal but this this won't make the lines full width:
.modal-content {
padding: 2rem;
}
See Working demo 2
My apologies, everyone. I must have been really tired yesterday afternoon when I posted this. Let me explain the solution:
The code I posted above is inside a functional component that is defined like this:
const AddCustomer = ({ classes }) => {
classes comes from the parent component, which is defined like this:
class UserMgmtPage extends React.Component {
In this parent component, the CSS styleSheet is injected into via react-jss code. I then pass does these same CSS classes into functional child component.
You'll notice this 2nd line, which was always working:
<div className={classes.backDrop}>
My failure was to use the same syntax. Thus the solution is this:
<div className={classes.modalContainer}>
Sorry for the trouble but I do appreciate everyone who tried to help!
I am using React-Virtualized to create a lazy loading infinite list.
https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md
However, I am not able to create a gap between the rendered divs, since they are absolutely positioned and top is calculated dynamically.
I've tried the following, however no luck.
Any ideas on how to add this gap between each element? Thanks!
<AutoSizer disableHeight>
{({width}) => (
<List
onRowsRendered={onRowsRendered}
ref={registerChild}
rowCount={rowCount}
rowRenderer={rowRenderer}
width={width - 30}
rowHeight={175}
height={this.state.height - 64}
style={{
paddingTop: 15,
boxSizing: 'content-box',
}}
containerStyle={{
position: 'relative',
overflow: 'visible',
}}
/>
)}
</AutoSizer>
I ended up solving for the padding by adding a div inside the CellMeasurer as a parent container to provide the padding.
The div is the absolute positioned container, whereas the Card is padded and shows the box shadow.
<CellMeasurer
cache={this.cache}
columnIndex={0}
key={key}
rowIndex={index}
parent={parent}
>
{({ measure }) => (
<div
className={s.listItem}
style={style}
onLoad={measure}
key={index}>
<Card>
Build a div using padding-bottom arround your rendered item.
Example:
<div style={paddingBottom:10}>
// Your item component goes here
</div>
I also asked on GitHub what's the prefered way. See the question here: https://github.com/bvaughn/react-virtualized/issues/1786
You can just decrease the height, if one item is like 50 pixels and you want some spacing , do that to your cell renderer (rowRenderer prop):
style={{ ...style, height: CELL_HEIGHT - ROW_SPACING }}
So item will be placed on the exact same places based on the calculations of the library but they will be smaller and you will have space between them.
That would be your List component:
<List rowHeight={CELL_HEIGHT} .... />