CODEWITHSUNDEEP
css
LP13
LP13

Reputation: 34189

Don't apply CSS for specific parents class

I have html like 

<div class="row">
  <div class="col-md-3">
    <div class="form-group">
      <label class="control-label">Values</label>
      <div class="form-inline">
        @Html.Kendo().NumericTextBoxFor(m => m.Min).Decimals(2);
        @Html.Kendo().NumericTextBoxFor(m => m.Max).Decimals(2);
      </div>
    </div>
  </div>
</div>

Kendo's numeric text box has .k-numerictextbox class. and i have CSS

.form-group .k-numerictextbox {
    width: 100% !important;
}

with this settings currently CSS is getting applied to NumericTextBox.

I dont want CSS to apply on NumericTextBox if its under form-inline class

Upvotes: 1

Views: 107

Answers (2)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196296

For this specific html structure (there is always one element between .k-numerictextbox and .form-group which either is or not .form-inline) then

.form-group *:not(.form-inline) .k-numerictextbox {
  width:100%;
}
<div class="row">
  <div class="col-md-3">
    <div class="form-group">
      <label class="control-label">Values</label>
      <div class="form-inline">
        <input class="k-numerictextbox" />
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-3">
    <div class="form-group">
      <label class="control-label">Values</label>
      <div class="form-not-inline">
        <input class="k-numerictextbox" />
      </div>
    </div>
  </div>
</div>

(keep in mind that it is a fragile rule, because if there is yet another container of the .k-numerictextbox inside the .form-group it will not work)

Upvotes: 1

Explosion Pills
Explosion Pills

Reputation: 191819

I would remove using !important since it's probably not needed. Add another rule with more specificity (including the .form-inline would be a good way to do this:

.form-group .k-numerictextbox {
    width: 100%;
}
.form-group .form-inline .k-numerictextbox {
    width: auto;
}

Upvotes: 0

Related Questions