0

ここに画像の説明を入力2 つのチェックボックスがあるグリッドがあります。しかし、それは2行で表示され、1行で表示する必要があります（Ckeckboxes + Label）。CSS ブートストラップを使用しています。IN チェックボックスで、インラインで表示するように設定しました。

私のCSS。

input[type="checkbox"] {  cursor: pointer;  display: inline;}

マイページ:

<div id="Div1" width="auto" runat="server">
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" GridLines="None"
        CssClass="table table-bordered table-striped" Width="100%">
        <Columns>
            <asp:BoundField DataField="idTickets" HeaderText="ID" />
            <asp:BoundField DataField="User" HeaderText="User" />
            <asp:BoundField DataField="RequestDate" HeaderText="Request Date" DataFormatString="{0:d}" />
            <asp:BoundField DataField="BusinessJustification" HeaderText="Business Justification" />
            <asp:BoundField DataField="AccessType" HeaderText="Group Access" />
            <asp:BoundField DataField="sub_folder_path" HeaderText="Folder Path" />
            <asp:BoundField DataField="ServerName" HeaderText="Server Name" />
            <asp:TemplateField HeaderText="Approved/Denied">
                <ItemTemplate>
                    <asp:HiddenField ID="UserValue" runat="server" Value='<%# Bind("User") %>' />
                    <asp:CheckBox ID="CheckBox1" runat="server" Text="Approved" OnCheckedChanged="CheckBox1_ChangeCheck"
                        AutoPostBack="true" />
                    <asp:CheckBox ID="CheckBox2" runat="server" Text="Denied" OnCheckedChanged="CheckBox2_ChangeCheck"
                        AutoPostBack="true" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</div>

この CkechBox を 1 行だけで表示するように構成するにはどうすればよいですか? 他の2ページでこの問題があります。

添付プリント: ここに画像の説明を入力

私のHTML：

<tr><td>
  <input type="hidden" name="GridView1$ctl02$UserValue" id="GridView1_UserValue_0" value="MXLozadaRa">
  <input id="GridView1_CheckBox1_0" type="checkbox" name="GridView1$ctl02$CheckBox1" onclick="javascript:setTimeout('__doPostBack(\'GridView1$ctl02$CheckBox1\',\'\')', 0)">
  <label for="GridView1_CheckBox1_0">Approved</label>
  <input id="GridView1_CheckBox2_0" type="checkbox" name="GridView1$ctl02$CheckBox2" onclick="javascript:setTimeout('__doPostBack(\'GridView1$ctl02$CheckBox2\',\'\')', 0)">
  <label for="GridView1_CheckBox2_0">Denied</label>
</td></tr>

CkeckBox を使用した 2 番目の Div。

<div align="center" width="auto" id="DivCheckBox">
  <input id="ckbApprovalAll" type="checkbox" name="ckbApprovalAll" onclick="javascript:setTimeout('__doPostBack(\'ckbApprovalAll\',\'\')', 0)">
  <label for="ckbApprovalAll">Approved All</label>
  <input id="ckbDeniedAll" type="checkbox" name="ckbDeniedAll" onclick="javascript:setTimeout('__doPostBack(\'ckbDeniedAll\',\'\')', 0)">
  <label for="ckbDeniedAll">Denied All</label>
  <br>
  <br>
  <input type="submit" name="btnSend" value="Send" id="btnSend" class="btn" align="center">
</div>
4

6 に答える 6

2

最も簡単な方法は、テーブルを使用することです。最近はテーブルの使用を避けています。

この場合、とにかく GridView はテーブルを生成するので、それはもはや問題ではありません。

<asp:GridView ID="GridView1" runat="server" 
  AutoGenerateColumns="false" GridLines="None" Width="100%">
    <Columns>
        ...
        <asp:TemplateField HeaderText="Approved/Denied">
            <ItemTemplate>
                <table>
                    <tr>
                        <td><asp:CheckBox ID="CheckBox1" ... /></td>
                        <td><asp:CheckBox ID="CheckBox2" ... /></td>
                    </tr>
                </table>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

テキストとチェックボックスの両方を 1 行に表示したい場合は、 からテキストを削除し、別々CheckBoxに表示できます。td

<table>
    <tr>
        <td><asp:CheckBox ID="CheckBox1" ... /></td>
        <td>Approved</td>
        <td><asp:CheckBox ID="CheckBox2" ... /></td>
        <td>Denied</td>
    </tr>
</table>

最後になりましたが、各チェックボックスを個別のテンプレート フィールドにレンダリングできます。私は他の2つよりもこのアプローチを好みます。

<asp:GridView ID="GridView1" runat="server" ...>
    <Columns>
        <asp:TemplateField HeaderText="Approved">
            <ItemTemplate>
                <asp:CheckBox ID="CheckBox1" .../>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Denied">
            <ItemTemplate>
                <asp:CheckBox ID="CheckBox2" ... />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
于 2013-07-29T14:24:21.537 に答える
1

はるかに簡単でクリーンなソリューションがあります。

CssClass の追加 (適切な方法)

必要なのは、asp:CheckBoxインラインでレンダリングするすべてに CSS クラスを追加することだけです。これを行うと、ASP はクラスの親内に+を自動的にレンダリングします。次に、そのクラスに対して、テキストが別の行に分割されないように設定する必要があります。inputlabelspanwhite-space: nowrap;

.cb {
    white-space: nowrap;
}

<asp:CheckBox runat="server" Text="Approved" CssClass="cb" />

サンプル コード スニペット

.cb {
  white-space: nowrap;
}

/*/ Style for the sake of this Code Snippet /*/
.test-sample {
  border: dotted 1px;
  width: 50px;
}
<!--
  div.test-sample is not needed! I used it in this code snippet
  to prove that CheckBox label is not breaking to another line.
-->

<p>With <code>CssClass="cb"</code>:</p>
<div class="test-sample">
  <!-- <asp:CheckBox runat="server" ID="CheckBox1" Text="Approved" CssClass="cb" /> -->
  <span class="cb"><input id="CheckBox1" type="checkbox" /><label for="CheckBox1">Approved</label></span>
</div>

<p>Without <code>CssClass="cb"</code>:</p>
<div class="test-sample">
  <!-- <asp:CheckBox runat="server" ID="CheckBox2" Text="Approved" /> -->
  <input id="CheckBox2" type="checkbox" /><label for="CheckBox2">Approved</label>
</div>

このような単純なタスクにテーブルを使用することはお勧めしません。テーブルの動作は一般的に予測が難しいため、これはやり過ぎであり、将来的に問題が発生する可能性があります。

また、適切なフィードバックを提供して適切な要素をレンダリングしない限り、このスレッドで推奨されているように、CheckBox とそのラベルを別々にレンダリングしないようにしてください。label要素のない CheckBoxlabelは、使用するのに非常にイライラさせられます。これは、非常に小さな正方形ではなく、キャプションをクリックするというユーザーの自然な習慣を壊してしまうからです。

シンプルに！
〜ウィクトル

于 2017-01-12T22:43:13.923 に答える
0

表示をブロックするように設定する必要があります。また、幅と高さを最後の td に設定する必要があります。例えば：

input,span
{
float:left
display:block;
}
于 2013-07-29T13:00:00.443 に答える