In Razor for Asp.Net Whenever I create a chart it automatically is full screen and takes up the full view - asp.net

I've tried making the size of the chart smaller but it still takes up the full screen. I've also tried putting it in a div and setting the height and width that way.`
<div style="height=400; width=600;">
#{
var MyChart = new Chart(600, 400)
.AddTitle("File Count")
.AddSeries(
name: "File Count",
chartType: "bar",
xValue: descList.ToArray(),
yValues: intList.ToArray());
MyChart.Write();
}
</div>
`

I would do this by creating a CSS class which sets the width and height of the child tag that gets generated by the Chart.Write() method.
CSS
.chart-container img {
width: 600px;
height: 400px;
}
HTML
<div class="chart-container">
#{
var MyChart = new Chart(600, 400)
.AddTitle("File Count")
.AddSeries(
name: "File Count",
chartType: "bar",
xValue: descList.ToArray(),
yValues: intList.ToArray());
MyChart.Write();
}
</div>

I know this question is really old, but I just struggled with the same issue myself.
For other newbies like myself, this might be worth something.
The MyChart.Write() basically produces an image and returns that to your browser regardles of the surrounding razor code.
You can also see the title of your browser shows something like "Image (400x600)".
The browser is displaying an image, not a web page.
In order to show the rendered chart as part of a web page, you have to build your web page and place an <img> tag where the source of the image is a separate view like rendermage.cshtml where you place your code from the question.
I got my info from here: Displaying Charts Inside a Web Page

Related

issue in canvasjs chart on page load?

My canvasjs chart floats right then on inspection gets back to its original position. What might be the issue?
I have 2 dynamic canvasjs charts in my site inside to tab-body. The 1st chart is displaying fine but when I click on the 2nd tab the chart inside it floats left and then after inspection gets to its original position. All of the data is fine just want to know the js or css issue.
i did the php like this data are all fine and are working good.
<div class="charcon_n" id="chartContainer_n<?php echo $i; ?>" style="height: 350px; width: 100%;" data-point='<?php echo json_encode($data_n, JSON_NUMERIC_CHECK); ?>'></div>
Whenever a tab is switched, the render method of each of the chart in the activated tab should be called so that chart can take the actual dimensions of its container.
$("#tabs").tabs({
create: function (event, ui) {
//Render Charts after tabs have been created.
$("#chartContainer1").CanvasJSChart(options1);
$("#chartContainer2").CanvasJSChart(options2);
},
activate: function (event, ui) {
//Updates the chart to its container size if it has changed.
ui.newPanel.children().first().CanvasJSChart().render();
}
});
Please take a look at jQuery gallery example.

Bootstrap popover dynamic size

I'm building a dynamic menu system for Composite C1 using Bootstrap 3.3.1 popovers. The dynamic content is working fine, but I can't seem to get the popover width to re-size correctly.
I can set an absolute size with .popover-menu-markup .popover{ width: whatever}, but I want the width to be based on the content. If I set width: auto, the popover is based on the popover-title, not the popover-content.
Any ideas?
EDIT
Sorry, the JSFiddle is here: http://jsfiddle.net/rebeccamarye/x075bm6x/2/
The example shows a single paragraph as the content, but in the actual page there's a bunch of divs with {display: inline-block}, but I think this shows the problem...the popover needs to expand to slightly less than the width of the page.
UPDATE:
http://jsfiddle.net/x075bm6x/7/
JQ
$('.popover-markup>.trigger').on('shown.bs.popover',function(e){
var $link =$(this);
var winW=$(window).width();
var poL=$link.offset().left+$link.width();
var newW=winW-poL-60;
var poId=$link.attr('aria-describedby');
var $po=$('#'+poId);
console.log(poId+': '+winW+' L: '+poL+' > '+newW);
//$po.width(newW);
$po.find('.popover-content').width(newW)
});
CSS:
.popover{width:auto!important; max-width: none}

Basic Header - Center - Footer Layout Vaadin

