I have a web application which pulls information dynamically from a mysql table. All of the rows from a certain table are being dynamically inserted into a sortable datatable on the program. Unfortunately, the tables are in a bootstrap3 modal window. Bootstrap3 does not give an easy time of how to 'resize' the actual modal windows.... and it is further unfortunate that the standard modal windows are not big enough to actually fit all the information from the rows (based upon actual information in the table).
Therefore, my solution was to do: <div class='modal-dialog' style="width: calc(100% - 100px)";
However, what actually hit me, is this modal window may not necessarily need the -100px; or even -250px based upon the actual width of the text that is in the mysql table.
first | last | telephone | email | address | more...
----------------------------------------------------------------------------------------------
Jack | B | 1234567890| abcdefghighkelephant@gmail.com| 123 Nowhere, nowhere, tn | .............................................much more stuff over here
first | last | telephone | email | address | more...
-------------------------------------------------------
Bobby | Z | 1234567890| bob@gmail.com | Here St.| Nothing
My question is as follows:
Is there a way to have CSS WIDTH: calculated dynamically based upon what information is actually in the table?
That way I can avoid putting -100 / -250px to make a modal smaller, if indeed the 600px modal is big enough to fit the information? Or am I damned if I do and damned if I don't?
It matters how your data is returned. I would use Ajax and jquery ui. I would total the length of each element by looping through it and using $.length to calculate such. Once I got that total I would set the dialog width by doing width: totalwidth+padding+"px"