I have a Partial view in a JQuery dialog box that has button links on the side, and text links at the top, and a grid underneath.
I would like to have one of the links at the top be a "Print" link, that prints out the grid an nothing else.
JavaScript's window.print() prints the entire page. How can I print just the grid? Is there someway to tell a print method to "Just print the contents of this div"?
If I need to create a separate "Printable grid" page, how do I avoid printing the "print button" that I assume needs to be on the page?
Thanks!
The canonical way to avoid printing anything is to add a print stylesheet that sets elements that should not print to display: none.
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Inside print.css, you can redefine existing CSS styles to display: none and you can add a .DoNotPrint class that you can apply to anything that you don't want to print.
.DoNotPrint
{
display: none;
}
This really depends entirely on your implementation but I find the easiest way to achieve this is to include a print specific style sheet like this:
<link rel="stylesheet" href="URL to your print.css" type="text/css" media="print" />
That stylesheet would hide everything but the table and would require nothing special besides addressing which elements to show and hide.
After further consideration, you could also do the following:
Create a separate page that only includes the partial that has the grid. And when the user clicks the print button, you open the new window and window.print() on load.
Related
I am calling bootstrap.alert box from my cshtml (asp.net mvc) and passing it a string that is actually a table with header and a row of data. The issue is that the row length is long due to many columns and when the alert is displayed the content passed out from the dialog. These can be viewed using keyboard <- button that scroll the dialog and content are visible. My query is why not dialog box width is increased based on content or at least a scrollbar is displayed inside the alert box so that user can scroll and see the content. Any idea.
The code is simple like below
var tblRowDiv = "<div class='row'><table class='table table-bordered input-block-level'><thead><tr><th>" + ...."</td></tr></tbody></table></div>";
string rMsg = "'" + (((#HttpUtility.HtmlDecode(tblRowDiv))+ "'";
<a onclick="bootbox.alert(#rMsg);">#Html.DisplayFor(modelItem => item.TEST) </a>;
The screenshot for issue is like below:
This is setup to call on some event to show. Can a scrollbar be added instead? or atleast the dialog size will set to maximum without any specific css for it.
for your css
.modal-dialog { width: 100%; }
.modal-body {overflow-x: scroll;}
I did some changes as the my css file over top of other css files like below "
<link href="#Url.Content("~/Content/my_table.css")" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="~/Content/Bootstrap/css/bootstrap.min.css" type="text/css" />
<script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
<script src="~/Scripts/MyOtherTable.js" type="text/javascript"></script>
<link href="#Url.Content("~/Content/dataTables.scroller.css")" rel="stylesheet" type="text/css" />
I added your two lines in my existing css file my_table.css and found no difference as stated above. Finally I created another css file with just the two lines above and added it in the last of above and viola, it worked..
Thanks Mindeater.
i have two separate pages, index.html and profile.html, and i want to href index.html to profile.html with slide animation so i tried,
$.mobile.changePage("/profile.html" , {
transition: "slideUp",
reloadPage: true });
in index.html. i guess this code does not execute or say update head of profile.html and some how reloadPage not working, it is just targeting body tag. is something wrong or how can i reload whole profile page with slide animation?
you are not loading a page "with slide animation". The slide animation is a CSS effect you can add to any div element you want by adding the class(es) JQM is using (try slide in).
So when JQM is loading a page it fetches the content of the first <div data-role="page"> it finds on the page and "throws away" everything else.
The new "page" is then positioned using CSS depending on the transition you set, so normally pos:absolute; top:0; right: screen-width. Then the classes are added and the page slides in.
Since JQM does not parse anything outside of the page, your profile <head> is disregarded. To fix, all scripts should be available on all pages, because you never know where the user starts and you need to make sure everything you need is on board.
I am working on a MVC application which have its own CSS and it works perfectly. My problem is that I want to use bootstrap popup at one of my view. When I add Bootstap CSS to layout View it conflicts and disturbs my orignal CSS. Now can some one please tell me how to include Bootstrap CSS at just that view where I require it. Any Example will be helpful thanks
If you don't want the original CSS in that particular View, this would help,
The CSS file is referenced in the _Layout.cshtml file. So in order to reference your new CSS file instead of the original CSS, you have to explicitly set Layout of that View to null at the start of the page (as the page has the link to _Layout.cshtml by default) and add a link to your CSS, like
#{
Layout = null;
}
<link href="#Url.Content("~/MYNEWCSS.css")" rel="stylesheet" type="text/css" />
But the downside is, as you can expect, the _Layout.cshtml page's content won't be available in that particular page.
Let me know if it helps. Cheers.
Use below line after bootstrap.css
<link href="#Url.Content("~/MYNEWCSS.css")" rel="stylesheet" type="text/css" />
I'm looking for a solution that doesn't require JavaScript, jQuery or anything too advanced; mostly HTML/CSS as those are what I am restricted to using.
The idea I have is a layout with two smaller div classes within one div ID. Each box have their own content and are placed side by side. What I'm trying to accomplish is to create an anchor link within one div that changes its content to something else.
e.g. box 1 on default displays "abc" as its content while box 2 displays "def". When you click on an anchor link in box 1, the content would then change to 123-- without affecting what's in box 2 or moving it down with the anchor.
Hopefully that makes sense.
There's no code to edit/work off of so any help would be appreciated.
You can use the :target selector to hide both div, and show element with the ID in the URL hash:
div.MyBox {
display: none;
}
div.MyBox:target {
display: block;
}
Clicking an <a> tag pointing to #someId would then show that element.
I have a screen page which contains tables and special formatting. I want to set different formatting such as column width, height etc. for print page and screen page.
How should I set different formatting for screen and print page?
You can use the print media type to specify a print-specific stylesheet:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Alternatively, you can add the print stylesheet inline using #media:
#media print {
.title-column { width: 300px; }
}
According to this source, browser support should not be a problem.