Link to home
Start Free TrialLog in
Avatar of burnedfaceless
burnedfaceless

asked on

Why is this panel heading creating extra space

If you look at this panel it is rendering extra space in the heading.

Below is the jQuery file, I'm using Bootstrap for the CSS, if I need to post other files please let me know
$(function() { 
  $("#system").on('input', function () {
    var disappear = {'border' : 'none'};
	var rtnMessage;
	var reappear = {'border' : '2px solid #000'};
	var rates = $("#rates").empty(); 
	var selectedValue = $("#system").val(); 
    
    if (selectedValue) { 	
		
    switch(selectedValue){
	  /*case 'Coastal Water Company 1':
        rtnMessage = '<div class="panel panel-primary">';
		rtnMessage += '<div class="panel-heading">';
		rtnMessage += '<h3 class="panel-title">';
		rtnMessage += 'Coastal Water Company';
		rtnMessage += '</h3></div>';
		rtnMessage += '<div class="panel-body"><ul class="text-left">';
		rtnMessage += '<li>$31.50 Base Rate</li>';
		rtnMessage += '<li>$4.00 per 1,000 gallons up to 5,000 gallons</li>';
		rtnMessage += '<li>$5.60 per 1,000 gallons over 5,000 gallons</li></ul>';
        rtnMessage += '<h4>Other Charges:</h4>';
        rtnMessage += '<ul class="text-left">';
        rtnMessage += '<li>$100 dollar deposit to set up service</li>';
        rtnMessage += '<li>$40 service fee for past due accounts</li>';
        rtnMessage += '<li>If a lock is cut there will be a $50 fee';
        rtnMessage += '</li><li>Other damages can be $100 dollars or ';
        rtnMessage += 'more depending on damage done.</li>';
        rtnMessage += '</ul></div></div>';	
        $('#rates').css(disappear);
        rates.append(rtnMessage);
      break;
	  case 'Coastal Water Company 2':
        rtnMessage = '<div class="panel panel-primary">';
		rtnMessage += '<div class="panel-heading">';
		rtnMessage += '<h3 class="panel-title">';
		rtnMessage += 'Coastal Water Company';
		rtnMessage += '</h3></div>';
		rtnMessage += '<div class="panel-body"><ul class="text-left">';
		rtnMessage += '<li>$31.50 Base Rate</li>';
		rtnMessage += '<li>$5.20 per 1,000 gallons up to 5,000 gallons</li>';
		rtnMessage += '<li>$8 per 1,000 gallons over 5,000 gallons</li></ul>';
        rtnMessage += '<h4>Other Charges:</h4>';
        rtnMessage += '<ul class="text-left">';
        rtnMessage += '<li>$100 dollar deposit to set up service</li>';
        rtnMessage += '<li>$40 service fee for past due accounts</li>';
        rtnMessage += '<li>If a lock is cut there will be a $50 fee';
        rtnMessage += '</li><li>Other damages can be $100 dollars or ';
        rtnMessage += 'more depending on damage done.</li>';
        rtnMessage += '</ul></div></div>';	
        $('#rates').css(disappear);
        rates.append(rtnMessage);
      break;*/	
      case 'Consolidated Water & Sewage':
        rtnMessage = '<div class="panel panel-default">';
        rtnMessage += '<div class="panel-heading" style="margin:0">';
        rtnMessage += '<h3 class="panel-title">';
        rtnMessage += 'Consolidated Utilities, Inc.';
        rtnMessage += '</h3></div>';
        rtnMessage += '<div class="panel-body"><ul class="text-left">';
        rtnMessage += '<li>$32.00 Base Rate</li>';
        rtnMessage += '<li>$3.60 per 1,000 gallons up to 5,000 gallons';
        rtnMessage += '</li>';
        rtnMessage += '<li>$6.20 per 1,000 gallons between '; 
        rtnMessage += '5,001 - 10,000 gallons</li>';
        rtnMessage += '<li>$7.20 per 1,000 gallons 10,001 and above';
        rtnMessage += '</li></ul>';
        rtnMessage += '<h4>Other Charges:</h4>';
        rtnMessage += '<ul class="text-left">';
        rtnMessage += '<li>$100 dollar deposit to set up service</li>';
        rtnMessage += '<li>$40 service fee for past due accounts</li>';
        rtnMessage += '<li>If a lock is cut there will be a $50 fee';
        rtnMessage += '</li><li>Other damages can be $100 dollars or ';
        rtnMessage += 'more depending on damage done.</li>';
        rtnMessage += '</ul></div></div>';		
        $('#rates').css(disappear);
        rates.append(rtnMessage);  
      break;
      case 'Consolidated Water':
        rtnMessage = '<div class="panel panel-default">';
        rtnMessage += '<div class="panel-heading">';
        rtnMessage += '<h3 class="panel-title">';
        rtnMessage += 'Consolidated Utilities, Inc.';
        rtnMessage += '</h3></div>';
        rtnMessage += '<div class="panel-body"><ul class="text-left">';
        rtnMessage += '<li>$18.00 Base Rate</li>';
        rtnMessage += '<li>$3.60 per 1,000 gallons up to 5,000 gallons';
        rtnMessage += '</li>';
        rtnMessage += '<li>$6.20 per 1,000 gallons between '; 
        rtnMessage += '5,001 - 10,000 gallons</li>';
        rtnMessage += '<li>$7.20 per 1,000 gallons 10,001 and above';
        rtnMessage += '</li></ul>';
        rtnMessage += '<h4>Other Charges:</h4>';
        rtnMessage += '<ul class="text-left">';
        rtnMessage += '<li>$100 dollar deposit to set up service</li>';
        rtnMessage += '<li>$40 service fee for past due accounts</li>';
        rtnMessage += '<li>If a lock is cut there will be a $50 fee';
        rtnMessage += '</li><li>Other damages can be $100 dollars or ';
        rtnMessage += 'more depending on damage done.</li>';
        rtnMessage += '</ul></div></div>';		
        $('#rates').css(disappear);
        rates.append(rtnMessage);  
      break
      case 'Coastal':
        rtnMessage = '<div class="panel panel-success text-left">';
        rtnMessage += '<div class="panel-heading">';
        rtnMessage += '<h3 class="panel-title">';
        rtnMessage += 'Coastal Water Company, LLC';
        rtnMessage += '</h3></div>';
        rtnMessage += '<div class="panel-body"><ul class="text-left">';
        rtnMessage += '<li>$31.50 Base Rate</li>';
        rtnMessage += '<li>$4.00 per 1,000 gallons</li>';
        rtnMessage += '<li>$1.60 per 1,000 after 5,000 used</li></ul>';
        rtnMessage += '<h4>Other Charges:</h4><ul>';
        rtnMessage += '<li>$100 dollar deposit to set up service</li>';
        rtnMessage += '<li>$40 service fee for past due accounts</li>';
        rtnMessage += '<li>If a lock is cut there will be a $50 fee</li>';
        rtnMessage += '<li>Other damages can be $100 dollars or more '; 
        rtnMessage += 'depending on damage done.</li>';
        rtnMessage += '</ul></div></div>';										
        $('#rates').css(disappear);
        rates.append(rtnMessage);
      break;
      case 'CoastalLLC':
        rtnMessage = '<div class="panel panel-success text-left">';
        rtnMessage += '<div class="panel-heading">';
        rtnMessage += '<h3 class="panel-title">';
        rtnMessage += 'Coastal Water Company, LLC';
        rtnMessage += '</h3></div>';
        rtnMessage += '<div class="panel-body"><ul>';
        rtnMessage += '<li>$31.50 Base Rate</li>';
        rtnMessage += '<li>$4.00 per 1,000 gallons</li>';
        rtnMessage += '<li>$1.60 per 1,000 after 5,000 used</li></ul>';
        rtnMessage += '<h4>Other Charges</h4><ul>';
        rtnMessage += '<li>$100 dollar deposit to set up service</li>';
        rtnMessage += '<li>$40 service fee for past due accounts</li>';
        rtnMessage += '<li>If a lock is cut there will be a $50 fee';
        rtnMessage += '</li>';
        rtnMessage += '<li>Other damages can be $100 dollars or more ';
        rtnMessage += 'depending on damage done.</li>';
        rtnMessage += '</ul></div></div>';
        $('#rates').css(disappear);
        rates.append(rtnMessage);
      break;
      case 'CoastalLLC1':
        rtnMessage = '<div class="panel panel-success text-left">';
        rtnMessage += '<div class="panel-heading">';
        rtnMessage += '<h3 class="panel-title">';
        rtnMessage += 'Coastal Water Company, LLC';
        rtnMessage += '</h3></div>';
        rtnMessage += '<div class="panel-body"><ul>';
        rtnMessage += '<li>$31.50 Base Rate</li>';
        rtnMessage += '<li>$4.00 per 1,000 gallons</li>';
        rtnMessage += '<li>$1.60 per 1,000 after 5,000 used</li></ul>';
        rtnMessage += '<h4>Other Charges</h4><ul>';
        rtnMessage += '<li>$100 dollar deposit to set up service</li>';
        rtnMessage += '<li>$40 service fee for past due accounts</li>';
        rtnMessage += '<li>If a lock is cut there will be a $50 fee';
        rtnMessage += '</li>';
        rtnMessage += '<li>Other damages can be $100 dollars or more ';
        rtnMessage += 'depending on damage done.</li>';
        rtnMessage += '</ul></div></div>';
        $('#rates').css(disappear);
        rates.append(rtnMessage);
      break;
      case 'CoastalLLC2':
        rtnMessage = '<div class="panel panel-success text-left">';
        rtnMessage += '<div class="panel-heading">';
        rtnMessage += '<h3 class="panel-title">';
        rtnMessage += 'Coastal Water Company, LLC';
        rtnMessage += '</h3></div>';
        rtnMessage += '<div class="panel-body"><ul>';
        rtnMessage += '<li>$31.50 Base Rate</li>';
        rtnMessage += '<li>$4.00 per 1,000 gallons</li>';
        rtnMessage += '<li>$1.60 per 1,000 after 5,000 used</li></ul>';
        rtnMessage += '<h4>Other Charges</h4><ul>';
        rtnMessage += '<li>$100 dollar deposit to set up service</li>';
        rtnMessage += '<li>$40 service fee for past due accounts</li>';
        rtnMessage += '<li>If a lock is cut there will be a $50 fee';
        rtnMessage += '</li>';
        rtnMessage += '<li>Other damages can be $100 dollars or more ';
        rtnMessage += 'depending on damage done.</li>';
        rtnMessage += '</ul></div></div>';
        $('#rates').css(disappear);
        rates.append(rtnMessage);
      break;
      case 'CoastalLLC3':
        rtnMessage = '<div class="panel panel-success text-left">';
        rtnMessage += '<div class="panel-heading">';
        rtnMessage += '<h3 class="panel-title">';
        rtnMessage += 'Coastal Water Company, LLC';
        rtnMessage += '</h3></div>';
        rtnMessage += '<div class="panel-body"><ul>';
        rtnMessage += '<li>$31.50 Base Rate</li>';
        rtnMessage += '<li>$4.00 per 1,000 gallons</li>';
        rtnMessage += '<li>$1.60 per 1,000 after 5,000 used</li></ul>';
        rtnMessage += '<h4>Other Charges</h4><ul>';
        rtnMessage += '<li>$100 dollar deposit to set up service</li>';
        rtnMessage += '<li>$40 service fee for past due accounts</li>';
        rtnMessage += '<li>If a lock is cut there will be a $50 fee';
        rtnMessage += '</li>';
        rtnMessage += '<li>Other damages can be $100 dollars or more ';
        rtnMessage += 'depending on damage done.</li>';
        rtnMessage += '</ul></div></div>';
        $('#rates').css(disappear);
        rates.append(rtnMessage);
      break;
      case 'CoastalLLC6':
        rtnMessage = '<div class="panel panel-success text-left">';
        rtnMessage += '<div class="panel-heading">';
        rtnMessage += '<h3 class="panel-title">';
        rtnMessage += 'Coastal Water Company, LLC';
        rtnMessage += '</h3></div>';
        rtnMessage += '<div class="panel-body"><ul>';
        rtnMessage += '<li>$31.50 Base Rate</li>';
        rtnMessage += '<li>$4.00 per 1,000 gallons</li>';
        rtnMessage += '<li>$1.60 per 1,000 after 5,000 used</li></ul>';
        rtnMessage += '<h4>Other Charges</h4><ul>';
        rtnMessage += '<li>$100 dollar deposit to set up service</li>';
        rtnMessage += '<li>$40 service fee for past due accounts</li>';
        rtnMessage += '<li>If a lock is cut there will be a $50 fee';
        rtnMessage += '</li>';
        rtnMessage += '<li>Other damages can be $100 dollars or more ';
        rtnMessage += 'depending on damage done.</li>';
        rtnMessage += '</ul></div></div>';
        $('#rates').css(disappear);
        rates.append(rtnMessage);
      break;
      case 'Golden Isles':
        rtnMessage = '<div class="panel panel-isles">';
        rtnMessage += '<div class="panel-heading">';
		rtnMessage += '<h3 class="panel-title">';
		rtnMessage += 'Golden Isles';
 		rtnMessage += '</h3></div>';
	    rtnMessage += '<div class="panel-body"><ul class="text-left">';
        rtnMessage += '<li>$36.00 Flat Rate for Duplexes</li>';
 		rtnMessage += '<li>$34.00 up to 5,000 gallons for Homes</li>';
		rtnMessage += '<ul class="text-left"><li>$2.50 per 1,000 gallons after 5,000 used</li></ul></ul>'
 		rtnMessage += '<h4>Other Charges</h4>';
 		rtnMessage += '<ul class="text-left">';
        rtnMessage += '<li>$100 dollar deposit to set up service</li>';
 		rtnMessage += '<li>$40 service fee for past due accounts</li>';
 		rtnMessage += '<li>If a lock is cut there will be a $50 fee</li>';
 		rtnMessage += '<li>Other damages can be $100 dollars or ';
 		rtnMessage += 'more depending on damage done.</li>';
        rtnMessage += '</ul></div></div>';
        $('#rates').css(disappear);
        rates.append(rtnMessage);
      break;
     case 'Whitemarsh':
        rtnMessage = '<div class="panel panel-warning">';
        rtnMessage += '<div class="panel-heading">';
		rtnMessage += '<h3 class="panel-title">';
		rtnMessage += 'Whitemarsh Estates';
		rtnMessage += '</h3></div>';
		rtnMessage += '<div class=panel-body"><ul class="text-left">';
		rtnMessage += '<li>$34.00 up to 5,000 gallons</li>';
        rtnMessage += '<li>$2.50 per 1,000 after 5,000 used</li></ul>';
        rtnMessage += '<h4>Other Charges</h4>';
		rtnMessage += '<ul class="text-left">';
		rtnMessage += '<li>$100 dollar deposit to set up service</li>';
		rtnMessage += '<li>$40 service fee for past due accounts</li>';
		rtnMessage += '<li>If a lock is cut there will be a $50 fee</li>';
        rtnMessage += '<li>Other damages can be $100 dollars or ';
        rtnMessage += 'more depending on damage done.</li>';
		rtnMessage += '</ul></div></div>';
        $('#rates').css(disappear);
        rates.append(rtnMessage);
      break;
      case 'Woodlawn':
        rtnMessage = '<div class="panel panel-danger">';
        rtnMessage += '<div class="panel-heading">';
		rtnMessage += '<h3 class="panel-title">';
		rtnMessage += 'Woodlawn';
		rtnMessage += '</h3></div>';
		rtnMessage += '<div class="panel-body"><ul class="text-left">';
		rtnMessage += '<li>$34.00 up to 5,000 gallons</li>';
        rtnMessage += '<li>$2.50 per 1,000 after 5,000</li></ul>';
		rtnMessage += '<h4>Other Charges</h4>';
		rtnMessage += '<ul class="text-left">';
		rtnMessage += '<li>$100 dollar deposit to set up service</li>';
		rtnMessage += '<li>$40 service fee for past due accounts</li>';
		rtnMessage += '<li>If a lock is cut there will be a $50 fee</li>';
		rtnMessage += '<li>Other damages can be $100 dollars or ';
		rtnMessage += 'more depending on damage done.</li>';
		rtnMessage += '</ul></div></div>';          
        $('#rates').css(disappear);
        rates.append(rtnMessage);
      break;					
      default:
        RtnMessage = "<h3>Mising Subdivision</h3>";
        rates.append(rtnMessage);
      }			
} 
    else {
      rates.append( "Please select your street." );
      $('#rates').css(reappear);
		}
	}); 
});

Open in new window

rendering_problem.png
ASKER CERTIFIED SOLUTION
Avatar of lenamtl
lenamtl
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of burnedfaceless
burnedfaceless

ASKER

Thanks