Erratic behaviour of column and table widths for list (v2024)

PHPMaker General Discussion (PHPMaker)
1

No matter what I do I can’t make the table width of a list smaller than about 40% of my desktop screen. It is a 3 column table and the columns are not very wide (the column titles are wider than the content in all cases and the titles are “Username” (Varchar 5), “Account Balance” (double 19 though data never more than “-dddd.dd”) and “Activated” (varchar 1). Full disclosure: I understand most principles of CSS but I am a total amateur re syntax and details.

I have searched here and elsewhere and gotten numerous ideas. Here’s what I’ve tried:

  1. Field defs: for each field I have tried a) setting the field max-width: 100px !important; (and tried width, without !important, 100, etc. Most of the time the entries had no effect but when they did there were side effect that made it very hard to figure out what the rendering algorithm does.
  2. I tried to put the css in HTML | Styles | User but I don’t think I got the name right or the syntax.
  3. I tried to put it in Row_Rendered as follows:
if (CurrentPageID() == "list") {

  $this->_Username->CellCssStyle = "width: 100px !important;";

  $this->Account_Balance->CellCssStyle = "width: 100px !important;";

  $this->Activated->CellCssStyle = "width: 100px !important;";

}

My third method (Row_Rendered) was the ONLY one that seemed to give me some control. The problem is that the minimum TABLE width was still stuck at about 40% of the screen. Any of the fields could be considerably smaller (down to 100px or so) but only if the other fields were big enough to fill the 40%. Also, for some bizarre reason, when I use the above, it LEFT justifies the second column (numeric)!!! In every other case, the numerics are right justified and the texts left.

One thing I’m certain is relevant is that I am on 2024.16.

Haven’t even considered looking at this from a mobile device yet and I’m sure that will be a whole new exercise in head scratching.

I’m no dummy (though I have very little CSS experience). The documentation is no help so I am begging someone here to help me.

Keith

2

You may Inspect HTML element and add your own CSS styles.

3

Yes, I know I could do that but to be honest I’m not even confident that will work. When I overrode CSS in Row_Rendered, the CSS did not work. I suspect Bootstrap is also messing with it. Is overriding in HTML ‘lower level’ and more likely to be effective?

Also, why are we given the width settings for list view fields if it is not really used (at least certainly not in my case).

Finally, freaky that the number became left justified, though on my mobile (I have since checked) it is still right justified!

4

You may want to read the notes for the Row_Rendered server event.

5

Some good ideas, Arbei. Thank you very much. Your guidance has led me to an acceptable solution for this case and a bit more understanding. I suspect this is complicated by Bootstrap is constraining me. Time to upgrade I guess!