app-generator / flask-datta-able

Datta Able - Open-Source Flask Dashboard | AppSeed
https://appseed.us/product/datta-able/flask/
Other
240 stars 123 forks source link

Table width can't adjust #16

Closed blacksmith289 closed 2 weeks ago

blacksmith289 commented 2 weeks ago

The table templates width can't be adjusted, went through the style.css file but couldn't get a clue where to fix the issue.

How it was discovered: In my case, at the tbl_bootstrap.html file, trying to adjust the following cell's width <th>First Name</th> and the cell below <td>Mark</td> by adding attribute width = "500px" to <th>First Name</th> won't change the width. Furthermore, if the cell <td>Mark</td> is filled with a very long text, due to the width will auto increase with the text length, the long text won't switch line, and reamains in one sentence all across the table.

Attempts:

  1. Adding style directly at target's web page, but it won't overwrite the current style, the width won't adjust
  2. Removing the "table" attribute in the class in <table class="table table-hover"> the table will start to react to customized styles, but also means that bootstrap styles won't be implemented to the table.

At first I though it was my coding error when using the template, but when testing sample website on the official web, the table won't adjust either, any way to fix this?

app-generator commented 2 weeks ago

Hello @blacksmith289

Can you upload an image to highlight the problem, just to help us understand what adjust means

For 1-1 support join our Discord: https://discord.gg/fZC6hup Thank you!

blacksmith289 commented 2 weeks ago

I figured, out, the main reason causing context in rows won't switch line is because in the style.css file,

.table th {
  border-top: 1px solid #eaeaea;
  white-space: nowrap;
  padding: 1.05rem 0.75rem;
}

the white-space: nowrap; attribute will cause the problem mentioned above. To resolve this issue, can start with this attribute.