I'm using Next.js app which has a card component that has read more link. when the user clicks on read more link the card should expand, I have used "react-show-more" https://github.com/One-com/react-show-more. I need to add smooth expand to the card when press the read more link with CSS Transition rule but the CSS transition is not working. This is my card component. and you can find live demo here: https://codesandbox.io/s/confident-http-cfz7p?fontsize=14
return (
<CardOuter>
<CardIcon>
<img className="CardIcons" alt="cardIcon" src={Icon} />
</CardIcon>
<CardContent>
<h3>{Title}</h3>
<ShowMore
lines={5}
more={<Link className="link-right" Content="Read More" />}
less={<Link className="link-right-sl" Content="Show less" />}
anchorClass="showMore"
>
{Description}
</ShowMore>
</CardContent>
</CardOuter>
);
I found another npm that has smooth expand,
https://github.com/tinacious/react-animated-show-more
Related
Really simple problem, but I cant find a solution. How would I be able to style both of the typography components without having to repeat the tailwind styling on each line, I try to put the stying in the "parent" div but it wont work. Thanks in advance. This is for a React-app
<div className="parent">
<Typography variant='Title' text={Company} classes="py-2 px-15 rounded-5" />
<Typography variant='SubTitle' text={City} classes="py-2 px-15 rounded-5" />
</div>
You can use classes.
classes is an object
Use mui css properties inside classes object
<Typography
classes={
root: 'custom-class',
}
>
...
</Typography>
Hi guys so I'm trying to use button in my react-bootstrap app and what that button do is everytime user click the button it will redirect the user to another page of the web-app. But for some reason it didn't work, can anyone help me please ? my router already work for other components such as header, footer, etc. But it didn't work for the Button.
Here's my code:
<Container fluid>
<Row className="Aboutus">
<Col sm={12} lg={6}>
<h1>About Us</h1>
<hr style={{border:'2px solid', color:'#10255A', width:'25.7%'}}></hr>
<p>The hotel itself possess a trendy design with attention to comfort,
quality and value based accommodation.
</p>
<button as={Link} to={"/Room"}>See Room</button>
</Col>
<Col sm={12} lg={6}>
<img src="#"></img>
</Col>
</Row>
</Container>
You would need to use bootstrap <Button> instead of native HTML <button> for that and change href instead of to:
<Button as={Link} href={"/Room"}>
See Room
</Button>;
Live Example:
You will need to open sandbox URL in another tab to see url change
Because you are using normal button, not Button in react-bootstrap.
Just update it
<Button as={Link} to={"/Room"}>See Room</Button>
Another option and just to take advantage of the native link component without using the Button component, is to use the bootstrap classes(which support styling a tags as a button):
<Link to="/Room" className="btn btn-primary">
See Room
</Link>
On our (Vue.js v.2) webpage we have a section where you can swipe between cards, or by pressing "left" and "right" button. This swiping section is written with vanilla JS, and no fancy library. In order to have the adjacent visible when swiping, I need to have all of them visible in the DOM tree, but hiding them from the viewer. I have made it so all the unfocused cards are aria-hidden, and it works great when using ChromeVox. The problem is that when using VoiceOver, and I click the "right" button, and immediately tab down to the card, it will read out the card to the left, and also get trapped there since the card is aria-hidden. Code-wise the change from aria-visible to aria-hidden happens as soon as the button is pressed, but it seems like VoiceOver has already decided that when I am focusing on the "right" button, that the next element should be card 5 (for instance). If I wait around 1 or 2 seconds after clicking the "right" button, it will change the "next" element, and focus on the correct one (card 6) when I tab down. Is there any way to get around this, so it will focus only on the aria-visible element? Maybe a way to "force refresh" VoiceOver's stack of elements to read next? Maybe if I remove the message being read out when clicking the button, it will refresh immediately? I still haven't found of doing either of those things. I created a low quality flowchart to illustrate the problem better. What I want is for it to behave like ChromeVox.
I have tried several methods of getting this to work now, and it feels like it's a bug with VoiceOver. Some of the (desperate) attempts I've tried: setting tabindex=-1, role=presentation, changing the ID of "right" button dynamically as I navigate between cards, creating an empty div with a dynamic ID below the button, using aria-flowto, dynamically setting aria-describedby on the "next" element, and different variations between these and some other stuff I can't remember.
Eventually I found a solution that kinda works. I'm not very happy about it, but it's better than nothing. What I did was to make the title inside the card aria-hidden, and creating a currentHeader variable in store. I created an sr-only & aria-visible title above the swiping section, where the v-html points to the currentHeader variable. This way, the "next" element for the "right" button will always be the same element, but content will change after I click the button. It's not a perfect solution, and for some reason it makes VoiceOver "halt" when trying to go to the next element immediately after clicking the button, but at least the user won't read the wrong text and get trapped. Here's a pseudocode illustration of how I did it if my explaination was confusing:
// old solution // old swiping-section
<button id="left" /> <div v-for="element in elements" />
<button id="right" /> <h3 v-html="element.title" />
<swiping-section /> <p v-html="element.desc" />
</div>
// new solution // new swiping section
<button id="left" /> <div v-for="element in elements" />
<button id="right" /> <h3 aria-hidden="true" "v-html="element.title" />
<h3 class="sr-only" v-html="currentHeader" /> <p v-html="element.desc" />
<swiping-section /> </div>
If anyone finds a better way to do it, please post your solution.
I'm trying to bold a single word within a React Material-UI <Typography> element (which also is within a Material-UI <Card>). I was just using html tags, and it works:
<Typography><b>First thing:</b> {answers[2]}</Typography>
But when I use them, they produce a visible re-sizing of the text on load.
I'm left nesting <Typography> tags, which forces me to apply a bunch of styling to make them appear normally:
<Typography style={{display:'inline-flex', alignItems: 'baseline'}}><Typography variant='h6' style={{marginRight:'3px'}}>Path:</Typography> {path}</Typography>
This seems like a janky solution. Am I missing something? Like another reason why the <b> tags are causing a load delay, or a built-in Material-UI solution?
Full code for the <Card>, as reference:
<Card className={classes.card}>
<CardActionArea>
<RenderImage imageAddress={myImage} widthAndHeight={[230, 180]} style={{marginLeft: '10%'}} />
<CardContent>
<Typography style={{display:'inline-flex', alignItems: 'baseline'}}><Typography variant='h6' style={{marginRight:'3px'}}>Path:</Typography> {path}</Typography>
<Typography><b>First thing:</b> {answers[2]}</Typography>
<Typography><b>Second thing:</b> {answers[0]}</Typography>
<Typography style={{marginBottom: 0}}><b>Third thing:</b> {answers[1]}</Typography>
</CardContent>
</CardActionArea>
</Card>
Have you tried with Box component?
You could do something like
<Typography component='div'>Normal text <Box fontWeight='fontWeightMedium' display='inline'>medium font weight text</Box> and some more normal text</Typography>
Note that component='div' prop on Typography wrapper is required as Box component cannot be nested under the Typography's default p.
Source Typography font weight
To fix the issue Mohamed mentioned, you can change the component Box renders as to span (displayInline will be unnecessary using this method):
<Typography>Normal text <Box component="span" fontWeight='fontWeightMedium'>medium font weight text</Box> and some more normal text</Typography>
You can also do something like this:
<Typography>normal text <strong>bold text</strong> normal text</Typography>
I am building a web app using next.js with react and semantic-ui-react for the styling, and I am trying to build a basic layout comprising of a fixed sidebar for navigation and the page content next to it. Initially I was trying to use the Sidebar component but could not get this to work. A user online suggested it's more for mobile usage, so I changed to using a Menu component with the vertical and fixed properties.
I now have a fixed menu but the main page content does not start beside it -- instead it starts behind the menu. The content is inside a container which has an auto margin working from the edge of the document/page, behind the menu.
Things I have tried:
Using dev-tools and adding padding-left to the content container fixes the issue but if I resize the page the issue returns -- it's not adaptive/responsive.
Using a grid -- I have added a grid to the components but it has made no difference.
Relevant code:
_app.js
<div>
<Head>
<title>Thoughts!</title>
</Head>
<Grid>
<Grid.Row>
<Grid.Column>
<FixedMenuLayout></FixedMenuLayout>
</Grid.Column>
<Grid.Column>
<Component {...props} />
</Grid.Column>
</Grid.Row>
</Grid>
</div>
FixedMenu.js
<Menu fixed='left' inverted vertical>
<Container>
<Menu.Item as='a' header>
<Image size='mini' src='/logo.png' style={{ marginRight: '1.5em' }} />
Project Name
</Menu.Item>
<Menu.Item as='a'>Home</Menu.Item>
<Dropdown item simple text='Dropdown'>
<Dropdown.Menu>
<Dropdown.Item>List Item</Dropdown.Item>
<Dropdown.Item>List Item</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Header>Header Item</Dropdown.Header>
<Dropdown.Item>
<i className='dropdown icon' />
<span className='text'>Submenu</span>
<Dropdown.Menu>
<Dropdown.Item>List Item</Dropdown.Item>
<Dropdown.Item>List Item</Dropdown.Item>
</Dropdown.Menu>
</Dropdown.Item>
<Dropdown.Item>List Item</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</Container>
</Menu>
How can I get the content to be next to the sidebar? (I.e. the page starts on the right of the sidebar, like it's own frame.)
As an aside I would also like to be able to have the sidebar fixed, open by default but collapsible with the content taking full-width.