Im new to react (and react bootstrap) frontend and im a bit stuck. Is there a way to use a dropdown like this and have the 2 date inputs next to eachother (horizontally) instead of vertically? Orcan i only achieve that by using accordion? It needs to look like a dropdown before you click it.
This is how it looks now. And as you see it isnt quite fancy.
My current code:
return (
<Dropdown>
<Dropdown.Toggle variant="light" style={ buttonStyle } id="dropdown-basic" className="uniform-select" >
{headerTitle}
</Dropdown.Toggle>
<Dropdown.Menu>
<Form.Control
type="date"
name="startTime"
id="startDateId"
onChange={ handleStartDate }
/>
<Form.Control
type="date"
name="enddate"
id="endDateiD"
onChange={ handleEndDate }
/>
</Dropdown.Menu>
</Dropdown>
)
Help would be appreciated!
Well, im quite new too but you can probably change the flexbox properties, from a column to a row, if you havent tried it. just inspect the DOM element, and create a new css style with the classname and experiment with the flex directions, cause as far as i know most of react bootstrap components use flex anyways
Related
I'm looking to customize the downward arrow icon in the react multi-select component. In the documentation, there is an attribute ArrowRenderer which takes reactNode as a value.
How to configure this to customize the styles?
Dropdown looks like:
Any help would be highly appreciated
Put your react node in div tag with specific class(Name) and then access that class by css selectors.
<MultiSelect
arrowRenderer={()=>
<div className="custom-arrow" >
<CustomArrowComponent />
</div>
}
/>
guys! I'm building React Native component that contains a UI pattern. This UI pattern will contain several smaller reusable patterns. This way:
<ListItem onPress={}>
<IconContainer>
<Icon />
</IconContainer>
<Body>
<Text>Content</Text>
</Body>
<Right>
<Action onPress={} />
</Right>
<ListItem>
Now I'm also building embedding size variants (small, medium/default and large) for some of these children, like this for example:
<IconContainer large={boolean} small={boolean}>
<Icon />
</IconContainer>
And since the are several children, I don't want to have the person using the component to have to specify the size variant for each one of the children. That'll also require them to know which one of the children have size variants and which one doesn't.
So, what I'm trying to do is to embed a props.large and a props.small into the parent and use that to change de value of the same prop if available in the children.
Any ideas of how to do that in a simple way?
(I suspect this is easy but I've been struggling with this for a while so I thought I'd ask for some help.)
Thanks in advance!
In my React component called Grid.js I am using a childcomponent called Pagination. It looks like this:
<StyledBox wrap py={12} px={18}>
<Header />
{state.data}
<Wrapper column justify="center" align="center" p={12}>
<Pagination onChange={this.handleChange} totalPages={10} />
</Wrapper>
</StyledBox>
It is a grid with some pagination functionality. When the user selects a page on the Pagination a changeevent will fire and a stateprop of the Grid will be set called state.data. The issue is that the pagination starts jumping around randomly: looks like the state has changed on the component.
Do I have to move the Pagination out of the Grid component and make it not a childcomponent?
Is the Pagination Component jumping around randomly because previously there was a specific length of data. Then when the this.state.data changes, the length of data is different? So then, the Pagination had to adjust it's positioning. Without more information, it seems like a HTML and CSS issue.
Try to set position: fixed; bottom: 1rem on the Pagination component css and see if it still jumps.
Also, regarding React Components, <Content /> and <Pagination /> components seem to be conceptually sibling and not parent-child related. So I would structure the app something like this:
<ParentContainer>
<Header />
<Content data={this.state.data} />
<Pagination onChange={this.handleChange} totalPages={10} />
</ParentContainer>
I want to put the toggle element on the other side, but the problem is that listItem according to the Material-ui documentation doesn't support a leftToggle option (the attribute leftToggle doesn't exist). Is there any way to do this?
I want to do put the toggler and secondary text on the same line. Also, is there a solution that doesn't involve ListItem?
<ListItem primaryText={theEEState ? "Allow": "Disallow"}
secondaryText="Allow / Disallow"
rightToggle={
<Toggle
onToggle={onToggleStateMethod}
toggled={theEEState}
/>
}
/>
Use the Toggle component. The documentation contains an example of a left hand side switch.
http://www.material-ui.com/#/components/toggle
<Toggle
label="Label on the right"
labelPosition="right"
style={styles.toggle}
/>
I'm using React-Leaflet and (callemall)Material-UI in a project. I'm attempting to render the Material-UI Card component within the <Popup></Popup> component of React-Leaflet. I've tried pulling it into the Popup as a component but the popup doesn't let the component work as it should. Specifically, the card component has a button element that expands it but unfortunately, the popup won't let me click it. I'm sure there's some CSS-y thing that I need to override but my thought is that an easier option would be to just replace the popup component with my own component but I'm not sure how to go about doing so. Any insight is much appreciated :)
My code looks like this:
<Marker position={position}>
<Popup>
<MapPopup />
</Popup>
</Marker>
And the imported component looks like: (I've removed styles and unimportant details to make it simple to read)
<Card>
<CardHeader />
<CardMedia
expandable={true}
overlay={
<CardText expandable={true}>
<div>
<p>Text</p>
<Chip>text</Chip>
</div>
<div>
<p>Text</p>
<Chip>Text</Chip>
</div>
</CardText>
}>
<img src="cardMediaImageURL" />
</CardMedia>
</Card>
Long story short, React-Leaflet and Leaflet renders static html for the popup so it is not possible to render dynamic content within it. Rendering a material-ui component is possible, however it won't be interactive. You can accomplish this by wrapping your component with <MuiThemeProvider></MuiThemeProvider>. You just have to make sure that you have the content set to be the complete view and not with anything like an expander.
Solution is as follows:
<Popup>
<MuiThemeProvider muiTheme={getMuiTheme(yourThemeName)}>
<YourCustomComponent />
</MuiThemeProvider>
</Popup>