Listbox contents line up ok in IDE but not when deployed in browser

Cloud listbox contents line up ok in IDE but not when deployed in browser. How do I fix it?

I would like to see this…could you post a link to the app?

Can you share an image and if it looks the same in all browsers or change depending on browser?

Link to deployed site is: http://104.248.52.28/BPLLC-Dev/

To get past my app’s login page, enter D, L, B in the boxes.

Don’t know how to attach an image/screenshot to this conversation to show differences.

The problem appears on the “Acres” tab.

The listbox in the Acres tab has a WebStyle applied to it that sets the Font Size to 10px.

Looks fine in the IDE, but not when deployed in the browser.

What version of Xojo are you using? I did a quick test, changing the content style to 10px and header to red and 16px and it looks ok:

I’m using the Cloud version. 2019R1.

Alberto … how did you put your graphic into your last post? I’ll show you my differences once I know how to embed screenshots. Thanks!

I use imgbb.com service, after uploading an image, I copy the URL and paste in the forum between [IMG] [/IMG] tags.

For some reason, that listbox has different width for each element in header and content (header 83, content 78). I’m no expert on webapps so I don’t know what you can do, sorry.

Well, I was able to replicate your problem, I think is a bug with Xojo:

maybe someone can help you with a workaround.

I’m just changing Visible to False, then to True to see the wrong alignment, then I reload the page to see it right again.

This is the code difference after Visible False->True:
Before hiding

After hiding and make visible again

I was able to remove the extra code (padding-left and padding-right) with Safari Developers Tools and the listbox returned to original values.

Maybe someone know a ‘trick’ to remove the extra padding automatically?

I don’t think this is exclusive to Xojo Cloud, maybe you want to move the post to Web forum, that way more people will see this topic and help out on ways to fix this issue.

David - could you please create a Feedback report about this so that we can look into it?

You can download Feedback here:
https://www.xojo.com/download/extras.php

I think you’re right Alberto. I will move it over.

It is a known bug (at least the hide/show that I posted): feedback://showreport?report_id=44591

There is a workaround, set the column width to a set pixel size. There is an example on that case.

Edit: it looks like when you set the column width then padding-left/padding-right is not added after Visible False/True
Edit2: added a comment to that case

@David Bolen I think you are not using Visible False/True, you are using code related to:
Examples/Web/Containers/TabPanelExample
right?

It looks like the issue there is worse, you don’t need to use Visible at all, just by putting the listbox in a TabPanel, then padding-left: 0px; padding-right: 0px; is added automatically to both the header and the content of the listbox (the Visible False/True only add the padding to the content and not the header).

@Jason Parsley do you want me to add another case exclusively about this issue (listbox in TabPanel) and a sample?

Alberto - it would be great if you would do that. Thank you.

feedback://showreport?report_id=55779

Thanks guys! Alberto’s work-around did the trick (set column widths to desired pixels). I won’t create a feedback case since it looks like Alberto already did it. Thanks again. It is greatly appreciated!