2017-08-21 4 views
0

私はプレstashop1.7.2.1モジュールを作成しています。 Prestashopには、ブートストラップ4がサポートされています。ブートストラップ4検証アイコンは、プレストショップ1.7で入力幅全体を繰り返します。

私は次のコードでの検証例からhttps://v4-alpha.getbootstrap.com/components/forms/#validationから使用しようとしている:

<div class="container"> 
    <form> 
    <div class="form-group row has-success"> 
     <label for="inputHorizontalSuccess" class="col-sm-2 col-form-label">Email</label> 
     <div class="col-sm-10"> 
     <input type="email" class="form-control form-control-success" id="inputHorizontalSuccess" placeholder="[email protected]"> 
     <div class="form-control-feedback">Success! You've done it.</div> 
     <small class="form-text text-muted">Example help text that remains unchanged.</small> 
     </div> 
    </div> 
    <div class="form-group row has-warning"> 
     <label for="inputHorizontalWarning" class="col-sm-2 col-form-label">Email</label> 
     <div class="col-sm-10"> 
     <input type="email" class="form-control form-control-warning" id="inputHorizontalWarning" placeholder="[email protected]"> 
     <div class="form-control-feedback">Shucks, check the formatting of that and try again.</div> 
     <small class="form-text text-muted">Example help text that remains unchanged.</small> 
     </div> 
    </div> 
    <div class="form-group row has-danger"> 
     <label for="inputHorizontalDnger" class="col-sm-2 col-form-label">Email</label> 
     <div class="col-sm-10"> 
     <input type="email" class="form-control form-control-danger" id="inputHorizontalDnger" placeholder="[email protected]"> 
     <div class="form-control-feedback">Sorry, that username's taken. Try another?</div> 
     <small class="form-text text-muted">Example help text that remains unchanged.</small> 
     </div> 
    </div> 
    </form> 
</div> 

Pingendo 4を使用して(4デスクトップアプリエディタをブートストラップ)、それが正常に動作します。 しかし、このコードを私のprestashopモジュールに追加すると、すべての入力に入力の幅全体にわたって繰り返される検証アイコンが含まれています。

form validation example

任意のアイデア?

答えて

1

PrestaShopのブートストラップこれらのアイコンのCSSは、PrestaShopの独自のCSSによって上書きされています。

PrestaShop CSS

backgroundプロパティを無効にすると、それが正常に動作します。

Disabled property

あなたはCSSを変更してbackground-colorbackgroundプロパティを変更することができます。

+0

私はfolowingを.form-controlクラスに追加する必要がありました:background-repeat:no-repeat;背景位置:右;ありがとう! – ufk

関連する問題