css - Why does my html page fail to render the same after making it standalone? -
i have web page (web api/asp.net) looks pretty want to:
this code produces it:
@model webapprptscheduler.models.homemodel @using system.data @{ viewbag.title = "pro*act eservices reporting"; datatable dtunits = model.units; var units = x in dtunits.asenumerable() select new { unit = x.field<string>("unit") }; datatable dtreports = model.reports; var reports = x in dtreports.asenumerable() select new { report = x.field<string>("reportname").toupper() }; list<string> daysofmonth = model.daysofmonth; list<string> ordinalweeksofmonth = model.ordinalweek; list<string> daysofweek = model.daysofweek; list<string> patternfrequency = model.patternfrequency; int maxmonthsbackbegin = model.maxmonthsbackforreportbegin; int maxmonthsbackendnormal = model.maxmonthsbackforreportendnormal; int maxmonthsbackendfillrate = model.maxmonthsbackforreportendfillrate; int maxdaysbackfordeliveryperformance = model.maxdaysbackfordeliveryperformancereport; } @* row 1: "report scheduler" *@ <div class="jumbotronjr"> <div class="col-md-3"> <img src="http://www.proactusa.com/wp-content/themes/proact/images/pa_logo_notag.png" alt="pro*act usa logo"> @*<img src="~/content/images/proactlogowithverbiage.png" alt="pro*act usa puny logo">*@ @*<img src="~/content/images/proactlogowithverbiage.png" height="160" width="200" alt="pro*act usa puny logo">*@ </div> <div class="col-md-9"> <label class="titletext">eservices reporting</label> </div> </div> @* row 2: hr *@ <div class="row"> <div class="col-md-12"> <hr /> </div> </div> @* row 3: "select distributors, -categories, -report date range" *@ <div class="row"> <div class="col-md-1"> </div> <div class="col-md-3 addltopmargin"> <label class="sectiontext">select distributors</label> <div> <select class="dropdown bottommarginbreathingroom" id="unitsselect" name="unitsselect"> <option disabled selected value="-1">please choose distributor</option> <option>all distributors</option> <option>fsa loveland</option> <option>hearn kirkwood</option> <option>paragon</option> <option>piazza</option> <option>produceone cleveland</option> </select> </div> </div> <div class="col-md-3 addltopmargin"> <label class="sectiontext">select categories</label> <div> <select class="dropdown bottommarginbreathingroom" id="categoriesselect" name="categoriesselect"> <option disabled selected value="-1">please choose categories</option> <option>all categories</option> <option>fruits</option> <option>vegetables</option> <option>herbs</option> </select> </div> </div> <div class="col-md-5 addltopmargin"> <label class="sectiontext">report date range</label> <div> <input type="date" class="bottommarginbreathingroom" id="daterangefrom1" name="daterangefrom1"> </input> <label> </label> <input type="date" class="bottommarginbreathingroom" id="daterangeto1" name="daterangeto1"> </input> </div> </div> </div> @* row 4: "select classes, comparative date range" *@ <div class="row"> <div class="col-md-4"> </div> <div class="col-md-3 addltopmargin"> <label class="sectiontext">select classes</label> <div> <select class="dropdown bottommarginbreathingroom" id="customersselect" name="customersselect"> <option disabled selected value="-1">please choose classes</option> <option>all classes</option> <option>apples</option> <option>asparagus</option> <option>avocados</option> <option>bananas</option> <option>beans</option> <option>berries</option> <option>broccoli</option> <option>cabbage</option> <option>carrots</option> <option>celery</option> <option>cilantro</option> <option>cucumbers</option> <option>garlic</option> <option>grapes</option> <option>lettuce</option> <option>peppers</option> <option>potatoes</option> </select> </div> </div> <div class="col-md-5 addltopmargin"> <label class="sectiontext">comparative date range</label> <div> <input type="date" class="bottommarginbreathingroom" id="daterangefrom2" name="daterangefrom2"> </input> <label> </label> <input type="date" class="bottommarginbreathingroom" id="daterangeto2" name="daterangeto2"> </input> </div> </div> </div> @* row 5: "select items, summary , detail checkboxes, submit button" *@ <div class="row"> <div class="col-md-4"> </div> <div class="col-md-3 addltopmargin"> <label class="sectiontext">select items</label> <div> <select class="dropdown bottommarginbreathingroom" id="itemssselect" name="itemssselect"> <option disabled selected value="-1">please choose items</option> <option>all items</option> <option>apples, fuji 12/3#</option> <option>apples, granny smith 20 ct</option> <option>asparagus, large 11/1#</option> <option>avocados, hass 48 #1</option> <option>bananas, 10#</option> <option>beans, green trim 2/5# (bags)</option> <option>berries, black 1/6 oz</option> <option>berries, blue 1/6 oz</option> <option>berries, raspberry 3/6 oz</option> <option>berries, strawberry 1# clam</option> <option>broccoli, 14 ct</option> <option>brussel sprouts, 25#</option> <option>cabbage, green 5#</option> <option>cabbage, red 5#</option> <option>celery, 24 ct</option> <option>cilantro, iceless 1/6 ct</option> <option>cucumbers, select 5#</option> <option>garlic, peeled 1/5# bag</option> <option>grapes, red seedless 5#</option> <option>herbs, arugula 1#</option> </select> </div> </div> <div class="col-md-2"> <br/> <br /> <input type="checkbox" name="summary" value="summary"> summary <input type="checkbox" name="detail" value="detail"> detail </div> <div class="col-md-3"> <br /> <button class="btn btn-primary green marginaboveandbelow" style="padding: 6px 50px 6px 50px; margin-left: -24px;" id="btngetdata" name="btngetdata">submit</button> </div> </div> @* row 6: hr *@ <div class="row"> <div class="col-md-12"> <hr /> </div> </div> @* row 7: copy, excel, csv, , pdf buttons; search label , input text *@ <div class="row"> <div class="col-md-1"> </div> <div class="col-md-6"> <button type="button" class="squishedbutton">copy</button> <button type="button" class="squishedbutton">excel</button> <button type="button" class="squishedbutton">csv</button> <button type="button" class="squishedbutton">pdf</button> </div> <div class="col-md-1 "> <label style="display: inline-block; margin-top: 2px">search:</label> </div> <div class="col-md-1"> <input type="text" style="margin-left: -1cm; margin-right: 2cm;" name="searchinput"> </div> </div> @* row 8: hr *@ <div class="row"> <div class="col-md-12"> <hr /> </div> </div> @* row 9: html table fake summary data *@ <div class="row"> <div class="col-md-12"> <table> <tr> <th>distributor</th> <th>packages</th> <th>price</th> <th>percentage of total</th> <tr> <td>fsa loveland</td> <td>1.0</td> <td>30.74</td> <td>1</td> </tr> <tr> <td>hearn kirkwood</td> <td>10.0</td> <td>309.49</td> <td>10</td> </tr> <tr> <td>paragon</td> <td>100.0</td> <td>3000.27</td> <td>19</td> </tr> <tr> <td>piazza</td> <td>1000.0</td> <td>30012.62</td> <td>28</td> </tr> <tr> <td>produceone cleveland</td> <td>10000.0</td> <td>309871.18</td> <td>42</td> </tr> </table> </div> </div> i want send file (bla.html), created following, uses bootstrap via cdn, , adds custom css classes in style section:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>eservices reporting - summary data</title> <!-- latest compiled , minified css --> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <!-- jquery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- latest compiled javascript --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <!--[if ie]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- inline css (don't tell css-whisperers did this!) --> <style> .jumbotronjr { padding: 12px; margin-bottom: -16px; font-size: 21px; font-weight: 200; line-height: 2.1428571435; color: inherit; background-color: white; } .titletext { font-size: 2.8em; color: darkgreen; font-family: candara, calibri, cambria, serif; margin-left: -32px; } .addltopmargin { margin-top: 8px; } .sectiontext { font-size: 1.5em; font-weight: bold; font-family: candara, calibri, cambria, serif; } .bottommarginbreathingroom { margin-bottom: 2px; } .marginaboveandbelow { margin-top: 15px; margin-bottom: 15px; } .btn.green{ background-color: darkgreen; color: white; } .squishedbutton { margin-left: 0cm; margin-right: -0.1cm; padding: 4px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; } </style> </head> <body> <div class="jumbotronjr"> <div class="col-md-3"> <img src="http://www.proactusa.com/wp-content/themes/proact/images/pa_logo_notag.png" alt="pro*act usa logo"> </div> <div class="col-md-9"> <label class="titletext">eservices reporting</label> </div> </div> <div class="row"> <div class="col-md-12"> <hr /> </div> </div> <div class="row"> <div class="col-md-1"> </div> <div class="col-md-3 addltopmargin"> <label class="sectiontext">select distributors</label> <div> <select class="dropdown bottommarginbreathingroom" id="unitsselect" name="unitsselect"> <option disabled selected value="-1">please choose distributor</option> <option>all distributors</option> <option>fsa loveland</option> <option>hearn kirkwood</option> <option>paragon</option> <option>piazza</option> <option>produceone cleveland</option> </select> </div> </div> <div class="col-md-3 addltopmargin"> <label class="sectiontext">select categories</label> <div> <select class="dropdown bottommarginbreathingroom" id="categoriesselect" name="categoriesselect"> <option disabled selected value="-1">please choose categories</option> <option>all categories</option> <option>fruits</option> <option>vegetables</option> <option>herbs</option> </select> </div> </div> <div class="col-md-5 addltopmargin"> <label class="sectiontext">report date range</label> <div> <input type="date" class="bottommarginbreathingroom" id="daterangefrom1" name="daterangefrom1"> </input> <label> </label> <input type="date" class="bottommarginbreathingroom" id="daterangeto1" name="daterangeto1"> </input> </div> </div> </div> <div class="row"> <div class="col-md-4"> </div> <div class="col-md-3 addltopmargin"> <label class="sectiontext">select classes</label> <div> <select class="dropdown bottommarginbreathingroom" id="customersselect" name="customersselect"> <option disabled selected value="-1">please choose classes</option> <option>all classes</option> <option>apples</option> <option>asparagus</option> <option>avocados</option> <option>bananas</option> <option>beans</option> <option>berries</option> <option>broccoli</option> <option>cabbage</option> <option>carrots</option> <option>celery</option> <option>cilantro</option> <option>cucumbers</option> <option>garlic</option> <option>grapes</option> <option>lettuce</option> <option>peppers</option> <option>potatoes</option> </select> </div> </div> <div class="col-md-5 addltopmargin"> <label class="sectiontext">comparative date range</label> <div> <input type="date" class="bottommarginbreathingroom" id="daterangefrom2" name="daterangefrom2"> </input> <label> </label> <input type="date" class="bottommarginbreathingroom" id="daterangeto2" name="daterangeto2"> </input> </div> </div> </div> <div class="row"> <div class="col-md-4"> </div> <div class="col-md-3 addltopmargin"> <label class="sectiontext">select items</label> <div> <select class="dropdown bottommarginbreathingroom" id="itemssselect" name="itemssselect"> <option disabled selected value="-1">please choose items</option> <option>all items</option> <option>apples, fuji 12/3#</option> <option>apples, granny smith 20 ct</option> <option>asparagus, large 11/1#</option> <option>avocados, hass 48 #1</option> <option>bananas, 10#</option> <option>beans, green trim 2/5# (bags)</option> <option>berries, black 1/6 oz</option> <option>berries, blue 1/6 oz</option> <option>berries, raspberry 3/6 oz</option> <option>berries, strawberry 1# clam</option> <option>broccoli, 14 ct</option> <option>brussel sprouts, 25#</option> <option>cabbage, green 5#</option> <option>cabbage, red 5#</option> <option>celery, 24 ct</option> <option>cilantro, iceless 1/6 ct</option> <option>cucumbers, select 5#</option> <option>garlic, peeled 1/5# bag</option> <option>grapes, red seedless 5#</option> <option>herbs, arugula 1#</option> </select> </div> </div> <div class="col-md-2"> <br/> <br /> <input type="checkbox" name="summary" value="summary"> summary <input type="checkbox" name="detail" value="detail"> detail </div> <div class="col-md-3"> <br /> <button class="btn btn-primary green marginaboveandbelow" style="padding: 6px 50px 6px 50px; margin-left: -24px;" id="btngetdata" name="btngetdata">submit</button> </div> </div> <div class="row"> <div class="col-md-12"> <hr /> </div> </div> <div class="row"> <div class="col-md-1"> </div> <div class="col-md-6"> <button type="button" class="squishedbutton">copy</button> <button type="button" class="squishedbutton">excel</button> <button type="button" class="squishedbutton">csv</button> <button type="button" class="squishedbutton">pdf</button> </div> <div class="col-md-1"> <label style="display: inline-block; margin-top: 2px">search:</label> </div> <div class="col-md-1"> <input type="text" style="margin-left: -1cm; margin-right: 2cm;" name="searchinput"> </div> </div> <div class="row"> <div class="col-md-12"> <hr /> </div> </div> <div class="row"> <div class="col-md-12"> <table> <tr> <th>distributor</th> <th>packages</th> <th>price</th> <th>percentage of total</th> <tr> <td>fsa loveland</td> <td>1.0</td> <td>30.74</td> <td>1</td> </tr> <tr> <td>hearn kirkwood</td> <td>10.0</td> <td>309.49</td> <td>10</td> </tr> <tr> <td>paragon</td> <td>100.0</td> <td>3000.27</td> <td>19</td> </tr> <tr> <td>piazza</td> <td>1000.0</td> <td>30012.62</td> <td>28</td> </tr> <tr> <td>produceone cleveland</td> <td>10000.0</td> <td>309871.18</td> <td>42</td> </tr> </table> </div> </div> </body> </html> ...but quite bit lost in translation. looks this:
so can see, border has disappeared, hrs fainter narcoleptic on lazy boy, , html table complete mess.
but why, , how can fix it? why standalone html page fail render non-uglily, though i'm referencing bootstrap classes page uses?
update
thanks stackingjasoncooper's comment, got table looking better adding css:
table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; } update 2
adding these helped, too:
hr { border: 0; height: 1px; color: navy; background: #333; } .body-content { -webkit-box-shadow: -1px 0 5px 0 #000000; -webkit-box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .25); box-shadow: -1px 0 5px 0 #000000; box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .5); padding-left: 1px; padding-right: 1px; padding-bottom: 15px; } update 3
okay, final thing needed add: _layout.cshtml contains in head section:
<meta name="viewport" content="width=device-width, initial-scale=1.0"> ...and in body:
<div class="container body-content"> @renderbody() </div> ...so added first head (don't know if it's necessary, doesn't hurt anything), , div first 1 inside body section, , looks same now.
why standalone page doesn't match .net page
you're still missing css. example, bootstrap won't set alternating table row colors without calling class, you're not doing. alternating row colors not in styles in <head> either. check .net app's head component or view source in browser of .net page , additional stylesheets.
regarding updates:
viewport tag
viewport meta tag helps scale website different screen sizes, tablets , phones. standard version have, you're saying scale website fit screen.
@renderbody()
think .net control. don't think have effect on html page, don't think need it.
bootstrap awesome
you're using bootstrap framework, has lot of css styles you're writing built in. example, check out bootstrap table styles. they're done , available; have call classes. have fun it!
Comments
Post a Comment