I want this content to be slid from left to right within a page after clicking the button.
<div className="empdetails" style={{ display: isShown ? "none" : "block" }}>
{image && imgSrc && (
<img className="rounded-circle" style={{ height: "200px", width: "200px",marginLeft: "700px",marginTop: "-1500px"}} src={image} alt={imgSrc.name}/> )}
<div style={{marginLeft: "700px",marginTop: "-600px",font: "caption",fontStyle: "italic",fontFamily: "-moz-initial",fontSize: "25px"}}>
<div><b>Name : </b>{name}</div>
<div><b>Mobile : </b>{mobile}</div>
<div><b>Designation : </b>{designation}</div>
<div><b>Address : </b>{address}</div><br/><br/><br/>
<button style={{height: "60px", width: "60px",marginLeft: "70px",borderColor: "white"}} type="reset" onClick={()=> {refreshPage();}}><span class="bi bi-check-circle" style={{fontSize: "40px",color:"green"}}> </span></button>
</div>
<br/>
<div style={{marginLeft: "700px",font: "caption",fontStyle: "italic",fontFamily: "-moz-initial",fontSize: "20px"}} className="message">{message ?
<p>{message}</p> : null}</div>
</div>
I have tried a lot of methods like toggle, and transition but as a fresher, I can't solve it. The above content should be displayed with a container and it must slide from left to right after clicking the button.
Related
I am using this code with react-bootstrap and css:
<div className="justify-content-center d-flex">
<Form>
<Form.Group className="mb-3">
<Form.Control
className="width-400"
placeholder="E-mail"
onChange={this.emailHandler}
/>
{this.state.emailInvalid ? (
<span className="text-danger">
Por favor digite um e-mail válido
</span>
) : null}
</Form.Group>
<div>
{this.state.spinner ? (
<Spinner animation="border" variant="success" />
) : (
<Button
className="mb-3 width-400"
onClick={this.sendRecoveryEmail}
variant="success"
>
Recuperar
</Button>
)}
</div>
</Form>
</div>
CSS:
.width-400 {
width: 400px;
}
So I have an variable(spinner) that is a boolean, when is false a button renders and when the button is pressed the spinner is redered.
When the button is on, the form-control use the right width size and renders with 400px.
But when the spinner is on the form-control get the bootstrap default and resizes to 100%.
I can click on the checkbox and unselect and the right width size works fine, or I can use !important in the css, but I know that this is not a good anwser.
So what am I missing here?
Here's what I'm trying to do:
Here's how it is now:
Current CSS:
.left-icon {
position: absolute;
top: 150px;
left: 203px;
}
.drawer-arrow {
overflow: visible;
z-index: 1000;
}
I have the element setup like this:
<span className="left-icon">
<img className="drawer-arrow" src={DrawerArrowOpen} />
</span>
Apologies, I figured out the problem / solution - it was in no way related to the basic CSS ...
So apologies for leading everyone on a wild goose chase here...
It was a material UI component that the arrows were within.
I resolved by pulling the arrows outside of the component and layering them ontop of the actual component, so that the arrows weren't bound by the position set within the material UI component.
OLD COMPONENT:
const drawer = (
<div>
<div className={"sidebar"}>
<div className="logo-wrapper">{logoHtml}</div>
{
matches && (
<div
onClick={() => {
setSidebarOpened(!isSidebarOpened);
}}
style={{ cursor: "pointer" }}
>
{isSidebarOpened ? (
<span className="arrow-left-icon">
<img className="drawer-arrow" src={DrawerArrowOpen} alt="Drawer Arrow Open" />
</span>
) : (
<span className="arrow-right-icon">
<img className="drawer-arrow" src={DrawerArrowClosed} alt="Drawer Arrow Closed" />
</span>
)}
</div>
)}
<Accordion defaultActiveKey="0">
<MapRoutesToPageLinks
navRoutes={navRoutes}
isSidebarOpened={isSidebarOpened}
/>
</Accordion>
</div>
</div>
NEW COMPONENT(S):
const arrowIcons = (
<div className="arrow-icons">
{
matches && (
<div
onClick={() => {
setSidebarOpened(!isSidebarOpened);
}}
style={{ cursor: "pointer" }}
>
{isSidebarOpened ? (
<span className="arrow-left-icon">
<img className="drawer-arrow" src={DrawerArrowOpen} alt="Drawer Arrow Open" />
</span>
) : (
<span className="arrow-right-icon">
<img className="drawer-arrow" src={DrawerArrowClosed} alt="Drawer Arrow Closed" />
</span>
)}
</div>
)}
</div>
);
const drawer = (
<div>
<div className={"sidebar"}>
<div className="logo-wrapper">{logoHtml}</div>
<Accordion defaultActiveKey="0">
<MapRoutesToPageLinks
navRoutes={navRoutes}
isSidebarOpened={isSidebarOpened}
/>
</Accordion>
</div>
</div>
Then I put the arrowIcons outside of the drawer in the render -
did you try to add a Z-index to your icon ?
.left-icon {
position: absolute;
top: 150px;
left: 203px;
color: white;
z-index: 1;
}
These are my cards and this is it's CSS code
card: {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
border: 'solid 1px #f0eff2',
paddingRight: '1rem',
},
and this is my react js code for the card content
<div className={classes.card}>
<Checkbox />
<div className={classes.title}>{title}</div>
<div>{description.substring(0, 70)} ...</div>
<div>{time}</div>
<div>
{favourite ? (
<BookmarkIcon className={classes.gold} />
) : (
<BookmarkTwoToneIcon />
)}
</div>
<div>
<IconButton>
<MoreIcon />
</IconButton>
</div>
</div>
I want the content spaced and justified at left side so that the cards looks the same.
I'm using Semantic UI React.
The code below makes the Popup element with the circular "i" trigger button appear inside the bounds of the button that precedes it, and looks like so:
CSS file:
.pennai .builder-scene .algorithm-btn + i.icon {
position: absolute;
top: 1.1em;
right: .1em;
cursor: pointer;
}
JS snippet:
<Grid.Column key={algorithm._id}>
<Button
fluid
inverted
color="orange"
size="large"
active={getIsActive(algorithm)}
onClick={() => setCurrentAlgorithm(algorithm)}
className="algorithm-btn"
>
{formatAlgorithm(algorithm.name)}
<div className="param-count">
{`${Object.keys(algorithm.schema).length} parameters`}
</div>
</Button>
<Popup
on="click"
position="right center"
header={formatAlgorithm(algorithm.name)}
content={
<div className="content">
<p>{algorithm.description}</p>
{algorithm.url &&
<strong>Read more here <Icon name="angle double right" /></strong>
}
</div>
}
trigger={
<Icon
inverted
size="large"
color="orange"
name="info circle"
/>
}
/>
</Grid.Column>
My question is how does the CSS selector work for this? The Button includes className="algorithm-btn", but my naive take on the CSS selector seems like it should be the Popup element that needs to be told to place itself relative to its ancestor, and thus it should receive the .algorithm-btn class?
I have a 3rd party component which is using display:flex. It behaves correctly in terms of it's top position, but I want the bottom of the component fixed to the bottom of the browser window.
https://codesandbox.io/s/18ox21zqm4
const App = () => (
<div>
<Menu fixed="top" inverted>
<Container>
<Menu.Item as="a" header>
Navbar
</Menu.Item>
<Menu.Item as="a">Home</Menu.Item>
</Container>
</Menu>
<div style={{ position: "fixed", top: "100px" }}>
<Header as="h1">Dynamic Height Content</Header>
<TextArea placeholder="This container height may grow or shrink based on content." />
<Segment style={{ backgroundColor: "red" }}>
<Grid>
This 3rd party component which uses display:flex should have top just
below above component, bottom fixed to browser window bottom (scales
with window resize).
</Grid>
</Segment>
</div>
</div>
);
render(<App />, document.getElementById("root"));
I have tried putting the component in a div with it's top and bottom fixed, using a ref of this div to get the height and derive what the height of the flex component should be, but the height from the ref does not update with window resize, only on browser reload.
How can I go about achieving my goal?
We can do something like this but this is usually not a good coding practice (don't have enough reputation yet to comment)
<Segment style={{ backgroundColor: "red", height: "100vh" }}>
The actual HTML output is:
<div style="position: fixed; top: 100px; bottom: 0px;">
...
<div class="ui segment" style="background-color: red;">
<div class="ui grid" style="height: 100%;">This 3rd party component which uses display:flex should have top just below above component, bottom fixed to browser window bottom (scales with window resize).</div>
</div>
</div>
Since your <div class="ui segment"> has no height, giving <div class="ui grid"> a height of 100% isn't doing anything, since it's just 100% of the parent. You need to add your height: 100% to the <div class="ui segment"> aka <Segment />, so that it can fill the space set by the hight of the wrapping div.
<div style={{ position: "fixed", top: "100px", bottom: "0px" }}>
<Header as="h1">Dynamic Height Content</Header>
<TextArea placeholder="This container height may grow or shrink based on content." />
<Segment style={{ backgroundColor: "red", height: "100%" }}>
<Grid>
This 3rd party component which uses display:flex should have top just
below above component, bottom fixed to browser window bottom (scales
with window resize).
</Grid>
</Segment>
</div>