rubanraj54 / vue-bootstrap4-table

Advanced table based on Vue 2 and Bootstrap 4 ⚡️
MIT License
220 stars 58 forks source link

Action button out of view with wide column #27

Closed pordonez closed 5 years ago

pordonez commented 5 years ago

Hi,

Not sure if anything can be done about this but I noticed that the action button(s) can become out of view with wide columns. I reproduced the issue with your code pen. Notice that the Download button is out of view.

Screen Shot 2019-03-18 at 10 19 45 PM

Please let me know your thoughts on this behavior.

Kindly, Peter

rubanraj54 commented 5 years ago

Hi @pordonez,

I also faced this issue a few months back.

I had only two options,

Option 1 Let the user scroll left to find the action buttons, I know this is an ugly option.

Screenshot from 2019-03-19 21-22-57

Option 2 Apply your custom class to all <td> with style "word-break: break-all;" (you can use row-classes, I hope you know how to use it) which breaks the long word into multiple lines, and now the action buttons will always be visible to the user.

Screenshot from 2019-03-19 21-29-51

New idea (Just now I thought of this)

I can provide an empty row at the top as a slot so that users can render whatever they want and place buttons wherever they like. What do you think about this feature?

Cheers, Ruby.

pordonez commented 5 years ago

Super! I'll try option 2 for now, and consider modifying the empty row when/if that feature becomes available. Thank you, Peter

rubanraj54 commented 5 years ago

You're welcome @pordonez .

I updated my comment above FYI.

And I hope, you know to add your custom class to cells.

Cheers, Ruby.