0
273
VistasHow can I create view more and make my word stand in same line?
I'm having an issues with css that my "Room Description" is splitting 2 line.
When I add white-space: nowrap it become like this:
Here is my code base:
<span className="room-type mv-print-link">
{this.props.waitlistRooms.map((room: any, i: any) => (
<div>
{this.props.waitlistRooms.length > 0 ? &&
<span
onClick={() => this.toggleRoomModal(resortId || "", room.roomPoolCode)}
key={i}
>
<b>{"Room Description, "}</b>
</span>
)
</div>
))}
css file:
.room-type-container
display: flex
flex-direction: column
margin-bottom: 15px
.room-type
display: flex
flex-direction: row
flex-shrink: 0
width: 300px
How can I achieve when there is more than 3 rooms and it will appear View More button? Thanks for helping me
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
so the mechanic you want should work like this:
- when you have only 3 (or any other default) rooms, just show them. lets say you have a list of rooms, so something like:
{roomsList.map((room) => <span>{room.name}: {room.description})}now, if you have more than the default rooms number (3 in our case), you want to render also the rest, but out of the view. in order to accomplish this, you should do the follow:
- split your array in 2: first-3-items, rest-of-items.
- render first array.
- if the length of the second array is bigger than 0, render a 'View More' button using react-collapsible (which makes the collapsible behaviour you desire) and inside of it render the rest of the rooms.
in a quick example it should look something like this:
//after splitting the array you will have:
const roomsArray1 = [{name:' roomA', description: 'niceA'},{name:' roomB', description: 'niceB'},{name:' roomC', description: 'niceC'}
const roomsArray2 = [{name:' roomD', description: 'niceD'},{name:' roomE', description: 'niceE'}];
{roomsArray1.map((room) => <span>{room.name}: {room.description})</span>}
{roomsArray2.length > 0 &&
<Collapsible trigger="View More">
{roomsArray2.map((room) => <span>{room.name}: {room.description})</span>}
</Collapsible>
You can add styles as you like (spaces, colors, etc..)
By this, you will only show only part of the rooms, and by clicking the 'View More' button, more will appear.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta