Skip to main content
P
pjbiocco10-Marble
10-Marble
October 31, 2022
Solved

How to prevent Custom widget resizing from Mashup Builder?

  • October 31, 2022
  • 1 reply
  • 3698 views

Hello! Currently I'm working on a custom widget that is supposed to take up the full width of the mashup it's contained in, but add certain amounts of scrolling. Unfortunately, default CSS values seems to have come into conflict. There are two parts that caused concern, one which is now solved.

I can get the desired visual results I want by editting the CSS the page directly post render on the web browser. The two divs below both need to have a css tag of width:100% to be functional. To do so on the parent was relatively easy using jquery's parent function on the name of my widget "widget-costestimatetile" in the afterRender function. However, when trying to set the css of "widget-costestimatetile" directly, as shown in the image below, a static width is appended, overriding this. I've used the step-through function in firefox debugging to confirm my suspicion that this was being over-written after the afterRender function was executed.

Upon further investigation we realized that this number is based on the width of the widget as sized in the mashup-builder. I assume that I may be able to fix this by using updateProperty, but this seems like a very inelegant solution. What would be a more proper way of preventing mashup-builder resizing?


pjbiocco_0-1667257453425.png

 

Best answer by VladimirRosu_116627

The containers are the default placeholders in the mashup, so if you would want to have 100% usage of the width of the page, you need to have a container placed in the root structure, that has nothing on the left/right of it. This would be container 19 here (and opposite, containers 22, 23, 24 and 25 will never be able to go full page width because they have components on their left or right - and you can't and should not override this behavior, as widgets should not get out of their container)

VladimirRosu_0-1669711143849.png

 

1 reply

V
VladimirRosu_11662719-Tanzanite
19-Tanzanite
November 1, 2022

Hi @pjbiocco,

First, happy to see a fellow widget coder!

  1. You say that your desire is that the widget should take the full width of the mashup it's contained in, but then you say "add certain amount of scrolling". I assume you refer to the fact you want to have internal scrolling. Based on what you said, I believe you also mean that you only want the width to be 100%, and have at the same time a specific height, right? Could you confirm if what I assume here is correct?
  2. Typically when we code a responsive widget (which enlarges fully based on its container), that will have both width and height set to 100%. It would be the task of the container it is placed in to enlarge itself. So, in your case I would code the widget with width and height 100% (in the renderHTML function), and just place it - alone -  in a horizontal container that stretches from left to the right of the page. The widget is responsive if you specify in the IDE.js widget properties one of these fields (don't remember which one exactly, but they trigger the display of the "responsive" icon in Mashup Builder)
     'isResizable': true,
 'supportsAutoResize': true,​

     

I think that what I wrote above should point in the right direction, but I'm not entirely certain, so please don't hesitate to let me know if that worked.

I also don't believe relying on post-render events would be the right choice (page could flicker after loaded etc).

    P
    pjbiocco10-MarbleAuthor
    10-Marble
    November 1, 2022

    Hey. I've realized that my post was quite unclear. I wrote it when I was very tired, haha. Looking back, scrolling isn't quite the correct word. A better way to describe it is that I'm attempting to support resizing. Your solution did fix the need to rely on post render specifically for the outer div, but the second div still is giving me trouble. Let me add some more details.

    Below I'm adding some images that describes the issue. On certain screen widths, I want the column to be two column, but on smaller sizes, I want it to be one column. This effect is something I've already written off of Thingworx, and have been able to recreate via firefox debugger.

    Intended effect.

    pjbiocco_0-1667312926381.png

    pjbiocco_1-1667313041176.png

    Current issue: White space on right side. On smaller window, the snap no longer happens. This is caused by the 2nd divs fixed width

    pjbiocco_2-1667313372169.png

    pjbiocco_3-1667313511404.png

     

     

     

    V
    VladimirRosu_11662719-Tanzanite
    19-Tanzanite
    November 2, 2022

    @pjbiocco ,

    Thank you for providing this detail.

    Now it is my turn to act as the devil's advocate and ask why exactly you've written off ThingWorx 😄

    I'm curious about this because I managed to obtain this effect with a classic Collection widget in 9.3.4

    You will note the cells do not expand to fit all the available screen size, that's because the FlowLayoutGravity is set to Center. If you set it to Expand they will expand according to their space (of course obeying the MashupWidth you set)

     

    (view in My Videos)

      Terms & ConditionsCookie settingsAccessibility statement