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.
Related
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.
I'm using jQueryUI Tabs inside a jQueryUI Dialog box. The content in each of the tab panels can be quite large -- for example there can be a table with hundreds of rows inside each individual tab panel. So scrollbars are required to navigate the content.
By default, the dialog panel displays its own scrollbar -- which is not exactly what I want. This scrollbar causes the navigation tabs themselves to move up and out of view. What I'd prefer is for each tab panel to display its own scrollbar if necessary but to leave the navigation tabs visible. I've tried setting "overflow:hidden" for the dialog panel, and then "overflow:auto" for the individual tab panels (see below). But then the tab panels are not getting scrollbars even when the content requires it.
Below is a (reduced) test case that shows the problem -- including my attempt to use overflow styles to solve the problem. Replace "Big content..." with something that causes scrollbars to be required and you'll see it.
Hope that's clear enough. Any ideas on how to solve this problem? Many thanks...
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#dialog").dialog({height:300});
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="dialog" style="overflow:hidden;">
<div id="tabs">
<ul>
<li>tab-1</li>
<li>tab-2</li>
</ul>
<div id="tab-1" style="overflow:auto;">Big content...</div>
<div id="tab-2" style="overflow:auto;">Big content...</div>
</div>
</div>
</body>
</html>
You could limit the height of each div which contains your 'content' ie:
height:100px;
overflow:auto;
Demo: http://jsfiddle.net/AeXNP/
Which makes everything very simple.
Edit: The harder part comes when (as you requested below) that the content resizes based on the user resizing the dialog. In involves a lot more css... To use overflow in your case, you require a height of the div. As the height is changing all the time, you don't know what height it will be. Therefore you need to manually set a margins and padding so you can set the height to 'auto'. So the css for the self-expanding tab contents is:
.fixedSizedTab {
overflow:auto;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:50px;
margin-bottom:10px;
margin-right:0px;
margin-left:0px;
}
Demo: http://jsfiddle.net/AeXNP/2/
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.