Hello,
I am new to Outsystems, and I would like to adjust my table's width to fit in the screen. Currently, my table looks like:
I tried messing around with the css of the table and adjusting the width of the table and each individual column. However, none of this worked. I also cant remove any columns as it is all necessary. Is there any other way to shrink the table or maybe move it to the left where there is empty space? Any suggestions? Thank you!
@Low Ding En For easy fix , put your table inside a container(div) and add a class name (e.g. tableFix ) to that container and add the below css , it will give you a scroll
.tableFix{
max-width:100%;
overflow:auto;
}
Hello @Naveen N ,
This works great. But ideally I want to see the entire table without having to scroll for better user experience. But this works well if there arent any options to do that. Thank you!
@Low Ding En try td{word-break: break-all; } or td{word-break: break-word;; } If you attach your oml, it will be easy to give you the solution.
Adjusting the cell padding was enough to solve the issue that I am facing. Thank again for all your suggestions!
@Low Ding En Have a great day !!
Sorry for this situation @Low Ding En
It seems Naveen suggested an easier approach for your issue. If you can share me your app URL or the saved HTML file of your web page, I can suggested optimizing it further.
For such wider tables, I recommend cell padding to be a bit smaller.
You can easily claim left side menu area to utilize your page width better. Have you considered:
You can apply some CSS properties based on your screen widths (like header row text rotation) may be required only for smaller screens.
Following most of these suggestions, you may not need a horizontal scrollbar at the bottom.
Hi Low Ding En,
Ideally it should be all fit within the container's width, if the contents are good to fit within.
You can add below css on this table to make it force-fit for the width. Add my-custom-table class in your table
table.my-custom-table { table-layout: fixed; white-space: pre-wrap; word-break: break-word;}
Then adjust the padding on all the cells (using css) as required to shrink them further.
The left area you're trying is kept for the side menu. Just remove the side menu if you don't have it.
Hello Ravi,
After using the css, my table looks like :
Am I doing something wrong?
Also, how do i remove the side menu? Im looking at the layout for my screen and cant seem to find it. Thanks for your help!
Thank you so much for your suggestions! Especially the one with padding and right aligning numbers!
Is it possible for you to provide me the steps to claim left side menu area? Thank you so much!
I won't be able to suggest much regarding left side menu without looking at your application.
Do you have a custom theme applied? Send me a sample oml file that shows your side menu area (or just share URL of your app in comment or personal message). I'll be able to suggest how to make that area usable.
Hello @Ravi Punjwani ,
Your suggestion on the cell padding helped solved my issue so this wouldnt be necessary anymore, thank you so much for your help and assistance. I appreciate it!