Unable to set width using jQuery

Question

I am trying to use jquery to set the width based on a grandparent element. I can get the correct width to display in the console but the attribute is not getting added to the css of the element.

I am using this jquery to set the style because I need to overwrite another rule.

$(".back .nrl-box").css("cssText", "width:" + nrlwidth + "important");

jQuery(document).ready(function() { 
  var nrlwidth = $("#nrl-main")
    .width() / 1.95 + "px";
  console.log(nrlwidth);
  $(".back .nrl-box").css("cssText", "width:" + nrlwidth + "important");
  $("#card").flip({
    axis: 'y',
    trigger: 'click',
    onEnd: function() {
      console.log('Box Flips');
    },
  });
  $("#card1").flip({
    axis: 'y',
    trigger: 'click'
  });
  $("#card2").flip({
    axis: 'y',
    trigger: 'click'
  });
  $("#card3").flip({
    axis: 'y',
    trigger: 'click'
  });
  $("#card4").flip({
    axis: 'y',
    trigger: 'click'
  });
  $("#card5").flip({
    axis: 'y',
    trigger: 'click'
  });
  $("#card6").flip({
    axis: 'y',
    trigger: 'click'
  });
  $("#card7").flip({
    axis: 'y',
    trigger: 'click'
  });

  $("#card").click(function() {
    $("#card1").toggle();
    $("#card4").toggle();
    $("#card5").toggle();
  });
});

.nrl-box {
  box-shadow: 4px 4px 2px #888888;
  color: #006699 !important;
  background: linear-gradient(to bottom, #dbdbdb 0%, #f2f2f2 100%);
  border-color: #B3B3B3;
  padding: 8px !important;
  font: 12px/20px "Helvetica                      Neue", Helvetica, Arial, sans-serif;
  border-radius: 0px !important;
  margin-bottom: 15px !important;
  text-align: center;
}

.col-sm-3 {
  width: 25% !important;
  height: 200px !important;
  border-radius: 10px !important;
  margin-bottom: 10px;
  margin-top: 20px;
}

.front {
  height: 195px !important;
  z-index: 2;
  position: relative;
}

#card1 {
  position: relative;
}

.back {
  z-index: 10000000000 !important;
  position: relative;
}

.row {
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div id="nrl-main" class="col-sm-12">
      <div class="col-sm-3">
        <div id="card" class="">
          <div class="front nrl-box">
            <i class="fa fa-home fa-5x nrl-fa" aria-hidden="true"></i>
            <h3> 3 </h3>
          </div>
          <div class="back nrl-box">

          </div>
        </div>
      </div>
      <div class="col-sm-3">
        <div id="card1" class="">
          <div class="front nrl-box">
            <i class="fa fa-home fa-5x nrl-fa" aria-hidden="true"></i>
            <h3> 3 </h3>
          </div>
          <div class="back nrl-box">
            Back content <br /> one more time
          </div>
        </div>
      </div>
      <div class="col-sm-3">
        <div id="card2" class="">
          <div class="front nrl-box">
            <i class="fa fa-home fa-5x nrl-fa" aria-hidden="true"></i>
            <h3> 3 </h3>
          </div>
          <div class="back nrl-box">
            Back content <br /> one more time
          </div>
        </div>
      </div>
      <div class="col-sm-3">
        <div id="card3" class="">
          <div class="front nrl-box">
            <i class="fa fa-home fa-5x nrl-fa" aria-hidden="true"></i>
            <h3> 3 </h3>
          </div>
          <div class="back nrl-box">
            Back content <br /> one more time
          </div>
        </div>
      </div>
      <div class="col-sm-3">
        <div id="card4" class="">
          <div class="front nrl-box">
            <i class="fa fa-home fa-5x nrl-fa" aria-hidden="true"></i>
            <h3> 3 </h3>
          </div>
          <div id="box1" class="back nrl-box">
            Back content <br /> one more time
          </div>
        </div>
      </div>
      <div class="col-sm-3">
        <div id="card5" class="">
          <div class="front nrl-box">
            <i class="fa fa-home fa-5x nrl-fa" aria-hidden="true"></i>
            <h3> 3 </h3>
          </div>
          <div class="back nrl-box">
            Back content <br /> one more time
          </div>
        </div>
      </div>
      <div class="col-sm-3">
        <div id="card6" class="">
          <div class="front nrl-box">
            <i class="fa fa-home fa-5x nrl-fa" aria-hidden="true"></i>
            <h3> 3 </h3>
          </div>
          <div class="back nrl-box">
            Back content <br /> one more time
          </div>
        </div>
      </div>
      <div class="col-sm-3">
        <div id="card7" class="">
          <div class="front nrl-box">
            <i class="fa fa-home fa-5x nrl-fa" aria-hidden="true"></i>
            <h3> 3 </h3>
          </div>
          <div class="back nrl-box">
            Back content <br /> one more time
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
</script>

Here is the codepen link https://codepen.io/RobertCC/pen/KvmxrR?editors=1111

Any help is appreciated!

Answer 1

The flip function is overwriting any width you set. So move your width setting after the flip function:

$("#card").flip({
  axis: 'y',
  trigger: 'click',
     onEnd: function() {
            console.log('Box Flips');
        },
});
$(".back.nrl-box").css("width", nrlwidth);

Note the changes .css() line too.

https://codepen.io/anon/pen/xLXPKx?editors=1111

Answer 2

The selector .back .nrl-box will select the element .nrl-box within the element .back - that's what the space does.

It looks like you want to select an element with both classes, so the selector you want is .back.nrl-box.