Question

0

274

Views

How 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

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-06T15:36:01.149Z

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.

0

274

How can I create view more and make my word stand in same line?

1 answers

0

Find remote jobs

Andres GPT