I'm trying to achieve this layout with a report viewer.
The panel on the left contains various options for the report. On the right is the report itself. The report component scrolls if needed but the webpage itself doesn't. Pretty standard asp.net report page. Or so I though.
The layout itself I can do it easily, there's plenty of documentation on how to get this result and they work without the report viewer. However the report viewer isn't cooperating at all and doesn't seem to follow any logic when I add it.
I can make 2 divs be side by side. I can make the report's parent div take all the available height. I cannot get the report viewer to do both and keep working properly. What kind of ungodly CSS do I need to get the layout I want? I don't mind using a table instead of divs but I didn't get any better result with a table.
Most of my attempts end up looking like either of these:
The report shows up where it should be and the width is fine, but I can't get it to take all the available height. If I set an height in pixels it can get taller just fine but I want it to take all the remaining vertical space, no matter the window size and resolution. It always disregard any kind of relative height values.
Or
It takes all the available height, but refuses to stay next to the options.
And so here's the base structure I have. As mentionned before it could use a table instead, I don't mind.
<style type="text/css">
.reportContainer {
}
.reportOptions {
}
.reportView {
}
</style>
<div class="reportContainer">
<div class="optionSidebar">
<table id="reportOptions">
<!--the options -->
</table>
</div>
<div class="reportView">
<rsweb:ReportViewer ID="theReportViewer" runat="server"
ShowPrintButton="true" Visible="true" ShowRefreshButton="false"
KeepSessionAlive="False" ZoomMode="PageWidth"
Width="100%" Height="100%" />
</div>
</div>
How do I get a Microsoft.ReportViewer.WebForms report viewer to both take all the available vertical space and stay next to the options panel without making the page scroll?
Set surrounding div to height 100vh
<div class="reportView" style="height: 100vh;">
<rsweb:ReportViewer ID="theReportViewer" runat="server"
ShowPrintButton="true" Visible="true" ShowRefreshButton="false"
KeepSessionAlive="False" ZoomMode="PageWidth"
Width="100%" Height="100%" />
</div>
Related
I found this piece of code on stackoverflow that would allow me to place a small image over a larger image (in my case a small lock to indicate the movie is unavailable)
<div style="position:relative;display:inline;">
<img src="_images/test.jpg" width="350" />
<div style="position:absolute;bottom:10px;right:10px;">
<img src="_images/lock.png" width="40">
</div>
</div><h3>Air</h3>
it all displays perfectly, but there is a split second where the AIR tag at the bottom displays first (and sometimes the lock image), before it all snaps into place properly. (The main image, the lock in the bottom corner of the image, then the h3 tagged Air at the bottom.)
Does anyone know the cause of this, and how one might fix it?
Thanks
One alternative is to place the src content in a data uri scheme. This will cause the images to load with the content. When you set src to a uri resource, the browser has to go out and get it. This causes the delay you see.
http://en.wikipedia.org/wiki/Data_URI_scheme
I'm trying to create a simple rollover with an image to show a tip or info box/bubble.
I have a div wrapper holding the image src, and css to style/position the wrapper and child.
I just can't figure out how to make the img src interactive.
Here's the html:
<div class="wrapper">
<img src="images/gallery/wheat3.png" width="250" height="250" data-stellar-ratio="3.5" data-stellar-vertical-offset="200">
</div>
I want to create a rollover with the image "wheat3.png" to show and info box at the side.
Here's the test link as well:
http://hatfielddesign.com/witbier_test/
Thanks.
Viewing the source code of the test link you've shown, seems like they uses Stellar.js to implement this effect. Take a read at the docs, they may help you ;)
I have an accordion with 2 pane. The thing is if I set it to autosize="Limit" and selectedindex="0", when load the first time, in IE 9, it works perfectly fine but in firefox/chrome, the size of the content pane is smaller than the content. But if I close and open back the pane, it will work fine.
If I set it to selectedindex="-1", in IE9 it will work fine where all the pane will collapse, however in chrome/firefox, It fully open the first pane.
How can I make it to fully open in all browser. I've tried to set the autosize="Fill", but the result is same as the above.
Here is the code
<ajaxToolkit:Accordion id="Accordion" runat="server" Height="100%" Width="100%" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent" AutoSize="Fill" RequireOpenedPane="true">
<Panes>
<ajaxToolkit:AccordionPane ID="accordionPaneReport" runat="server">
<Header>Reports</Header>
<Content>
//some treeview content
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="accordionPanePcGroup" runat="server" Visible="false">
<Header>PC Groups</Header>
<Content>
//some treeview content
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
Update:
I tried to debug using firebug. If I put padding-bottom some value to the accordion content css, it will make the content pane longer than the real content itself but it's not a real fix, i guess..
I would remove the Height="100%" and see if your problem still exist. Also try a fixed height and see how it behaves. Not all browsers render height the same way.
I already found a solution for my own question.
It behave that way due to the accordion css got run before its div container css. So when first load, the accordion thought the div space was not enough, hence, the pane appear smaller than what it should.
What I did was to move the div css on top of the accordion css where the height of the div is 100%.
In IE, seems like it read the whole thing than only load it. But in other browser, seems like it loads the stuff one by one according to its order. Thats why it was working fine in IE only.
sorry I have to tick this as the answer..
Hai ,
I am using an iframe for showing a page in my website. i want to hide that frame using a close button in the content page( the page which is showing in the frame)
How to do this? use jQuery
See this image
You can use a client side script to make the iframe invisible. Lets consider the IFrame is inside a div <div id="iFrameContainer"><iframe></iframe></div>. In such a case you can fire a javascript on click of the button and set something like document.getElementById("iFrameContainer").visible=false; This should work for you.
have your iframe in your div tag. Then execute the following statement for hiding or displaying respectively when button get onclick event.
document.getElementById('iframeid').style.display='none'; // hiding
document.getElementById('ifrmaeid').style.display='block'; // displaying
As iframe is html control it will pruduce an erroe while running it at the sever...
To make the iframe hide or show at particular condition ... we can use apply simple trick.. take a div element which will wrap the iframe element.. eg
<div id="vidPreview" runat="server" visible="false">
<iframe src="demo.aspx" width="400" height="200" frameborder="0" style= "background-color:Black;"></iframe>
</div>
When u want to make visible just make that div's visibility property=true
in above eg make...vidPreview=true whenever i want to display iframe..
I've got a tree view that can be anywhere from 1 level deep to nearly 6. Each node can be just a few letters or a couple of words totalling up to 20-30 characters.
How do I find the largest width of one of the node's text and add its depth offset to set the width of the treeview so it doesn't go through my borders?
If I need to add more info, let me know.
Edit:
Here's what I've currently got. I need to set the width of the panelLocations on page load so the tree view can load correctly inside of it.
<asp:Panel ID="panelLocations" runat="server" style="position:absolute;border:solid 1px #E0E0E0;padding:10px 5px 5px 10px;background-color:#F7F7F7;width:350px;display:none;" >
Search: <asp:TextBox ID="textboxLocationSearch" runat="server" AutoCompleteType="disabled" ToolTip="To find a store, type the 4 digit store number (e.g. 0001)" />
<asp:Button ID="buttonFindLocation" runat="server" Text="Find" OnClick="buttonFindLocation_Click" OnClientClick="LocationSelected();" style="width:60px;"/>
<input type="button" value="Cancel" onclick="HideLocations();" style="width:60px;"/>
<hr />
<asp:TreeView ID="TreeViewLocations" runat="server" OnSelectedNodeChanged="TreeViewLocations_SelectedNodeChanged" NodeIndent="10"></asp:TreeView>
</asp:Panel>
Since web browsers will render the content differently, your only option to find out the real width of the content is to use javascript to traverse the DOM elements and measure the width.
The cleanest and simplest solution is to specify a suitably large width for the container element, then specify a value of overflow:scroll to allow extra-wide content to be scrolled. It's pretty ugly to see scroll bars around elements in the page, but when you're using a tree-view structure, ugly is something you live with.
You can take advantage of the MeasureText method, in Graphics namespace. Basically it gives you back the size of a string supposed to be rendered in a certain font and size. Given a constant width for every intentation level (you know, tree lines, buttons/icons: you can measure it statically), you can assume needed width will be the largest of:
measuredText + (level * indentationWidth)
HTH!