如何根据mysql的动态信息设置css的宽度

Question

Background

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.

Example 1 - Necessary Wide Modal

 first | last | telephone | email                         | address                    | more...
 ----------------------------------------------------------------------------------------------
 Jack  |  B   | 1234567890| [e-mail]| 123 Nowhere, nowhere, tn  | .............................................much more stuff over here

VERSUS Example 2 - Small Modal Window (able to fit in standard 600px)

 first   | last | telephone | email         | address | more...
 -------------------------------------------------------
  Bobby  |  Z   | 1234567890| [e-mail] | 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?

Answer 1

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"