2

Grails 2.4.2 を使用しています。いくつかの変更を加えた Grails のデフォルト CSS を使用したいと考えています。ここで、フィールド ラベルを左側ではなくフィールドの上に配置する必要があります。誰でもこれについて私を助けてもらえますか? CSSが苦手です。前もって感謝します。

4つのフィールドを連続して表示したいフォーム要素は次のとおりです。

    <div class="fieldcontain ${hasErrors(bean: usersInstance, field: 'fullName', 'error')} required">
    <label for="fullName">
        <g:message code="users.fullName.label" default="Full Name"/>
        <span class="required-indicator">*</span>
    </label>
    <g:textField name="fullName" required="" value="${usersInstance?.fullName}"/>

    <label for="email">
        <g:message code="users.email.label" default="Email"/>
        <span class="required-indicator">*</span>
    </label>
    <g:field type="email" name="email" required="" value="${usersInstance?.email}"/>

</div>

上記のコードの出力は次のとおりです。

ここに画像の説明を入力

ここで、4 つのフィールドを連続して追加すると、すべてのフィールドのラベルが一番上に表示されます。助けてくださいませんか？

各行の単一フィールド ::

ここに画像の説明を入力

フォーム要素 ::

    <div class="fieldcontain ${hasErrors(bean: usersInstance, field: 'username', 'error')} required">
    <label for="username">
        <g:message code="users.username.label" default="Username"/>
        <span class="required-indicator">*</span>
    </label>
    <g:textField name="username" required="" value="${usersInstance?.username}"/>

</div>

<div class="fieldcontain ${hasErrors(bean: usersInstance, field: 'password', 'error')} required">
    <label for="password">
        <g:message code="users.password.label" default="Password"/>
        <span class="required-indicator">*</span>
    </label>
    <g:textField name="password" required="" value="${usersInstance?.password}"/>

</div>

<div class="fieldcontain ${hasErrors(bean: usersInstance, field: 'fullName', 'error')} required">
    <label for="fullName">
        <g:message code="users.fullName.label" default="Full Name"/>
        <span class="required-indicator">*</span>
    </label>
    <g:textField name="fullName" required="" value="${usersInstance?.fullName}"/>

</div>

<div class="fieldcontain ${hasErrors(bean: usersInstance, field: 'email', 'error')} required">
    <label for="email">
        <g:message code="users.email.label" default="Email"/>
        <span class="required-indicator">*</span>
    </label>
    <g:field type="email" name="email" required="" value="${usersInstance?.email}"/>

</div>

<div class="fieldcontain ${hasErrors(bean: usersInstance, field: 'phone', 'error')} required">
    <label for="phone">
        <g:message code="users.phone.label" default="Phone"/>
        <span class="required-indicator">*</span>
    </label>
    <g:textField name="phone" required="" value="${usersInstance?.phone}"/>

</div>

<div class="fieldcontain ${hasErrors(bean: usersInstance, field: 'fax', 'error')} required">
    <label for="fax">
        <g:message code="users.fax.label" default="Fax"/>
        <span class="required-indicator">*</span>
    </label>
    <g:textField name="fax" required="" value="${usersInstance?.fax}"/>

</div>

<div class="fieldcontain ${hasErrors(bean: usersInstance, field: 'address', 'error')} required">
    <label for="address">
        <g:message code="users.address.label" default="Address"/>
        <span class="required-indicator">*</span>
    </label>
    <g:textField name="address" required="" value="${usersInstance?.address}"/>

</div>
4

2 に答える 2

2

どうぞ。次の CSS を定義するだけです。

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.fieldcontain label, .fieldcontain .property-label {
    display: block;
    text-align: left;
    width: 100%
}

.fieldcontain input {
    width: 100%;
}

.fieldcontain {
    width: 25%;
    display: inline-block;
    float: left
}

.row:before, .row:after {
     display: table;
    content: " ";
}

HTML は次のようになります。

<fieldset class="form">
    <div class="row">
        <div class="fieldcontain  required">
            <label for="firstName">
                First Name
                <span class="required-indicator">*</span>
            </label>
            <input type="text" name="firstName" required="" value="" id="firstName">
        </div>

        <div class="fieldcontain  required">
            <label for="lastName">
                Last Name
                <span class="required-indicator">*</span>
            </label>
            <input type="text" name="lastName" required="" value="" id="lastName">
        </div>

        <div class="fieldcontain  required">
            <label for="email">
                Email
                <span class="required-indicator">*</span>
            </label>
            <input type="text" name="email" required="" value="" id="email">
        </div>

        <div class="fieldcontain  required">
            <label for="number">
                Number
                <span class="required-indicator">*</span>
            </label>
            <input type="text" name="number" required="" value="" id="number">
        </div>
    </div>
</fieldset>

.fieldcontain例で示したように、4 つの要素のセット、つまりdivwith クラスでラップします.row。

ただし、Grails はスタイリング用の基本的な CSS を提供するため、新しいプロジェクトをすばやくブートストラップできますが、 Twitter Bootstrapを使用することをお勧めします。

于 2015-11-22T09:17:06.590 に答える
0 
...
<style>
#fieldlabel {display:block;}
#fieldinput {display:block;}
</style>
...
<body>
<label id="fieldlabel"><input type="text" id="fieldinput"></label>
</body>
...
于 2015-11-22T08:42:43.227 に答える