1

Plan:

I'm Creating one dashboard page which required one table which dynamically adds Row when user clicks Add Row Button.

Each Row Contains key Information like Item Name,Code, Item Description, Unit & Total price & remarks.

Problem:

There is Long String/Text is going to be added by admin/user in Item Description & Remarks Field but because of low space it's just not showing much of it or it's not readable, Same thing is happening with Start Date & Time. What things i can do instead of providing text area into table,(Note: Each Row has Different Item Description).

Work Around:

i clubbed some fields into one Table cell, For example Star & End Date, Item Code,Name.

I tried to Give Text area into Bootstrap Model but that layout id denied by the Users so need some other options i could try.

Here is Screenshot of Fields i'm creating.

Dashboard Page

Improve this question

4 Answers 4

Reset to default
1

I made another assumption. Here I used to place all the columns to be as rows and in this case, you will fill the fields vertically instead of horizontally. I don't know the circumstances of your work but I tried to make the solution so you will not have a problem when you display the data.enter image description here

Improve this answer
1
  • This is I think best solution so far, I discussed with development team, but according to them it creates the dilemma of should we really Focus on Usability or should we focus on code? from business pov, they won't invest their time into that.. So i came up with totally different solution, will update as another solution.
    – Dave Rajan
    May 9, 2019 at 5:58
0

Actually in such case when you have some splendid fields which need large input you need to make things clearer to differentiate right between rows and deal with every row as a different section. so to enhance readability and make the overall usage easy and usable. Check the attached image as I did it and try to reduce lines of the old table style. Best of luck![enter image description here]1

Improve this answer
2
  • It's very good idea, but problem i'm facing is overall app is using bootstap's "container" layout, not "Container-fluid", which one is like 60-70% of Full screen & Aligned in Center so High number of Fields is Getting Congested.
    – Dave Rajan
    May 8, 2019 at 12:48
  • I understood what you want to say! So since you have a problem in the width you need to deal with the overall thing in different way will publish another solution for you.
    – Khalil Hanna
    May 8, 2019 at 14:02
0

There is some dilemma between code quality/time & UX and development team decided to go for code, so i came up with different solution. i designed one prototype.

Video Link of Prototype

Demo Table
According to video, we are planning to use datatable and CRUD Editor, so User can add/edit/remove row from table, when user first select add row, it opens a modal popover, there he will insert all details, after submitting (forgot to add button sorry !), data should be added to table, same thing is going to happen with edit & remove button will remove the row.

Improve this answer
0

This solution is good so far but I have small comments which can enhance the usage of this table.

1- Make the description column to be the last column not in the middle.

2- If your actions can be applied on more than one row, try to take the actions column out to save space and use a button beside the Add and Remove button so when you make multiple row selection you can click the Actions button to apply the needed action.

Overall this works.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.