how can I center align a button in Semantic UI React
I have tried several approaches, using Grid, Grid Row, but no success
import {Segment, Button,Label,Sticky,Grid,Container} from 'semantic-ui-react';
import React, {Component} from 'react';
const GeneralSupportSegment =() => (
<Segment>
<Label ribbon color="blue" size="large">Support</Label>
<Button>contact us</Button>
</Segment>
);
export default GeneralSupportSegment;
Would be nice if you could share what you tried to do.
One solution might be:
<Segment>
<Label ribbon color="blue" size="large">Support</Label>
<Grid>
<Grid.Column textAlign="center">
<Button>contact us</Button>
</Grid.Column>
</Grid>
</Segment>
You can see it working here:
https://codesandbox.io/s/z2pkv0ro43
This one worked for me, without using Grid
<Segment>
<Label ribbon color="blue" size="large">Support</Label>
<Segment basic textAlign={"center"}>
<Button style={{textAlign: "center"}}>contact us</Button>
</Segment>
</Segment>
I found the code below to be a cleaner solution that doesn't require to add Grid from semantic-ui. The only thing was that I used the button within my register/sign up form. May not work for everyone.
What I did was add a
className: 'signUpBtn'
and then within my css file I added the
display:flex;
justify-content:center;
JSX:
<Form.Field className="signUpBtn" color="blue" control={Button}> Register </Form.Field>
CSS:
.signUpBtn {
display: flex;
justify-content: center;
}
Here is the simplest solution I have:
Previous code of icon inside a button(not aligned in the centre):
<Button>
<Icon name="plus"/>
</Button>
Updated code(icon aligned at center):
<Button>
<div>
<Icon name="plus"/>
</div>
</Button>
Related
I'm working on a form that has Semantic-UI Radio toggles, and the loader and the toggle's appear to be loading in the wrong z-index.
I checked the css and the toggle contains the following
.ui.toggle.checkbox label:after {
z-index: 2;
}
while the loader is
.ui.dimmer {
z-index: 1000;
}
which seems like the appropriate behaviour. I want the toggles to be behind the loader to present the best user experience. Can anyone tell me if the current behaviour is by design or not? Trying to determine if this is a bug to be reported or a feature to be requested or if there's a problem with my implementation.
My code (edited for brevity)
import { Form, Dropdown, DropdownItemProps, Dimmer, Loader, Button, Icon, Segment } from "semantic-ui-react";
return (
<Fragment>
<div style={{ display: "flex", flexDirection: "column" }}>
<div className="ui segments">
<PageHeader
text="Some text"
subText="Some subtext"
pageIcon="cogs icon"
/>
</div>
<Dimmer.Dimmable dimmed={loading}>
<Dimmer simple active={loading}>
<Loader>Loading</Loader>{" "}
</Dimmer>
<Form onSubmit={() => save()}>
<Form.Checkbox
label="Label 1"
checked={display}
onChange={(e, { checked }) => setDisplay(!!checked)}
toggle
/>
<Form.Input
label="Label 2"
placeholder="Placeholder"
value={data}
onChange={(e, { value }) => setData(value)}
/>
</Form.Group>
</Form>
</Dimmer.Dimmable>
</div>
</Fragment>
);
The comment helped me out. The problem was resolved using https://coder-coder.com/z-index-isnt-working/#alternative-solution-remove-positioning-from-the-content-so-it-wont-limit-the-modals-z-index from the suggestion.
I used a sticky position for the form element. Not necessarily the best solution but it sufficed for this purpose.
I was creating React project and here is the component that I want to ensure that is put inside a string.
<InfoIcon
tooltip={`${hints.todoHint} <br/> ${hints.inProgressHint} <br/> ${hints.doneHint}`}
/>
but it is not working since br/ is literally rendered like br/
One option is to convert tooltip in to three props and add <br /> in the InfoIcon component. For example InfoIcon component can be
const InfoIcon = ({ todoHint, inProgressHint, doneHint }) => (
<div>
{todoHint}
<br />
{inProgressHint}
<br />
{doneHint}
</div>
);
// Using Info Icon
<InfoIcon todoHint={todoHint} inProgressHint={inProgressHint} doneHint={doneHint} />
Other option is to send tooltip as follows
const tooltip = (
<div>
{hints.todoHint}
<br />
{hints.inProgressHint}
<br />
{hints.doneHint}
</div>
)
<InfoIcon tooltip={tooltip} />
Well, material-ui tooltip allows you to use ANY kind of HTML content. => refer to official document customized tooltiops
This means you can use normal <div> and <Typography />, and any other styled elements to handle multi-line content.
The only thing you need to do is pass the content to props title => refer to document of tooltip api
import {
Tooltip,
Typography
} from '#material-ui/core';
<Tooltip
title={ // customized content here via props `title`
<>
<div>Seperate line</div>
<Typography>Seperate line</Typography>
</>
}
>
<IconButton aria-label="delete">
<InfoIcon /> // You can use your original icon here
</IconButton>
</Tooltip>
Watch it online: https://stackblitz.com/run
You can find related question here: How to make line break for ToolTip titles in Material-UI
I'm pretty new to the Material UI Library but I really like it so far! However, i am having an issue with the AppBar component overlaying over my other content. I currently have <AppBar /> and <myComponent /> in my App.js render method. Here is the code snippet for that:
render(){
return (
<div>
<AppBar />
<myComponent />
</div>
);
}
This is the code for the myComponent function:
function myComponent(){
return (
<h1>
Hello
</h1>
);
}
However, when I run this code, the "Hello" message is overlaid by the AppBar component. Is there some way to have my hello message (and corresponding code) be displayed under the AppBar? It's a simple question but I would love to figure this out!
You need to add the top margin from top to the component which you have created right below the app bar
I am posting this from mobile if you need code just let me know I will right it for you
You can add paddingTop to the containing div to compensate for the height of the AppBar (64px by default):
render() {
return (
<div style={{ paddingTop: 64 }}>
<AppBar>
<Toolbar>
<Typography variant="title" color="inherit">
Title
</Typography>
</Toolbar>
</AppBar>
<YourComponent />
</div>
);
}
I want to implement Search bar in the center of App bar of material-ui. I have tried all possible ways and I have referred this code snippet , but can't find a solution for it.
My code snippet is
<div>
<MuiThemeProvider muiTheme={muiTheme} class="navbar">
<AppBar
title='Module Name'
onTitleClick={handleClick}
iconElementRight={<FlatButton label='LogOut' />}
onClick = {handleclick}
/>
</MuiThemeProvider>
</div>
It will be helpful if I get any solution for it.
You can use children property to add any node in AppBar, like this:
<AppBar
title="Title"
children= {
<input />
}
/>
Use styling on input field, check the working codesandbox.
you can add a ToolBar contains a Textfield
you can check documentation ,this is a Demo
Using only Material UI
<AppBar>
<Toolbar>
<Input
type="search"
/>
</Toolbar>
</AppBar>
You can check the docs here.
Installing another framework.
npm i material-ui-search-bar
A basic code snippet can be found on the main page.
import SearchBar from "material-ui-search-bar";
// *snip*
return (
<SearchBar
value={this.state.value}
onChange={(newValue) => this.setState({ value: newValue })}
onRequestSearch={() => doSomethingWith(this.state.value)}
/>
);
You can check the docs here.
Try this
<AppBar>
<Toolbar>
<InputBase placeholder="Search for products, brands and more" />
</Toolbar>
</AppBar>
Pass a prop in the AppBar component
<AppBar
title="Title"
showSearch= {
<Toolbar>
<InputBase placeholder="Search" />
</Toolbar>
}
/>
You can handle AppBar component based on customName prop like if you're passing this prop then it should show Search else not.
After I've added DatePickers to a simple form, all components got placed vertically, while I would prefer them to be placed horizontally. Is there any parameter that should be set to make this work, or I must play a bit with CSS?
<MuiThemeProvider>
<div>
<TextField hintText="Enter text"/>
<DatePicker hintText="Date from" container="inline" mode="landscape" />
<DatePicker hintText="Date to" container="inline" mode="landscape" />
<IconButton>
<img src="img/ic_search_black_24px.svg"/>
</IconButton>
</div>
</MuiThemeProvider>
Any suggestions are appreciated!
On each DatePicker, set the style to:
style={{ display: 'inline-block' }}