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.
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 a couple long drop downs, so I set a height so I would get scroll bars. I am using the jquery selectmenu dropdowns. All the dropdowns are ignoring the height, even though I can see it in the 'developer' window (f12) and is not overwritten. I have tried to apply it a couple ways:
CSS:
.ddl
{
width: 310px;
height: 200px;
}
or
.ddl
{
width: 310px;
max-height: 200px;
}
or
.ddl
{
width: 310px;
height: 200px;
overflow-y: auto;
overflow-x: hidden;
}
I am sure I have all the scripts I need and in the correct order, because all the other jquery ui stuff is working find, even on the dropdowns. It is just the height is being ignored.
All the dropdowns have the class of "ddl", and this is in the included footer for all pages:
$(".ddl").selectmenu();
Here is the list (in order) of the included scripts:
<link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/custom.css" rel="stylesheet"/>
<link href="/Content/h-menu.css" rel="stylesheet"/>
<link href="/Content/themes/skps/jquery-ui.css" rel="stylesheet"/>
<link href="/Content/themes/skps/jquery-ui.structure.css" rel="stylesheet"/>
<link href="/Content/themes/skps/jquery-ui.theme.css" rel="stylesheet"/>
<link href="/Content/themes/grid/ui.jqgrid.css" rel="stylesheet"/>
<script src="/Scripts/jquery-1.11.1.js"></script>
<script src="/Scripts/jquery-ui-1.11.1.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/jquery.jqGrid.src.js"></script>
<script src="/Scripts/grid.locale-en.js"></script>
<script src="/Scripts/modernizr-2.6.2.js"></script>
If it matters, this is an ASP MVC4 app. Here is the JSFiddle. This is my first fiddle, so not sure if I did it right. http://jsfiddle.net/battlfrog/jmhwxgom/
I am attempting to get it to work like this: http://api.jqueryui.com/selectmenu/#method-menuWidget
I know this is a bit old but I've found out how to do this using CSS. You can either edit the jquery-ui.structure.css file directly or apply this in the .css file for your page. The following is used when editing the jquery-ui.structure.css file. (There is a lot more you can do with this, but this is the basic change required to get the effect you want.)
.ui-selectmenu-menu .ui-menu {
overflow-y: auto;
overflow-x: hidden;
padding-bottom: 1px;
padding-right: 10px;
width: auto !important;
max-height: 8.8em;}
Note that the overflow property has been deleted and overflow-y: auto has
been added instead.
Width must be added with !important.
You can use height instead of max-height and then set it to whatever
height you wish, but doing so will cause all select menus to
have the same height, even if it has one or two options (and thus
creating empty space at the bottom of the option list. Using max-height will ensure that the scrollbar is only used when the list length exceeds the height instead.
The above max-height will give you 5 options shown in your list when your font-size is set to 0.9em. I leave it up to you to do the appropriate calculations to get your preferred number of options shown.
The padding-right property is required for browsers other than MSIE. While I've found that MSIE adjusts the width of the list properly to accommodate the text for the option, Firefox, for example, does not. Adding the padding pushes the right of the edge away from the text. Unfortunately it has the unpleasant effect of doing it with MSIE as well, causing a large empty area to the right of the option text. A bit of MSIE CSS hacking here would clear up the problem, but I just want to address the core issue.
If you wish this to be global edit the jquery-ui.structure.css file. I find this a better solution because I can then fine tune the height per page by applying a different max-height property for each affected page (I convert the css file into Sass myself, makes things a lot easier).
In my custom element, I used the below code to create table:
TableElement table = new TableElement(); var tBody;
tBody = table.createTBody();
table.style.width='100%';
tBody.addRow()..addCell().nodes.add(update)
..style.color='green'
..addCell().text='hi'..style.color='orange'
..addCell().nodes.add(ueta);
tBody.addRow()..addCell().nodes.add(udate)..style.border='solid'..style.color='blue'..addCell().nodes.add(ustatus);
The data had been presented correctly.
I want to style - in the first row, the the cell of 'hi' by green, but it failed, and styled by orange.
I want to make border and background colors for the cells, but could not know how to do so.
any thought?
thanks
Instead of adding style to individual elements in Dart, use cascading style sheets (CSS)
In your html:
<html>
<head>
<script async type="application/dart" src="my_dart_app.dart"></script>
<script async src="packages/browser/dart.js"></script>
<link rel='stylesheet' href='my_dart_app.css'/>
</head>
...
...
Then write the styles you want in my_dart_app.css. There are plenty of tutorials to be found. Start with http://www.w3schools.com/css/default.asp perhaps.
Note that when creating HTML elements you can add classes easily:
TableElement table = new TableElement();
..classes.add('my_table_class');
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 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.