Выпадающий / выберите не ведет себя адаптивно

Question

Мы используем семантическую среду пользовательского интерфейса для нашей программы, но мы не можем понять, как элементы select / dropdown используют ширину. Это кажется очень странным, и ничто в документации не говорит о том, как элементы dropdown / select работают в формах.

Кнопка «плюс» должна располагаться справа. Вместо этого он перемещается в пределах выбора. Также обратите внимание, что поле выбора больше, чем другие поля ввода, даже если мы определили тот же размер ...

В то время как все другие блоки ведут себя отзывчиво (sic), раскрывающийся список - нет. Как мы можем решить это?

код *; 1012 *

<div class="ui tiny modal" id="modal_new_discountcode">

    <div class="header" style="text-indent:5rem">Opprett ny rabatt</div>

        <div class="content">
            <div class="ui stackable form">

                    <div class="inline fields">
                        <div class="two wide field">
                        </div>

                        <div class="twelve wide field">
                            <div class="ui blue label" style="min-width: 120px; text-align: center">
                                Kode                                            
                            </div>
                            <select class="ui dropdown" id="dropdown_modal_discountcode">         
                                <option value="0"></option> 
                                <option value="7">eeee</option> 
                            </select>

                        </div>
                        <div class="two wide field">
                            <div id="btnAddDiscountCode" class="ui mini icon top left pointing green button">
                                <i class="plus icon"></i>
                            </div>
                        </div>

                    </div>    

                <div class="inline fields">
                    <div class="two wide field">
                        </div>
                        <div class="ten wide field">
                            <div class="ui blue label" style="min-width: 120px; text-align: center">
                                Forklaring                                            
                            </div>
                            <input type="text"  id="txtbxSupplierModalx" />

                        </div>

                    </div>
                    <div class="inline fields">
                    <div class="two wide field">
                        </div>
                        <div class="ten wide field" style="max-width: 340px"">
                            <div class="ui blue label" style="min-width: 120px; text-align: center">
                                Sats %                                            
                            </div>
                            <input type="text"  id="txtbxSupplierModala" />
                       </div>
                        </div>
                        <div class="inline fields">
                        <div class="two wide field">
                        </div>
                        <div class="seven wide field" style="max-width: 360px">
                            <div class="ui blue label" style="min-width: 120px; text-align: center">
                                Resting                                            
                            </div>
                            <div class="ui checkbox">
                                <input type="checkbox" name="example">
                                <label></label>
                            </div>

                        </div>
                        </div>

                    </div>

        </div>
        <div class="actions">
            <div class="ui positive button">Lagre</div>          
            <div class="ui negative button">Avbryt</div>
        </div>
    </div>