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');
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:
<x-dialog><p>Whatever</p></x-dialog>
The <p>Whatever</p> stuff is of course passed into the x-dialog element's <content></content> tags:
<polymer-element name="x-dialog">
<template>
<link rel="stylesheet" href="dialog.css">
<core-overlay id="overlay" layered backdrop opened="{{opened}}" autoCloseDisabled="{{autoCloseDisabled}}" transition="core-transition-center">
<content></content>
</core-overlay>
</template>
<script type="application/dart" src="dialog.dart"></script>
</polymer-element>
How and where do I style my <p>, i.e. the content passed to my element? Note that this content is itself in a child element, core-overlay in this case, but I don't think that made a difference (it was the same result when I moved it out of core-overlay).
The style guide at http://www.polymer-project.org/articles/styling-elements.html didn't get me to a solution (I'm assuming Dart is up to par w/ this JS guide).
If you want to add the style rules to your x-dialog element the related section in the styling guide are Styling distributed nodes
add this to your dialog.css
content::content p {
background-color: blue;
}
Otherwise you can style it like any child element of normal DOM elements
x-dialog p {
background-color: blue;
}
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.
Is it possible to make the suggestions of autocomplete (jQueryUI) get out one iframe, having the same behaviour of "select" element? I make one example:
http://jsbin.com/ehidef/1
As a matter of fact, it can be done, though some styling will be mandatory. jQueryUI accepts an element to append the options to, and you can pass the parent window as that element. An example:
main window:
<html>
<head></head>
<body>
<iframe src="iframe.html"></iframe>
</body>
</html>
iframe.html
<html>
<head>
<!-- include jQuery and jQuery UI and the like -->
<script type="text/javascript">
jQuery(function($){
// This will take parent frame if in iframe, own body elsehow
var el=top.document.body
// Instructs jQuery UI to show things on that previous element
$('input').autocomplete({appendTo:el});
});
</script>
</head>
<body>
<input type="text"/>
</body>
</html>
The whole example is missing all things not relevant to explainig the point, so it's not functional. Addapt as needed and add some suggar.
As for the styling i was refering before, you will have to give elements a position and style, as 1) position relative to input position is irrelevant on parent window and 2) parent doesn't need to have jqueryui stylesheets loaded, although you can load them dinamically from inside the iframe with a similar technique.
IMPORTANT:
This will only work if both, parent and child are in the same domain [see: SOP]
UPDATE
After finishing doing this same thing, i came up with this solution for styling and position:
var files=[ // UI styles to be loaded on top frame
"css/ui-lightness/jquery-ui-1.10.3.custom.css",
"css/ui-lightness/custom.css"
]
// Create link tag and append to top frame head
for (var a in files) {
var style=$("<link/>", {
rel: "stylesheet",
type: "text/css",
href: files[a]
});
$(top.document).find('head').append(style);
}
// As it turns out i had many iframes, so this will get the right one
var parentIframe=$(el).find('iframe').filter(function(){
return window.frameElement==this
});
$('input').each(function(){ // Cicle inputs to use with ui autocomplete
// set position to left + input offset 2 is a fix for borders on input
var pos= "left+"+($(this).offset().left+2)+
// and to top + input position + height to have it on the bottom
" top+"+($(this).offset().top+$(this).outerHeight()+1);
// Autocomplete
$(this).autocomplete({
appendTo:top.document.body, // put it on top window's body
position:{
at: pos, // at calculated position
of:parentIframe // from parent iframe
}
})
});
Once again, there may be voids, so fill up with relevant code at will
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/