I've looked everywhere for an answer for this particular question, but found nothing useful. I'm trying to create a really simple layout in Vaadin that's common on many websites (including this one). I've included a diagram with this question. Basically need a footer to stay placed after the main section at all times, if the main section is large a scrollbar will appear and allow me to scroll to the bottom. If the content is small the footer will still come after the main section normally. If the browser window is small the Footer will NOT overlap the main section (this is where I'm stuck). I've tried so many approaches but nothing seems to work 100%... I would like to avoid messing with CSS files (if I can) and just use Java...
Thank you!
https://vaadin.com/documents/portlet_file_entry/10187/layout.JPG/7a978ae7-f926-472d-b1a1-d0aa3f2c3536
Try the BorderLayout addon.
It should do what you need,
just make sure put a correct component in the main part, so that scrollbars are shown when needed
https://vaadin.com/directory#addon/borderlayout:vaadin
For example, (Note the comment in code, I dont know if you want an absolute or fixed layout)
public class BoxApp extends UI {
HorizontalLayout head = new HorizontalLayout();
Panel main = new Panel();
HorizontalLayout footer = new HorizontalLayout();
#Override
protected void init(VaadinRequest request) {
main.setStyleName(Reindeer.PANEL_LIGHT);
head.addComponent(new Label("head"));
main.setContent(new Label("<pre>MAIN START\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\\n" +
"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n" +
"\n\n\n\n\n\n\n\n\nMAIN END</pre>", ContentMode.HTML));
footer.addComponent(new Label("footer"));
VerticalLayout form = new VerticalLayout();
form.setMargin(false);
form.setSpacing(false);
head.setHeight(50, Unit.PIXELS);
form.addComponent(head);
form.setExpandRatio(head, 0);
main.setHeight(100, Unit.PERCENTAGE);
form.addComponent(main);
form.setExpandRatio(main, 10);
footer.setHeight(50, Unit.PIXELS);
form.addComponent(footer);
form.setExpandRatio(footer, 0);
// Drop following line if you don't want a fixed layout
form.setSizeFull();
this.setContent(form);
}
}
Using the JDAL BoxFormBuilder (I wrote it) the syntax for building the root component is a little clearer
BoxFormBuilder fb = new BoxFormBuilder();
fb.setDefaultWidth(BoxFormBuilder.SIZE_FULL);
fb.row(50); // new row for head
fb.add(head);
fb.row(BoxFormBuilder.SIZE_FULL); // new row for main, full height
fb.add(main);
fb.row(50); // new row for footer
fb.add(footer);
Component form = fb.getForm(); // Build the component.
I like using absolute positions for this. Here is JSFIDDLE: http://jsfiddle.net/upau942y/ You can use margin-top to create a gap between your footer and content of the website.
<footer>
<div class="footer-content">
<div class="footer-left">
<p>some content</p>
<p>Thank you for viewing the site!</p>
</div>
</div>
</footer>
Footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background: #000;
margin-top: 2rem;
}
This should do it:
mainVLayout.setSizeFull();
mainVLayout.addComponent(headerComponent);
mainVLayout.addComponent(contentPanel);
mainVLayout.addComponent(footerComponent);
mainVLayout.setExpandRatio(contentPanel, 1);//this is the key.
I have reworked my code and given up on the idea of using a tabsheet with dynamic content and a footer. Instead I'm using a simple menu and I've flattened my component hierarchy significantly, everything seems to work as expected now.

How to create vertical "pages" where each page is height of the viewport using Bootstrap and Angular?

I am using Angular 1.3 and Bootstrap 3.2. I want to create a single webpage that does exactly this: http://lewisking.net. i.e. I want to be able to have vertically stacked divs that are the height of the viewport. I'm thinking of making a directive that watches the browser height/width and updates the style accordingly.
Any other ideas? Any tips for implementing with a directive?
This is the perfect use case for vh and vw.
Simply set:
.wrapper {
width: 100vw;
height: 100vh;
}
And it will work out the box. If you have to support any old browsers you can easily do a quick JS fall back.
CSS will get you part of the way, but you will need JS to update your 100% height on resize
and scrollTop points etc. And you will also need a way to animate the scroll anyway. This isn't exactly what I would do but it explains the basic idea.
$($window).on('resize', function() {
$scope.winWidth = $(window).width();
$scope.winHeight = $(window).height();
});
...
$scope.getSectionStyle = function(){
return {width:$scope.winWidth, height:$scope.winHeight} ;
}
...
<section id="sectionId" ng-style="getSectionStyle()"
To animate the scroll I just use jQuery like. If you're a angular purist there is $achorScoll but it has no animating at this point so you need to do some extra factory or directive like https://github.com/durated/angular-scroll/
$rootScope.scrollTo = function(_to){
$("html, body").delay(300).animate({scrollTop:_to},{ easing: "easeOutExpo"}, 2000);
}
To get _to you just find the elements offset().top something like :
var offset = $('#sectionId').offset();
$rootScope.scrollTo(offset.top);

Bootstrap modal at top of iframe regardless of scroll position. How do I position it on screen?

