CODEWITHSUNDEEP
apache-flexactionscriptflex4flex3flexbuilder
paperclip
paperclip

Reputation: 660

Extra Pixels In Button Width

<s:Button id="btn1" label="1" width="18" includeInLayout="true" visible="true" click="onSmallBtnClick();" />
<s:Button id ="btn2" label="2" width="18" includeInLayout="true" visible="true" click="onSmallBtnClick();" />
<s:Button id ="btn3" label="3" width="18" includeInLayout="true" visible="true" click="onSmallBtnClick();" />
<s:Button id="bigButton" label="bigButton" width="72" includeInLayout="false" visible="false" />

private function onSmallBtnClick():void {
    hideBtn(btn1);
    hideBtn(btn2);
    hideBtn(btn3);
    showBtn(bigButton);
}

private function showBtn(button:Button):void {
    button.visible = true;
    button.includeInLayout = true;
}

private function hideBtn(button:Button):void {
    button.visible = false;
    button.includeInLayout = false;
}

Hi all, in the Flex code above, I have 4 four buttons on my interface. The interface should begin with small buttons 1,2,3 visible and the bigButton invisible. When either of the small buttons are clicked, the bigButton appears in place of the 3 small buttons. The widths of the small buttons are set at 18, while the bigButton width is set at 72.

My question is, shouldn't the width of the bigButton be 54, as 18x3 = 54? Or is there some padding within the buttons that I should know of? In this live docs page, it says..

By default, Flex stretches the Button control width to fit the size of its label, any icon, plus 6 pixels of padding around the icon. You can override this default width by explicitly setting the width property of the Button control to a specific value or to a percentage of its parent container. If you specify a percentage value, the button resizes between its minimum and maximum widths as the size of its parent container changes.

Could this be the problem? Since I have 3 buttons and the padding around the icons take up 6x3 = 18 pixels. The buttons don't seem to have any gap between them. So I am curious to know where does the extra 18 pixels come from.

Thanks.

Upvotes: 0

Views: 134

Answers (1)

user1875642
user1875642

Reputation: 1313

As soon as I don't see any x or left things set for buttons, I guess you use something like HGroup or any other container with HorizontalLayout. It has a property named gap, and this property is 6 by default. But it will not add 18px, it will add 12px...

Try to set minWidth to 0 for all buttons.

Upvotes: 1

Related Questions