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..
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 a dialog with some text in rows and columns, im using css to remove the borders of the panel/rows in the dialog box. however when I use with the target set as my dialog box it displaces everything in the dialog box but with all the borders showing and none of my custom css.
Is there a way of telling the printer to use the custom css or stop it going back to the default?
I still can't figure out why the printer is ignoring the CSS but I have found a work around.
By adding border:none; to each row and column in my dialog it works
<p:row styleClass=".ui-panelgrid" border= "0" style="border: none;">
<p:column colspan="3" border= "0" style="border: none;">
hope this is useful for someone in the future, but if anyone would care to explain why the was ignoring the custom CSS in the first place I would love to know. thanks
I have an editor defined very simply as below. The editor is within the footer of grids and the toolbar definition contains the 'InsertSymbol' tool. When I click the InsertSymbol tool the popup to select my symbol appears way up in the top corner of my page and the toolbar disappears. See screenshot, the black circled textbox is radeditor, symbol popup circled in red. If I remove the ShowOnFocus toolbar mode this behaviour seems to go away and the popup appears where expected.
Can anyone tell me how to position the popup near the editor in this scenario? I really do not want to remove the 'ShowOnFocus' setting as the additional toolbars clutter up the page quite badly when they are only used rarely.
<telerik:RadEditor ID="txtLevel1TextFooter" runat="server" ToolsFile="~/Seminar/Agenda/ImportToolsDetail.xml"
ToolbarMode="ShowOnFocus" Height="25px" OnClientLoad="OnClientLoad" EditModes="Design"
StripFormattingOptions="MSWordRemoveAll" />
Check the folloing KB article which demonstrates how to load the editor's dialogs at the desired position on the page.
http://www.telerik.com/support/kb/aspnet-ajax/editor/setting-dialog-pop-up-position.aspx
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 having a problem in my flex/air application, in which when the left mouse button is clicked on a TextInput the focus is stolen by the parent.
So in more detail I have an hierarchy as follows...
accordion
->panel(Custom)
->TextInput
->TextInput
So some really annoying reason when I click on the TextInput's the focus goes to the accordion.
But when i add the same Custom Panel to a Canvas the TextInput works as per normal.
I don't understand why this would be happening?
Does your parent panel have a click effect that shifts focus? This could cause the issue because of event bubbling.
Edit: Could it be an issue with your custom panel? try taking the input text boxes out of the custom panel, putting them in a regular panel, and then putting that into the accordian...you probably won't have the issue still.
Can't reproduce the problem with this tiny example - it works correctly.
<mx:Accordion>
<mx:Panel label="Test">
<mx:TextInput />
<mx:TextInput />
</mx:Panel>
</mx:Accordion>
So, my suggestions would be:
try removing any custom code you have in the accordion (event handler, etc)
try using simple container instead of your custom and see if it still happens. If it doesn't then the problem is in your custom container.