【问题标题】:Jquery Mobile non-adjustable widthJquery Mobile 不可调宽度
【发布时间】:2015-07-30 07:47:57
【问题描述】:

使用 asp.net <EditItemTemplate> 我的 JQuery Mobile 结果是固定宽度,不会在完整的浏览器中扩展,也不会缩小到足够小的移动设备?我已经删除了所有控件中对width 的所有引用?

控件呈现为移动设备,<ul><li> 看起来不错。

<ul data-role="listview" id="ul-edit-picks" data-divider-theme="a" data-inset="true">
            <li>1st Week:
                <asp:TextBox ID="CHOICE1TextBox" runat="server" Text='1st Week' ReadOnly="True"></asp:TextBox><br /> 
                <asp:HiddenField ID="CHOICE1HiddenField" runat="server" Value='<%# Bind("CHOICE1")%>' />
            </li> 

            <li>2nd Week:
                <asp:TextBox ID="CHOICE2TextBox" runat="server" Text='' ReadOnly="True"></asp:TextBox><br /> 
                <asp:HiddenField ID="CHOICE2HiddenField" runat="server" Value='<%# Bind("CHOICE2")%>' />
            </li>

            <li>3rd Week:
                <asp:TextBox ID="CHOICE3TextBox" runat="server" Text='' ReadOnly="True"></asp:TextBox><br /> 
                <asp:HiddenField ID="CHOICE3HiddenField" runat="server" Value='<%# Bind("CHOICE3")%>' />
            </li>

            <li>
                <asp:Button ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update"
                    Text="Update Selections" ToolTip="Click to change your selections..."></asp:Button> 
                <asp:Button ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel"
                    Text="Cancel"></asp:Button>
            </li>
</ul>   

呈现的 HTML:

<ul data-role="listview" id="ul-fdid" data-divider-theme="a" data-inset="true">
            <li>FDID:
                <span id="ctl00_ContentPlaceHolder1_FormView1_Label1" style="font-size:Medium;font-weight:bold;">BJ9150</span>
            </li>
        </ul>

        <ul data-role="listview" id="ul-edit-picks" data-divider-theme="a" data-inset="true">
            <li>1st Week:
                <input name="ctl00$ContentPlaceHolder1$FormView1$CHOICE1TextBox" type="text" value="1st Week" readonly="readonly" id="ctl00_ContentPlaceHolder1_FormView1_CHOICE1TextBox" /><br /> 
                <input type="hidden" name="ctl00$ContentPlaceHolder1$FormView1$CHOICE1HiddenField" id="ctl00_ContentPlaceHolder1_FormView1_CHOICE1HiddenField" value="1/19/2014 12:00:00 AM" />
            </li> 

            <li>2nd Week:
                <input name="ctl00$ContentPlaceHolder1$FormView1$CHOICE2TextBox" type="text" readonly="readonly" id="ctl00_ContentPlaceHolder1_FormView1_CHOICE2TextBox" /><br /> 
                <input type="hidden" name="ctl00$ContentPlaceHolder1$FormView1$CHOICE2HiddenField" id="ctl00_ContentPlaceHolder1_FormView1_CHOICE2HiddenField" value="4/13/2014 12:00:00 AM" />
            </li>

            <li>3rd Week:
                <input name="ctl00$ContentPlaceHolder1$FormView1$CHOICE3TextBox" type="text" readonly="readonly" id="ctl00_ContentPlaceHolder1_FormView1_CHOICE3TextBox" /><br /> 
                <input type="hidden" name="ctl00$ContentPlaceHolder1$FormView1$CHOICE3HiddenField" id="ctl00_ContentPlaceHolder1_FormView1_CHOICE3HiddenField" />
            </li>

            <li>4th Week:
                <input name="ctl00$ContentPlaceHolder1$FormView1$CHOICE4TextBox" type="text" readonly="readonly" id="ctl00_ContentPlaceHolder1_FormView1_CHOICE4TextBox" /><br /> 
                <input type="hidden" name="ctl00$ContentPlaceHolder1$FormView1$CHOICE4HiddenField" id="ctl00_ContentPlaceHolder1_FormView1_CHOICE4HiddenField" />
            </li>

            <li>5th Week:
                <input name="ctl00$ContentPlaceHolder1$FormView1$CHOICE5TextBox" type="text" readonly="readonly" id="ctl00_ContentPlaceHolder1_FormView1_CHOICE5TextBox" /><br /> 
                <input type="hidden" name="ctl00$ContentPlaceHolder1$FormView1$CHOICE5HiddenField" id="ctl00_ContentPlaceHolder1_FormView1_CHOICE5HiddenField" />
            </li>

            <li>6th Week:
                <input name="ctl00$ContentPlaceHolder1$FormView1$CHOICE6TextBox" type="text" readonly="readonly" id="ctl00_ContentPlaceHolder1_FormView1_CHOICE6TextBox" /><br /> 
                <input type="hidden" name="ctl00$ContentPlaceHolder1$FormView1$CHOICE6HiddenField" id="ctl00_ContentPlaceHolder1_FormView1_CHOICE6HiddenField" />
            </li>

            <li>
                <input type="submit" name="ctl00$ContentPlaceHolder1$FormView1$UpdateButton" value="Update Selections" id="ctl00_ContentPlaceHolder1_FormView1_UpdateButton" title="Click to change your selections..." /> 
                <input type="submit" name="ctl00$ContentPlaceHolder1$FormView1$UpdateCancelButton" value="Cancel" id="ctl00_ContentPlaceHolder1_FormView1_UpdateCancelButton" />
            </li>
        </ul>   

【问题讨论】:

  • asp:TextBox 的最终 html 渲染成什么?
  • 更新:包含渲染输出的问题。

标签: asp.net jquery-mobile responsive-design fluid-layout


【解决方案1】:

实际上解决了这个问题:代码中的&lt;asp:label&gt; 下层产生了未设置为换行的文本。

【讨论】:

  • 其实……&lt;ul&gt; 也没有扩展到浏览器的全宽?
猜你喜欢
  • 2013-04-07
  • 1970-01-01
  • 1970-01-01
  • 2012-01-11
  • 2011-12-02
  • 2014-09-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多