Ширина выпадающей формы Bootstrap

У меня есть раскрывающаяся форма, ширина которой в настоящее время ограничена шириной ссылки, активирующей раскрывающийся список:

проблема

Я хочу, чтобы форма расширялась настолько, насколько это необходимо, чтобы поместить все элементы формы в одну строку. Как я могу это сделать?

Текущий HTML-код:

<h1>Time Period:
    <div id="date-filter-dropdown" class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                <span class="primary">May 2013</span></a>
            <ul class="dropdown-menu" role="menu">
                <li>
                    <form class="form-inline">
                        <input type="text" class="input-mini filter-time-form" id="id_filter_form_year" maxlength="4" size="4" placeholder="YYYY" />
                        <span class="filter-form-date-dividers">&dash;</span>
                        <input type="text" class="input-mini filter-time-form" id="id_filter_form_month" maxlength="2" size="2" placeholder="MM" />
                        <span class="filter-form-date-dividers">&dash;</span>
                            <input type="text" class="input-mini filter-time-form" id="id_filter_form_day" maxlength="2" size="2" placeholder="DD" />

                        <button type="button" class="btn btn-primary javascript-submit" id="filter-date-submit" onclick="filter_time();">Filter</button>
                    </form>
                </li>
            </ul>
        </div>
    </h1>

JSFiddle

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


javascript forms html twitter-bootstrap width
person wrongusername    schedule 12.05.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Попробуйте это:

<ul class="dropdown-menu" id="ddown" role="menu">  //added a id for the dropdown

и добавьте эти js:

var m = document.getElementById("date-filter-dropdown").offsetWidth;  //get the date div width.
// alert(m);
var n = document.getElementById("ddown");  
n.style.width = m+'px';    // set dropdown width.

http://jsfiddle.net/Gz3JD/1/

person jmingov    schedule 12.05.2013