Height and width of div element getting set to zero randomly

[Theju112]

Hi All,

I am working on a hybrid mobile-app and one of the screens is having an issue where the height and width of a div element is being set to 0px causing the screen to not display as required.

Below is how the screen is expected to look like (last image):

proper display.JPG (26.35 KiB) Viewed 135308 times

The issue is with the grid like div element in the middle.
When this screen is displayed above as required, the height and width of this div is set to 500px and 358px respectievely. (middle image)

proper display props.JPG (18.18 KiB) Viewed 135365 times

However, the issue is that when this screen loads for the first time, the screen with the content-section div width and height set to 0 pixels. (first image)

incorrectdisplay.JPG (17.58 KiB) Viewed 135365 times

However if we select a different order (using the dropdown on the top), the screen is displayed correctly as required (with height and width set to appropriate pixel values) as the page is refreshed.

> What is the content-section div? I cant seem to find an element by this name in the designer. Is it a name assigned by Profound.
> What should I check to understand why the height and width is getting set to zero?

[Scott Klement]

'content-section' is a CSS class (not the name or id of an element) that is applied to the middle section of the mobile device layout widget.

I don't know anything about the height/width being set to zero. I haven't seen that before.

You say that selecting something from the dropdown fixes it. What does the dropdown do, under the covers? Does it do something that affects the screen layout?

[Theju112]

Hi Scott,

Thanks for responding so quickly.

The only action that is performed when the drop down changes the order number is

Code: Select all

pui.click("btnSubmit")

. This is done through the on-change property of the drop-down text box field.
What this does is, it simply returns the control to the RPG program and does an EXFMT on the same record format. I believe this has the same effect as simply reloading the page. I cant find out anything that would affect anything on the front-end side through this action.
Reloading the page seems to fix the issue somehow.

The one thing I should add is that the grid element I mentioned is displayed for a fraction of a second before it "disappears".

On some random occasions, the screen does display correctly on the first load itself.

I have tried to fix the issue by using the below code in the on-load property of the screen but, as you might note, its not a good fix at all.

Code: Select all

document.getElementsByClassName("content-section")[1].style.height = "500px";
document.getElementsByClassName("content-section")[1].style.width = "358px";

Its just a wild guess but would some random changes in the order in which js files are being loaded cause such behaviour?

[Scott Klement]

Within the product there's really only one js file in mobile -- runtime.js. So there's no issue with the order, unless you've added your own custom ones?

Hard to say what the cause might be. If you think this is a problem within the product, please create a bug report so that someone at Profound can look into it.

[Scott Klement]

I had a thought... it could be some sort of timing issue. Maybe the device wasn't ready to display the screen or something like that, so when the code ran, it saw the display size as 0 pixels?

Is this running in our Profound UI mobile app? Or are you creating your own with Cordova and HTML, etc? If you're creating your own, can we see your HTML and startup JavaScript code?

[Theju112]

Hi Scott,

Timing issue is the most probable reason as loading the screen a number of times solves this issue for the rest of the logged in session.

The app is created using phonegap and designer for the screens. I don't think we are using profound mobile

When you say start up code, can you please let me know which js and HTML file you are referring to?

Is it runtime.js?

Also we are using a custom css class for the main layout. Earlier, it was mobile-device-layout. We changed it to give the screen the ash and black theme in the screenshot. This was when the issue started happening.

But the custom css class is just a copy of mobile-device-layout with just the color codes changed. Not sure if this would impact any way.

Also for the moment, do you have any workarounds in your mind to solve this issue?

I mean the code I added in the on load property is not suitable because it's using hard coded pixel values.

Is there any other approach we can follow for now to assign the correct height and width without having to "hardcode" pixel values.

Thanks,
Thejwal

[Scott Klement]

Sorry, I have no idea what the problem is, so I can't offer any sort of workaround. I was hoping that if I saw the code of your project, I might notice something that would be helpful?

I don't need cordova.js or runtime.js -- these I'm already familiar with. What I need is the stuff that you wrote to create the app.. this is the stuff I haven't seen before.

In PhoneGap, you have a config.xml. Inside that there's a tag called <content> that points to the HTML file that starts the app -- this will be the start of your custom code to create the phonegap app. Inside that HTML, it will load cordova.js and runtime.js -- I don't need those, but normally there will be another script as well, the one that you custom wrote to create your app. In our examples, we refer to it as "app.js", but it can be called anything you wish, as long as your <script> tag points to it. This js file will typically be the one that starts up the app by calling something like pui.run() or pui.signon(). I'm hoping by seeing the way you've coded this, I something will jump out at me and help me understand what might be going wrong.

Does that make sense?

Its hard to say whether the custom CSS could be causing the problem? Are you doing something in it that might affect the height/width of the HTML tags, or something that might cause a change to the way tags are rendered?

[Theju112]

Hi Scott,

Thanks again for your detailed reply.

So, in the config.xml file in my project root, I have the below content tag:
<content src="index.html" />

So I guess it is the index.html file you want to check? I have placed the index.html file here along with other relevant code:

https://docs.google.com/document/d/13b5 ... sp=sharing

The index file loads a javascript file:
<script type="text/javascript" src="js/appLogin.js"></script>


I couldn't find pui.run or pui.signon in appLogin.js but this script controls the login authentication.

Once the login is successful, the next file displayed is drivermain.html. This html in-turn loads another javascript called AppMain.js. AppMain.js contains pui.run statement.

I have also included the CSS that we used instead of mobile-device-layout. The class is named mobile-mycompany.

As described, the behavior is random which gives the impression that the issue is related to delay in device being ready before the rendering as you mentioned earlier and not really related to the custom css we added.

Thanks again for your time to look into this. Kindly let me know if you need more details.

Also, I have replaced some url's / codes etc. with xxx for the sake of privacy.

[Scott Klement]

I skimmed over your code and didn't see any obvious problems.

I would suggest opening a support ticket with Profound Logic. This is advanced code! I suspect an expert is going to need to run it, reproduce the problem, and troubleshoot it in a debugger. I don't think there's any easy or obvious problems.

Create a support ticket by e-mailing support@profoundlogic.com

[matt.denninghoff]

I investigated this and found a solution. Basically, this is a timing issue where CSS rules for the mobile layout are not loaded before Profound's rendering code runs; so, the layout container's width and height are set to 0px.

Here's the solution:

Instead of copying Profound's layout rules into some custom CSS, use two _css class_ values, Profound's "mobile-device-layout" and your own (e.g. "my-mobile-layout").

Your mobile layout CSS simply needs to override Profound's styling with whatever you want. With the two _css class_ values set, Profound's CSS code will be ready when the layout sizing code runs, so that rendering works correctly. Then, because your CSS stylesheet will load later (and also because the CSS selectors will be more specific), your style rules will override Profound's CSS, and you can get the style you want.

See this documentation page for some sample CSS: https://docs.profoundlogic.com/x/PwCI

(The "mobile-device-layout" rules are loaded before the screen renders for the first time, because those rules are in profoundui.css, which loads before the screen renders. Files loaded via "external css" may be loaded 500ms or more after the screen renders, when it's too late to calculate layout width and height.)