Jump to content

Idea: table column width as % instead of pixels

Fenryr

By Fenryr
in Closed Feedback Items

 Share

Recommended Posts

Fenryr

Fenryr

Posted
Posted

It's all in the title. I've seen it used on at least one other forum, so you can set your table column sizes in either pixels or as a percentile of the screen size (eg. 1st column 50%, 2nd and 3rd column 25 % each). This could solve some mobile issues, maybe. Just trying to give my 2 cents without really knowing if it's doable on this site.

Link to comment
Share on other sites
bwatford

bwatford

Posted
Posted
15 minutes ago, Fenryr said:

It's all in the title. I've seen it used on at least one other forum, so you can set your table column sizes in either pixels or as a percentile of the screen size (eg. 1st column 50%, 2nd and 3rd column 25 % each). This could solve some mobile issues, maybe. Just trying to give my 2 cents without really knowing if it's doable on this site.

 

You can do this, Ctrl-right click inside a table in the editor and choose Table Properties.  There you can set the table width to a pixels or percentage, control the border, etc.

Same inside cells, Ctrl-right click and choose cell properties.

Link to comment
Share on other sites
bwatford

bwatford

Posted
Posted
On 7/17/2022 at 7:46 AM, Scarecrow71 said:

I've brought this up already, and it's been agreed that the context menu needs an update to state percentage.  It's rather misleading that the default is in pixels, and everyone has to try to figure it out.

 

Playing with tables recently for the item card templates led me to the realization that having percentage over pixels is not going to work either.

 

While doing the cards I initially set them up at 25% so we could fit 4 across which looks fine on desktop, definitely did not work on mobile because 25% of a mobile in portrait mode is very tiny and as everything inside the table is not resized leads to a very broken display. Even at 50% the contents inside the table were all messed up on mobile in portrait.

 

That said, had to go with a hard 300px for table size so it would look good on desktop and be full screen on mobile in portrait mode.

 

Bottom line, the % may not work either as a standalone option. But I do normally set my tables to 100% which I think should be the default.  Right now, it defaults to 500px which breaks tables on mobile out of the gate.

Link to comment
Share on other sites
PigLickJF

PigLickJF

Posted
Posted

I've found that if you go into the source and just remove the size/percentages completely, it "smartly" auto-adjusts the column widths based on the content, and although I haven't tested it extensively on different sizes/resolutions, it seems to work pretty well. Of course that may or may not be desirable depending on what you're trying to do, but for what I was doing with it I really liked the way it works.

 

As far as a default setting though, I don't know if a "blank" size would be desirable (if it's even possible) because people typically expect column widths to be fixed in a table.

Link to comment
Share on other sites
Ryfte

Ryfte

Posted
Posted

Unless you have different CSS builds based on media sizes (i.e. phone, tablet, desktop (1k / 2k / 4k / 8k), etc.) this will never actually display in any layout you generate and actually "look" like said layout. There is no "one-size fits all" that actually works.

 

You can get something to where its workable but if it looks good on your 1k desktop you have to inherently understand that it will, 99.9% of the time look like garbage on a phone. If functionality is all that matters then build for the phone and let it look like garbage on a desktop, lol. 😄

 

Otherwise I'd say create different media stylesheets as a solution. Let the server side / page render strip out and / or standardize certain aspects of the page based on what you want to do. This works well but requires a lot of extra work. *shrug*

Link to comment
Share on other sites
bwatford

bwatford

Posted
Posted

@Ryfte those stylesheets already exist, and they do what they can.  But if a cell or table is hardcoded to 500px then it will break mobile display every time.  But you are correct, there are no 100% formulas for mobile and tables to get along. Tables simply do not present worth crap on mobile.

Link to comment
Share on other sites
Ryfte

Ryfte

Posted
Posted (edited)

I've had some success with using Bootstrap 5 just using div tags. In fact, I just rewrote a few pages of old code someone had written yesterday (the old code had been written using tables for their layout, instead of just data) with that. The code is much more complex as its a bunch of nested divs but it is substantially more flexible layout wise. No idea if that's of any use for you or not.

Edited by Ryfte (see edit history)
Link to comment
Share on other sites
Ryfte

Ryfte

Posted
Posted (edited)

UPDATE: Okay, I had an idea and decided to try it out. Its not perfect of course but it is a more flexible solution that works pretty well for desktop / tablet / phones. It is less convenient to build out but once a template is done it should be fine...

 

If you float a table that is 1 column and X rows (where X is the number of rows you need) and you look at it on desktop vs. phone, it does in fact "degrade" graciously.

 

Example:

 

STR : 12 (+1)
Save +1
Athletics +1
 
DEX : 16 (+3)
Save +3
Acrobatics +3
Stealth +3
CON : 14 (+2)
Save +2
 
 
STR : 12 (+1)
Save +1
Athletics +1
 

WIS: 14 (+2)

Save +3
Acrobatics +3
Stealth +3

CHA: 08 (-1)

Save +2
 
 
STR : 12 (+1)
Save +1
Athletics +1
 
DEX : 16 (+3)
Save +3
Acrobatics +3
Stealth +3
CON : 14 (+2)
Save +2
 
 
STR : 12 (+1)
Save +1
Athletics +1
 

WIS: 14 (+2)

Save +3
Acrobatics +3
Stealth +3

CHA: 08 (-1)

Save +2
 
 

 

 

 

 

 

 

To be fair this is a very small sample but if you look at the preview it is MUCH better than a single table with columns set to any widths. *shrug*

 

I'll be extrapolating this idea to a full sheet workup and see how it turns out. 😉

 

 

EDIT: Question, is there a list of what styles / css are actually included in BALDR? That we can in fact use? Depending on the volume of HTML / CSS tags we've got access to this might not be too difficult. 😄

Edited by Ryfte (see edit history)
Link to comment
Share on other sites
Ryfte

Ryfte

Posted
Posted (edited)

Oh man, no one said you can add an inline <style></style> CSS block and it would work!!! Heh... okay, now we're talking! 😄

 

I still wish the source button would just flip the default input window to source input but beggars can't be choosers, lol. Even if it wasn't that horrible faded gray in a popup it would be worlds better. 😉

 

Sigh, nevermind... the preview works with it but the save strips it right out. So much for that. Guess its inline repetitive single element styling after all. 😞

Edited by Ryfte (see edit history)
Link to comment
Share on other sites
Eric

Eric

Posted
Posted

Yeah, no inline style blocks because security holes and yadda yadda yadda. If it's something that really adds value for everyone, we can incorporate it into the editor plugins and deliver consistently across all themes.

 

We can probably do something about the source mode dialog styling, though, to make it less visually blech.

Link to comment
Share on other sites
Ryfte

Ryfte

Posted
Posted
12 minutes ago, Eric said:

We can probably do something about the source mode dialog styling, though, to make it less visually blech.

That would be a wonderful small change that had a huge impact. Simply shifting the background color a shade in any direction would make it 100% more readable, lol.

Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...