CODEWITHSUNDEEP
javascripthtmlcssreactjs
cameronErasmus
cameronErasmus

Reputation: 190

Table Data Expanding Row Height (CSS Issue)

I have a silly issue that I'm dealing with.

I'm busy with a table in react that calls an api and maps the results, I'm testing long character length email addresses to see how the table responds and I'm getting pretty bad overflow (as you can see in the last row). I've researched css solutions but I can't seem to figure it out.

enter image description here

I'll attach the table structure and css code below

<CTable align="middle" className="mb-0 border" hover responsive>
                <CTableHead color="light">
                  <CTableRow>
                    <CTableHeaderCell className="text-center">
                      <CIcon icon={cilPeople} />
                    </CTableHeaderCell>
                    <CTableHeaderCell>First Name</CTableHeaderCell>
                    <CTableHeaderCell>Last Name</CTableHeaderCell>
                    <CTableHeaderCell>Email</CTableHeaderCell>
                    <CTableHeaderCell>User Type</CTableHeaderCell>
                    <CTableHeaderCell>Date Created</CTableHeaderCell>
                    <CTableHeaderCell>Date Updated</CTableHeaderCell>
                    <CTableHeaderCell>Last Login</CTableHeaderCell>
                  </CTableRow>
                </CTableHead>
                <CTableBody>
                  {data.map((data) => (
                    <CTableRow v-for="item in tableItems" key={data.userID}>
                      <CTableDataCell className="text-center">
                        {data.userID}
                      </CTableDataCell>
                      <CTableDataCell>{data.firstName}</CTableDataCell>
                      <CTableDataCell>
                        <div>{data.lastName}</div>
                      </CTableDataCell>
                      <CTableDataCell className="column-overflow">
                        {data.email}
                      </CTableDataCell>
                      <CTableDataCell>{data.role}</CTableDataCell>
                      <CTableDataCell>{data.createdAt}</CTableDataCell>
                      <CTableDataCell>{data.updatedAt}</CTableDataCell>
                      <CTableDataCell>
                        <strong>{data.lastLogin}</strong>
                      </CTableDataCell>
                    </CTableRow>
                  ))}
                </CTableBody>
              </CTable>

The css I'm using is defined here <CTableDataCell className="column-overflow">, maybe I have it in the wrong place?

.column-overflow {
  overflow-y: hidden;
  max-width: 275px;
}

I would greatly appreciate any assistance.

Upvotes: 0

Views: 165

Answers (2)

Daniel Black
Daniel Black

Reputation: 605

If you are looking for a way to truncate the string you can use the following CSS which will display an ellipse rather than wrapping:

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Which looks like:

.outer{
  width:100%;
}
.inner{
  width:50px;
}
.truncate {  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class='outer'>
  <div class='inner truncate'>Some really long text to force the element to try and wrap.</div>
</div>

Source: https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

Upvotes: 1

Kinglish
Kinglish

Reputation: 23654

A combo of whitespace: nowrap and width:100% should do the trick

.column-overflow {
  max-width: 275px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Upvotes: 1

Related Questions