I was wondering how should I add favicon on MVC View?
Where do I need to add the code:
<link rel="icon" href="#Url.Content("~/content/favicon.ico")"/>
Add it in layout view(inside head section)
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.
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 defined a layout, myLayout that has a left and center content.
I apply my layout to all pages and the layout is composed of a series of other components (Another layout, templates ...)
In a page A, there is a component part of the layout that should not be displayed in the page. To solve that i had two solutions
define a new layout only for that page
I didn't like to create a whole layout just for one page,
define a meta tag with a specific value in the page A and I used the pageProperty to check if the value is set and hide or show the component accordingly
The meta tag in page A index.gsp
<meta name="foo" content="myContent"/>
And myLayout
<g:if test="${pageProperty(name:'meta.foo')!='myContent'}">
// Render template
</g:if>
is this a good way to deal with this problem ? is there a better way ?
ken
my vote is for pageProperty