Table help on hub

295
6
Jump to solution
08-14-2019 06:57 PM
BenjaminMittler
Occasional Contributor III

I have a table on my hub that i'm having issues with. The table is 1 row x 8 columns, it displays correctly on my desktop but it seems to be the only thing that is preventing the hub from looking good on my phone. The table does not wrap and ends up sticking out way beyond the rest of my content. 

Anyone have any suggestions for this?

Tried a few html wrap options but none worked. 

Thanks!

0 Kudos
1 Solution

Accepted Solutions
RobertCollins
New Contributor II

How frustrating... You could try to 2 separate table blocks 1 x 4 and then another 1 x 4 below. 

Alternatively, I may recommend trying the site on a different mobile device and then a different browser? If the issue remains throughout I recommend getting in touch with Technical Support as it may well be an issue other user's are experiencing. 

I reckon I would just witness the same thing as you're explaining if I took a look. May I recommend this link (Calcite Bootstrap) it will take you over to the bootstrap HTML / CSS component for creating tables. It might be worth adding in the table via this method to see if you have any luck. 

Looking forward to hearing how you get on. 

View solution in original post

0 Kudos
6 Replies
RobertCollins
New Contributor II

Hi Ben,

Would love to offer some advice where I can. Does the table look good / display correctly at a lower number of columns?

By going into the Row Settings, on the right hand side of the holding box for the Text Layout, are you able to update this Row to be Wide and not Box layout? Does this offer any improvements?

Best of luck!

0 Kudos
BenjaminMittler
Occasional Contributor III

I switched it from a 1 row x 8 column to a 2 row x 4 column and it still overruns the page on mobile. Also changed from box to wide and that didnt help. Can you send me a message so i can send you a link to my hub?

0 Kudos
RobertCollins
New Contributor II

How frustrating... You could try to 2 separate table blocks 1 x 4 and then another 1 x 4 below. 

Alternatively, I may recommend trying the site on a different mobile device and then a different browser? If the issue remains throughout I recommend getting in touch with Technical Support as it may well be an issue other user's are experiencing. 

I reckon I would just witness the same thing as you're explaining if I took a look. May I recommend this link (Calcite Bootstrap) it will take you over to the bootstrap HTML / CSS component for creating tables. It might be worth adding in the table via this method to see if you have any luck. 

Looking forward to hearing how you get on. 

0 Kudos
GrahamHudgins
Esri Regular Contributor

We will look into this. For now, wrap your table in a div with this style attribute to enable horizontal scrolling. Put this before your table tag

<div style="overflow-x:auto;">

Don't forget to close it off with </div> after your </table> tag.

BenjaminMittler
Occasional Contributor III

Robert, I didn't know the Calcite Bootstrap existed or was a thing I could use with hub. I ended up replacing my table with the nav pills, thank you very much!

RobertCollins
New Contributor II

Great to hear!

It can be frustrating when something like this doesn't work as expected. Glad you've been able to find a workaround. Definitely one to bookmark for use in the future. I was unaware of it's existence not long ago!

0 Kudos