Question

0

275

Visualizações

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 Respostas

Responde à pergunta

0

Responde à pergunta

Encontrar trabalhos remotos

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

275

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

1 Respostas

0

Encontrar trabalhos remotos

Andres GPT