I add a user control dynamically (which only contains a table) to the Panel:
<asp:Panel ID="panel" runat="server"
ScrollBars="Horizontal" Width="160" Direction="LeftToRight">
</asp:Panel>
when I add e.g. two user controls, they have vertical direction. Why ? I want them set from left to right (horizontally)
The Direction property only sets whether the text is displayed left-to-right or right-to-left. It's a usability feature.
What you'll want to do is use CSS to perform what you need. Look into float: right;
Related
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>
I have inherited an .ascx control that consists of an asp:repeater construct containing a HeaderTemplate, an ItemTemplate and an empty FooterTemplate.
Both the header and the item templates are linked to a data source.
My question is simply this, I want to have a vertical slider applied to the ItemTemplate such that I can scroll up and down the items contained within whilst the HeaderTemplate remains static.
I have tried using an asp:Panel within the ItemTemplate but this doesn't render the row within the template.
I've resorted to encapsulating the whole of the asp:Repeater within an asp:Panel that specifies a vertical scrollbar. This works but scrolls the header out of view if the number of rows in the ItemTemplate is large.
If anyone can help and suggest a way forward I would be most grateful.
It can be done in a simple manner with some CSS tricks e.g.
Repeater Item Template Markup
<HeaderTemplate>
<div class="template">
</HeaderTemplate>
<ItemTemplate>
Your Stuff
</ItemTemplate>
<FooterTemplate>
</div>
</FooterTemplate>
CSS Defined for "template"
.template {
height: 200px;
overflow-y: scroll;
}
Hope this will help !!
I have an ASP.Net GridView with properties like so:
<asp:GridView ID="grdOrderEntry" runat="server" AutoGenerateColumns="false" ShowFooter="True"
DataKeyNames="oid" Height="100%">
When I view the control in the browser, there is a lot of white space after the control. When viewing the HTML, the div that is produced by the GridView is much larger than the control, causing the whitespace. Is there a property I can set on the GridView to make the div as small as possible?
If you set the CssClass property you will be able to create some css to address the problem. I would recommend using a live css editor so you can mess around with it until you get the desired effect.
I suspect this is being caused by your Height="100%" attribute, remove that, and it should just stretch around the table it contains (unless there is some css other style added to it as well).
i have a filter panel with 5-6 combo boxes ajax control tool kit..
i want this filter panel to be visible false by default.. and toggle it(show/hide) on client click using java script
however when i have my filter panel as visible = false runat=server java script does not get the object
and if i do code behind.. filterpanel.attributes.add("style",display:none)
filterpanel.attributes.add("style",visibilty:hidden)
the combo box throws a runtime error..
i've searched on the net which says.. combo box is difficult to render inside a panel.. whose default property is initially false!
The problem is that the <select> elements have to be rendered (but not necessarily visible) in order to reliably access their dimension properties.
So display: none; won't work because the elements are not rendered, and visibility: hidden; will partially work because the elements are rendered, so space is allocated for them on the page, but hidden, so that space will remain empty.
A third solution is to render the container as usual, but make it absolutely positioned outside of the browser viewport:
filterPanel.Attributes.Add("style",
"position: fixed; left: -10000px; top: -10000px;");
That way, the panel and its contents won't be visible, but the size of the <select> elements will be properly computed.
On the client side, the formula to show the panel becomes:
document.getElementById("filterPanelClientID").style.position = "static";
And to hide it again:
document.getElementById("filterPanelClientID").style.position = "fixed";
You can test a jQuery-based implementation here.
The issue is that if you set Visible="false" on a server control, it won't render any of the HTML elements, including the combo boxes. Hiding the panel using the following is AJAX friendly:
<asp:Panel id="p" runat="server" style="display:none">
</asp:Panel>
Which will render a DIV and all your drop downs, but hide them from view, allowing you to toggle the div's visibility.
Don't apply the "display: none" to the panel, only "visibility: hidden":
filterpanel.Attributes.Add("style", "visibilty: hidden");
This will hide your panel (the <div> I suppose) but reserve the required space (and therefore will allow the dimension-related properties of the corresponding DOM element to have the right values).
Of course you'll see an empty spot but you could probably resolve this issue by playing with the styles of an element (maybe by nesting the panel inside another element and by applying styles to that element instead of doing that on the panel itself).
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!