MXML: ширина поля со списком больше родительской ширины - PullRequest
Новая
       9

MXML: ширина поля со списком больше родительской ширины

3 голосов
/ 02 декабря 2009

У меня есть выпадающий список с шириной 100%. Однако, когда один из его элементов становится больше, выпадающий список также увеличивается, создавая полосы прокрутки и другие уродства в моем приложении! Как сохранить комбо-бокс, содержащийся в его родительском элементе?
Примечание: все в порядке, если выпадающий список больше, пока закрытый выпадающий список остается меньше.

Пример: 

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
<!-- I'm using a Canvas instead of a VBox because the VBox spaces the elements too far appart -->
    <mx:HBox id="tagsHBox" width="{formsHBox.width - 16}" x="8" y="8">
        <!-- This label should align with the labels in the left form -->
        <mx:Label text="Tags" id="tabLabel" width="{titleTxt.x + 4}" textAlign="right" />
        <!-- This textbox should spread accross both forms, that's why it's in a seperate HBox -->
        <mx:TextInput height="20" width="100%" />
    </mx:HBox>

    <mx:HBox id="formsHBox" x="8" y="{8 + tagsHBox.height}" width="{this.width-16}">

        <mx:Form id="leftForm" width="50%">
            <!-- Personal details -->
            <mx:FormHeading label="Personal Details" width="100%" />
            <mx:FormItem label="First name" width="100%">
                <mx:TextInput text="{person.firstName}" width="100%"/>
            </mx:FormItem>
            <mx:FormItem label="Last name" width="100%">
                <mx:TextInput text="{person.lastName}" width="100%"/>
            </mx:FormItem>
            <!-- And 15 more formItems :) -->
        </mx:Form>

        <mx:Form id="rightForm" width="50%">
            <!-- Address -->
            <mx:FormHeading label="Address" width="100%" />
            <mx:FormItem label="Street" width="100%">
                <mx:TextInput text="{person.address.street}" width="100%"/>
            </mx:FormItem>
            <mx:FormItem label="City" width="100%">
                <mx:TextInput text="{person.address.city}" width="100%"/>
            </mx:FormItem>

            <mx:FormItem label="Country" width="100%">

                <!-- This combobox right here is the troublemaker. There's a
                     country named 'South Georgia and the South Sandwich
                     Islands' consising of a few small islands in the southern
                     pacific and a name which is too long for my innocent
                     unsuspecting combobox --> 
                <form:ComboBox id="countryCombo" height="20" width="100%"  
                        dataProvider="{model.systemDataModel.countries}" />
            </mx:FormItem>
            <!-- And 15 more formItems :) -->
        </mx:Form>
    </mx:HBox>
</mx:Canvas>

Ответы [ 3 ]

3 голосов
/ 03 декабря 2009

Вы можете использовать вместо minWidth. Установите его на ноль или другое низкое значение. Я знаю, что он работает с контейнерами, такими как HBox и VBox, чтобы они перестали расти больше, чем их родительский контейнер, поэтому он может работать и с ComboBox. По сути, происходит то, что minWidth = "0" переопределяет measureMinWidth, которое является значением, которое родительский контейнер обычно учитывает как минимально возможный размер, и может быть больше, чем собственные границы контейнера.

2 голосов
/ 02 ноября 2012

У меня была такая же проблема, и я легко ее решаю. У меня был компонент comboBox для страны и comboBox для состояний, и он динамически заполнялся названиями стран, а другой - связанными со штатами ... У меня было две формы внутри HBox, чтобы показать формы, похожие на два столбца, а внутри формы справа был formItem и внутри формы элемент comboBox. Проблема была в том, что когда я дал comboBox его dataProvider, появились полосы прокрутки, и это было очень отвратительно ...

Решение: я показываю вам только правильную форму, потому что это была проблема (autoLayout = "false" в форме и minWidth = "0" в определении ComboBox) 

<mx:Form autoLayout="false" verticalGap="12">
    <mx:FormItem label="Country" required="false" width="100%" direction="vertical">
        <mx:ComboBox id="countryComboBox" minWidth="0" width="100%" labelField="@name"/>
    </mx:FormItem>
    <mx:FormItem label="State" required="false" width="100%" direction="vertical">
        <mx:ComboBox id="stateComboBox" minWidth="0" width="100%" labelField="@name"/>
</mx:FormItem>
</mx:Form>
0 голосов
/ 02 декабря 2009

Вы можете использовать атрибут maxWidth с абсолютным размером (в пикселях), однако часть элементов в выпадающем списке (которые больше, чем в выпадающем списке) будет обрезана.

от Adobe: размер по умолчанию в выпадающем списке: Достаточно широкий, чтобы вместить самую длинную запись в раскрывающемся списке в области отображения основного элемента управления плюс кнопку раскрывающегося списка. Если раскрывающийся список не отображается, высота по умолчанию зависит от размера текста метки.

...