61544 - WebUIControl.WebStyle.value("width") changes wrong div

Targets Web
1

The LR has this code:

Var currentWidth As Integer = Rectangle1.Style.Value("width").ToInteger
currentWidth = currentWidth + 600
Rectangle1.Style.Value("width") = currentWidth.ToString + "px"

The attached project shows that with a WebButton, this fails.

If you look at the HTML/CSS, you can see the problem is that the CSS is being changed on the button object but not the parent’s parent div where the width is actually determined

<https://xojo.com/issue/61544>

Edit: it also fails with a WebRectangle too:

rectangle1.Style.Value("width") // returns the empty string ""

2

Looking at the button code:

<div id="Wg0zEQ" class="XojoButton" style="left: 42px; top: 64px; width: 194px; height: 38px; position: absolute;">
    <div class="btn-group" style="width: 100%;">
        <button id="Wg0zEQ_button" class="btn btn-light text-nowrap text-truncate" type="button" tabindex="2" style="height: 100%; width: 100%;">Add 50px to my width</button>
    </div>
</div>

It seems that Xojo is already planning to use bootstrap button groups. One option is to change buttons to only be buttons and then add button groups later as a separate control. What I mean is that the above code could work as a single button like this:

<div id="Wg0zEQ" class="XojoButton" style="left: 42px; top: 64px;  position: absolute;">
    <button id="Wg0zEQ_button" class="btn btn-light text-truncate" type="button" tabindex="2" style="width: 194px; height: 38px;">Add 50px to my width</button>
</div>

and because the width: 194px is in the button id definition and not in the div id, then your code should work. I understand this will be a big change for buttons.

Having ‘width’ defined in 3 places for a single control is strange.

=====
It looks like the second div (btn-group) has other purposes too, it limits the height of the button to the default height, without it then we could create buttons with a height different than 38px.

I understand this is a design decision and will not change, but I don’t understand why you need to limit the height of the buttons.

=====
Tested changing .Top for the button and that works, so Xojo can get rid of the style width and height for the button id and just change the width value on the div id class XojoButton. Height change is not needed because it will always be the default height for buttons (as explained by the div btn-group)