Dialog footer and title width

[hoseyjoe]

The Dialog base is

 public override function validateComponentLayout():Bool {
        var b = super.validateComponentLayout();
        dialogTitle.width = this.layout.innerWidth;
        if (_autoSizeDialog == false) {
            var offset = this.layout.paddingLeft + this.layout.paddingRight;
            if (dialogContent.width != this.width - offset) {
                dialogContent.width = this.width - offset;
            }
            if (dialogFooterContainer.width != this.width - offset) {
                dialogFooterContainer.width = this.width - offset;
            }
        }
        
        return b;
    }

This will display dialog with bottom right buttons covering the border like

Adjusting validateComponentLayout to

public override function validateComponentLayout():Bool {
        var b = super.validateComponentLayout();
        dialogTitle.width = this.layout.innerWidth;
        if (_autoSizeDialog == false) {
            var offset = this.layout.paddingLeft + this.layout.paddingRight;
            **dialogTitle.width = this.layout.innerWidth - offset;**
            if (dialogContent.width != this.width - offset) {
                dialogContent.width = this.width - offset;
            }
            if (dialogFooterContainer.width != **this.layout.innerWidth** - offset) {
                dialogFooterContainer.width = **this.layout.innerWidth** - offset;
            }
        }
        
        return b;
    }

I put ** around changes.
It Fixes the issue

I dont think that is the right fix? Let me know if you need a sample project. Kinda between things so I dont have time while I maing ticket

[ianharrigan]

The buttons/title here look tiny, is that intentional?

[hoseyjoe]

It was default, I thought. I'll check. Maybe that is causing the issue

[ianharrigan]

Certainly looks like padding (or something) is massively smaller, that said, i dont think it should behave the way it does anyway - do you have the test app to play with?

[hoseyjoe]

In truth I forgot where this came from. I'm digging and will make test app

[hoseyjoe]

So I found the problem???

There is a table with custom itemrenderer called MyMenuItem and has a MyMenuItem.xml. In it is

<style>
        .titleWPad{
            padding-left:10px;
        }
        MyMenuItem{
            padding:1px;
        }        
    </style>

The MyMenuItem renderer has a button that opens the dialog. Removing MyMenuItem from css and clicking the button results in:

Im not sure how MyMenuItem css is screwing up the dialog but removing it fixes it

[ianharrigan]

Interesting, i thought i removed "node matching" - though im not sure i did, but if i did (or didnt) its doing something... its almost like its matching everything

[ianharrigan]

its defo matching everything: http://haxeui.org/builder/?oopviy

That is totally wrong - nice find!

[ianharrigan]

OK, so the "node based css matching everything" bug is gone - in fact, ive reintroduced node based css matching, and improved the performance (which is why i removed it in the first place). However, i still think this issue should be left open as the dialog should still look right, even if you remove all the padding.

[hoseyjoe]

This is working as expected. Close on your dime

[ianharrigan]

Yeah, im going to leave this open as the dialog looking weird when padding=0 is still there.