When embedding a Bootstrap app in an iframe, modal dialogs always open at the top of the iframe, not the top of the screen. As an example, go to http://getbootstrap.com/javascript/ and open an example modal on the page. Then using the sample code below which places the same bootstrap page in an iframe, find a modal and open it:
<html>
<head>
</head>
<body>
<table width="100%">
<tr><td colspan="2" style="height:80px;background-color:red;vertical-align:top">Here's some header content I don't control</td></tr>
<tr><td style="width:230px;height:10080px;background-color:red;vertical-align:top">Here's some sidebar content I don't control either</td>
<td valign="top">
<iframe width="100%" height="10000px"
scrolling="no" src="http://getbootstrap.com/javascript/">
</iframe>
</td>
</tr>
</table>
</body>
</html>
Demo in fiddle
How do I go about positioning the modal on the screen in this scenario?
UPDATE: Unfortunately, my iFrame cannot fill the screen, nor can I make it fixed since it needs to blend into the rest of the page and the page itself has enough content to scroll. This is not my design and I ultimately intend to rework the whole thing, but this is what I have to work around for now. As a temporary option, I'm using javascript to tell the iframe parent to scroll to the top where the modal dialog pops up. While this is acceptable, this isn't the desired behavior.
I'm using angularjs and the ui-bootstrap library in my code but as you can see above, it's a bootstrap issue.
If your iframe has the same document.domain as the parent window or it is a sub domain, you can use the code below inside the iframe:
$('#myModal').on('show.bs.modal', function (e) {
if (window.top.document.querySelector('iframe')) {
$('#myModal').css('top', window.top.scrollY); //set modal position
}
});
show.bs.modal will fire after you call $('#myModal').show()
window.top.scrollY will get the scrollY position from the parent window
In case your document.domain differs from the parent, you can hack it getting the onmousedown position inside the iframe. For example:
$('#htmlElement').on('mousedown', function (event) {
event.preventDefault();
$('#myModal').data('y', event.pageY); // store the mouseY position
$('#myModal').modal('show');
});
$('#myModal').on('show.bs.modal', function (e) {
var y = $('#myModal').data('y'); // gets the mouseY position
$('#myModal').css('top', y);
});
Quite old question but I don't see the solution/workaround I've found. It might be helpful for someone in the future.
I had the same issue - my iFrame doesn't fill the entire screen, it displays bootstrap's modal and it is loading content from different domain than the parent page.
TL;DR
Use window.postMessage() API - Documentation here. for communication between parent and iframe (cross-domain)
pass message with currentScrollPosition and Y position of your iframe
Reveive message and update modal's padding from the top
In my case the workaround was to use window.postMessage() API - Documentation here.
It requires to add some extra code to the parent and handle message in an iFrame.
You can add EventListener and listen to 'scroll' event. Each time the event handling function is invoked you can get currentScrollPosition like document.scrollingElement.scrollTop.
Keep in mind that your iframe can have some margin from the top in the parent page so you should also get its 'offset'.
After that you can post these two values to your iframe e.g. ncp_iframe.contentWindow.postMessage(message, '*');
Note that the message has to be a String value
After that in your iFrame you need to add EventListener and listen to 'message' event.
The event handling function will pass your 'message' in event.data property. Having that you can update modal padding. (Looks much better if you don't use animations e.g. fade, in classes);
Quick Example:
Parent:
window.addEventListener('scroll', function(event){
var myIframe = document.querySelector('#myIframe');
var topOffset = myIframe.getBoundingClientRect().top + window.scrollY;
var currentScroll = document.scrollingElement.scrollTop;
myIframe.contentWindow.postMessage(topOffset + ':' + currentScroll, '*');
});
iFrame:
window.addEventListener('message', function(event) {
var messageContent = event.data.split(':');
var topOffset = messageContent[0];
var currentScroll = messageContent[1];
//calculate padding value and update the modal top-padding
}, false);
This is a bug in most browsers (IE appears fine) where the elements are fixed to the iframe, not the window. Typically, if you need something to be relative to the main document, it has to be in the main document.
A workaround is to wrap your iframe in a fixed position div that takes up the whole width of the screen and then maximize the iframe within that. This appears to resolve the issue
HTML:
<div class="fixframe">
<iframe src="http://getbootstrap.com/javascript/"></iframe>
</div>
CSS:
.fixframe {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
.fixframe iframe {
height: 100%;
width: 100%;
}
Working Demo in fiddle
See Also:
position:fixed inside of an iframe
iframe with a css fixed position : possible?
position fixed div in iframe not working
It is because the class .modal has position: fixed attribute. Try position: relative instead.

Resources