【问题标题】:horizontal select full width jQuery Mobile水平选择全宽 jQuery Mobile
【发布时间】:2014-07-01 19:02:14
【问题描述】:

我试图询问用户的生日,但遇到了一些风格问题。

你应该能从这个http://jsfiddle.net/DjsWv/14/了解我的问题

我开始:

         <fieldset data-role="controlgroup" data-type="horizontal">
            <legend>Date of Birth:</legend>
            <select name="select-choice-month" id="select-choice-month" data-icon="false">
                <option >Month</option>
                <option value="jan">Jan</option>
            </select>
            <select name="select-choice-day" id="select-choice-day" data-icon="false">
                <option >Day</option>
                <option value="1">1</option>
            </select>
            <select name="select-choice-year" id="select-choice-year">
                <option >Year</option>
                <option value="2011">2012</option>
            </select>
        </fieldset>

这里的问题是我不喜欢宽度不是满或 100%

我看到的唯一解决方案是使用导航栏,这对我来说看起来并不讨人喜欢......关于如何让这个水平控制组显示为完整/标准宽度的任何想法

【问题讨论】:

    标签: jquery html css jquery-mobile


    【解决方案1】:

    工作示例:http://jsfiddle.net/Gajotres/PUVkw/

    HTML

    <fieldset data-role="controlgroup" data-type="horizontal" class="custom-fieldset">
        <legend>Date of Birth:</legend>
    
        <select name="select-choice-month" id="select-choice-month" data-icon="false">
            <option >Month</option>
            <option value="jan">Jan</option>
        </select>
    
        <select name="select-choice-day" id="select-choice-day" data-icon="false">
            <option >Day</option>
            <option value="1">1</option>
        </select>
    
        <select name="select-choice-year" id="select-choice-year">
            <option >Year</option>
            <option value="2011">2012</option>
        </select>
    </fieldset>
    

    CSS

    .custom-fieldset .ui-controlgroup-controls {
        width: 100% !important;
    }
    
    .custom-fieldset .ui-controlgroup-controls .ui-select {
        width: 33.33% !important;
    }
    

    不要忘记在你的字段集中添加一个自定义类名,在我的例子中它被称为:custom-fieldset

    编辑

    下面的 ericjbasti 评论是带有自定义 id 且没有 !important 的解决方案:http://jsfiddle.net/Gajotres/PUVkw/1/

    【讨论】:

    • 这个答案是正确的,但我唯一的建议是给字段集一个 ID,这样你就不必使用 !important
    • 谢谢!像魅力一样工作。
    【解决方案2】:

    没有必要覆盖任何样式。您甚至可以在表单中使用导航栏行为。

    见:jQuery Mobile: Full width of <select>s fieldgroup

    【讨论】:

      【解决方案3】:

      我并不热衷于使用上面的导航栏解决方案,因此寻找更干净的 CSS 覆盖。看不到 !importants,如果您不将它们包装在全角元素中,它们不会干扰 jQuery Mobile 主题。

      HTML

      <div class="full-width">
         <div class="ui-field-contain country-select">
            <label for="countrySelect" class="ui-screen-hidden">Select Country</label>
               <select id="countrySelect" data-native-menu="false">
                  <option class="default-option">Select Country</option>
               </select>
         </div>
      </div>
      

      CSS

      .full-width .ui-field-contain .ui-select {
         width: 100%;
      }
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2011-04-29
        • 1970-01-01
        • 1970-01-01
        • 2013-01-14
        • 2013-04-23
        • 1970-01-01
        • 2013-10-10
        • 2013-03-20
        相关资源
        最近更新 更多