I have a simple Bootstrap table with 5 columns and 7 rows. First row contains header. First column of all remaining 7 rows contains a fixed text and column 2 to 5 are text boxes to received some input. All nicely formatted (border, colours etc) and looks OK on the desktop screen but obviously it does not work on the mobile phone screen.
Therefore, I changed the table to responsive . I have used various columns width e.g. col-lg, col-md, col-xs etc. All looks OK on a desktop screen. On the mobile phone screen the required horizontal scroll bar appears but when I scroll to the extreme right my NavBar is NOT stretched to the width of the container i.e. it does not look nice that the NavBar is restricted to the width of the mobile phone screen but the table below is wider than the NavBar. I do not wish to include the NavBar in the container as that leaves spaces on either side of the NavBar. Is there any way I could stretch the NavBar to be the same width as the table in the container below?
On the other hand ideally what I need is a way to convert columns to rows as follows:
When the user first starts, the screen will show fixed text from column 1 (i.e. 7 clickable rows of fixed text). e.g.
Text 01 Text 02 Text 03 Text 04 Text 05 Text 06 Text 07
So when the user clicks on a row (above i.e. Text 01 to Text 07) then the area below the clicked row will expand and the input textboxes for example for Text 01 will show as follows:
Column 01: Textbox01 Column 02: Textbox02 Column 03: Textbox03 Column 04: Textbox04 Column 05: Textbox05
User will enter input in the textboxes above and will then click the next row and so on and will finally click the "Save" button to save data from all text boxes of 7 rows (5 columns) into the database.
I would really appreciate if someone can direct me to some example code please?