0
votes

I am writing a plugin for wordpress and use a table layout in the widget wrapper to display rankings and game schedules. One row with all the information given uses about 1000px in width. For the widget with a width of 260px or 360px I want to omit less important information to display the most important information in one row. Because of the interchangeable themes in wordpress I don't know how wide the widget in the wordpress actually will be.
Half page widgets and narrow widget are example on my current theme. Depending on the width available I want to display more or less columns to fill the row. My idea is to first set the table width to the innerWidth of the wrapping div. neokio writes here that I can do this with something like

$('#object').width($('#object').parent().width());

Secondly it is my goal to display certain columns per row, depending on how wide the the row is. My planned way to accomplish this is by sending the table width as a parameter to the javascript function that decides which columns to display or hide.

My questions:

  • Is there a better way to do this in wordpress?
  • Maybe someone has already solved this before... but I didn't find it..
  • What is the best practice to nest the above jQuery in my code?

All my code can be found on github.

2

2 Answers

0
votes

Correct me if I'm wrong, but won't width: 100%; in CSS do what you're trying to do? It should always take the width of the parent element.

table{
   width: 100%;
}

I feel like I'm missing some relevant information here.

0
votes

I wouldn't use JavaScript for this but CSS. I.E. assigning 'display: block' the child would ensure that it takes the full width available, so the width of the parent