Twitter Bootstrap Question posted in

Twitter bootstrap – Hide a row if value returned is empty

I feel a little stupid asking this question but for some reason I cant for the life of me think on how to do what I want.

I have a <div class="row"> which has my field label and field in it.

I want to completely hide this row if the value of my field is returned as empty.

HTML (Held in my CMS system):

<div id="rollNumber" class="row">
     <label class="col-sm-offset-2 col-sm-3 control-label">[!RollNumberLabel]</label>
     <div class="col-sm-2 form-control-static">[!RollNumber]</div>
</div>

View code:

if (newBankdetails.RollNumber != null && newBankdetails.RollNumber != "")
{
     template.Nvc.Add("[!RollNumberLabel]", "Roll number");
     template.Nvc.Add("[!RollNumber]", newBankdetails.RollNumber);
}

I tried doing:

template.Nvc.Add("[!RollNumberLabel]", "");
template.Nvc.Add("[!RollNumber]", "");

but this adds white space between the row above and below this row.

I’m up for any suggestions whether it be JavaScript, JQuery, CSS or if can be done, using HTML (although I don’t think it can be done this way).

I can’t add any code to my CMS so it needs to be done in my code.

My site is using Twitter Bootstrap

Tags:

4

Answers


  1. 0

    Use CSS display style property to hide the row.

    $("#rollNumber").css("display", "none");
    Login or Signup to reply.
  2. 0

    I am not sure if this is a overkill solution for your problem, but with jQuery and regex you could do something like this:

    $('.row').each(function(){
  var row = $(this);
  if(! /^[a-zA-Z0-9]+$/.test(row.find('label'))){
    // No alphabetical characters found
    row.css('display','none');
  }
});
    Login or Signup to reply.
  3. 0

    You can test if label text is empty or not.

    $(function() {
    $(".row").each(function() {
        if ($("label", this).text() == "" ) {
            $(this).hide();
        }
    });
});

    Working demo: http://jsfiddle.net/m7nytbw4/

    Login or Signup to reply.
  4. 0

    I have created an example for you http://jsfiddle.net/gon250/x8m6jLLo/

    $(".row").each(function(){
    var $row = $(this);
    var $childern = $row.children();
    if($childern.length > 1) {
     if($childern[0].innerText === "" && $childern[1].innerText === "") {
            $row.hide();
        }
    }
});

    basically what I’m doing is check all the children of the rows and if both are empty hide the row.

    Hope it’s helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search