jasmine825 jasmine825 - 4 months ago 9
HTML Question

my dialog box design is not changing no matter what i put

I want to make my dialog box width bigger when it displays and also have those horizontal middle borders, I guess it doesn't because my bootstrap for the site doesn't contain them, how can I fix those? This is my code:

$(document).ready(function() {
$(document).on("click",".reports tr",function(){
//alert($(this).attr("id"));

$("#data").empty();
$("#data").append(

"<table class= 'table display border=3px solid black' style= 'width:700px;'>" +

"<tr>"+"<th>Months</th>"+"<th>Charges</th>"+"<th>Payments</th>"+ "</tr>"+

"<tr>"+"<th>Janurary</th>"+"<th>"+$("#clinic" +$(this).attr("clinic")+"_charges_"+"1"+"_"+$(this).attr("year")).html()+"</th>" + "<th>"+$("#clinic" +$(this).attr("clinic")+"_payments_"+"1"+"_"+$(this).attr("year")).html()+"</th>"+"</tr>"+
"<tr>"+"<th>Feburary</th>" +"<th>"+$("#clinic" +$(this).attr("clinic")+"_charges_"+"2"+"_"+$(this).attr("year")).html()+"</th>"+"<th>"+$("#clinic" +$(this).attr("clinic")+"_payments_"+"2"+"_"+$(this).attr("year")).html()+"</th>"+"</tr>"+
"<tr>"+"<th>March</th>"+"<th>"+$("#clinic" +$(this).attr("clinic")+"_charges_"+"3"+"_"+$(this).attr("year")).html()+"</th>" +"<th>"+$("#clinic" +$(this).attr("clinic")+"_payments_"+"3"+"_"+$(this).attr("year")).html()+"</th>"+ "</tr>"+
"<tr>"+"<th>April</th>"+"<th>"+$("#clinic" +$(this).attr("clinic")+"_charges_"+"4"+"_"+$(this).attr("year")).html()+"</th>" +"<th>"+$("#clinic" +$(this).attr("clinic")+"_payments_"+"4"+"_"+$(this).attr("year")).html()+"</th>"+"</tr>"+
"<tr>"+"<th>May</th>" +"<th>"+$("#clinic" +$(this).attr("clinic")+"_charges_"+"5"+"_"+$(this).attr("year")).html()+"</th>"+"<th>"+$("#clinic" +$(this).attr("clinic")+"_payments_"+"5"+"_"+$(this).attr("year")).html()+"</th>"+"</tr>"+
"<tr>"+"<th>June</th>"+"<th>"+$("#clinic" +$(this).attr("clinic")+"_charges_"+"6"+"_"+$(this).attr("year")).html()+"</th>" +"<th>"+$("#clinic" +$(this).attr("clinic")+"_payments_"+"6"+"_"+$(this).attr("year")).html()+"</th>"+"</tr>"+
"<tr>"+"<th>July</th>"+"<th>"+$("#clinic" +$(this).attr("clinic")+"_charges_"+"7"+"_"+$(this).attr("year")).html()+"</th>" +"<th>"+$("#clinic" +$(this).attr("clinic")+"_payments_"+"7"+"_"+$(this).attr("year")).html()+"</th>"+ "</tr>"+
"<tr>"+"<th>August</th>"+"<th>"+$("#clinic" +$(this).attr("clinic")+"_charges_"+"8"+"_"+$(this).attr("year")).html()+"</th>" +"<th>"+$("#clinic" +$(this).attr("clinic")+"_payments_"+"8"+"_"+$(this).attr("year")).html()+"</th>"+ "</tr>"+
"<tr>"+"<th>September </th>"+"<th>"+$("#clinic" +$(this).attr("clinic")+"_charges_"+"9"+"_"+$(this).attr("year")).html()+"</th>" +"<th>"+$("#clinic" +$(this).attr("clinic")+"_payments_"+"9"+"_"+$(this).attr("year")).html()+"</th>"+"</tr>"+
"<tr>"+"<th>October</th>"+"<th>"+$("#clinic" +$(this).attr("clinic")+"_charges_"+"10"+"_"+$(this).attr("year")).html()+"</th>" +"<th>"+$("#clinic" +$(this).attr("clinic")+"_payments_"+"10"+"_"+$(this).attr("year")).html()+"</th>"+"</tr>"+
"<tr>"+ "<th>November</th>"+"<th>"+$("#clinic" +$(this).attr("clinic")+"_charges_"+"11"+"_"+$(this).attr("year")).html()+"</th>" +"<th>"+$("#clinic" +$(this).attr("clinic")+"_payments_"+"11"+"_"+$(this).attr("year")).html()+"</th>"+ "</tr>"+
"<tr>"+"<th>December</th>"+"<th>"+$("#clinic" +$(this).attr("clinic")+"_charges_"+"12"+"_"+$(this).attr("year")).html()+"</th>" +"<th>"+$("#clinic" +$(this).attr("clinic")+"_payments_"+"12"+"_"+$(this).attr("year")).html()+"</th>"+"</tr>"+






"</table>"


);
$("#data").dialog();
});
});


And this is the div at the end of the page:

<div id="data" border="6" style= "height:50%;width:900px;background-color: #fcf8e3; font-weight: bold;font-size:14;white-space: nowrap;">

</div>

Answer

You can set the width of a jQuery UI Dialog with the width option. For example:

$("#data").dialog({
    width: 700
});

See documentation

You can set a border between the first and second column using the following css:

.table th:first-child {
    border-right: 1px solid black;
}

Also, do note there is an error in your table class: border=3px solid black is not a valid class.

I would suggest you move all your inline styling to a separate CSS file and use proper class names.

Comments