I am not sure what has happened here, but I have 3 panels, and these 3 panels are nested inside one large, thus:
<asp:panel id="pnlMain" runat="server" Height="60%" Width="100%">
<div id="div1">
<asp:panel id="panel1" runat="server" Height="100%" width="100"
scrollbars="vertical"/>
</div>
<div id="div2">
<asp:panel id="panel2" runat="server" Height="100%" width="100"
scrollbars="vertical"/>
</div>
<div id="div3">
<asp:panel id="panel3" runat="server" Height="100%" width="100"
scrollbars="vertical"/>
</div>
</asp:panel>
What is happening is that when I add my gridviews to these nested panels, the panel is just getting larger, the scroll bars are not scrolling, in other words the panels are stretching rather than their height staying fixed.
How do I fix this?
Thanks
Try changing your heights to a fixed number rather than 100%.
Related
I have inherited an app that has a CollapsiblePanelExtender. The codebehind populates the control that's inside the panel when it loads. I set the CollapsiblePanelExtender to be expanded in the codebehind, but the target panel isn't visible, even though the CollapsiblePanelExtender is expanded.
If I then collapse the CollapsiblePanelExtender, and then expand it again, the panel shows up. The html is there, but it isn't showing.
Any clues would be appreciated, thanks.
<div class="contentBoxTitle">
<asp:Panel ID="expandCTL" runat="server" Width="100%">
<asp:Image ID="expandIMG" ImageUrl="~/images/itemOpen.gif" runat="server" />
Client
</asp:Panel>
</div>
<asp:Panel ID="profilePanel1" runat="server" >
<div class="profileTable">
<table width="350" border="0" cellpadding="2" cellspacing="0">
<tr bgcolor="ffffff">
<th width="100" height="20" bgcolor="ffffff"><div align="right">Name:</div></th>
<td>
<asp:Label ID="name" runat="server" Text=""></asp:Label> </td>
</tr>
...
(more fields here)
...
</table>
</div>
</asp:Panel>
</div>
<ajaxToolkit:CollapsiblePanelExtender runat="server" TargetControlID="profilePanel1" CollapsedSize ="1" ID="profilePanelCollapser"
ExpandDirection="Vertical" ImageControlID="expandIMG" ExpandedImage="~/images/itemOpen.gif"
CollapsedImage="~/images/itemClosed.gif" Collapsed="false" ExpandControlID="expandCTL" CollapseControlID="expandCTL" />
I am trying to center the radmediaplayer telerik control, but to no avail. Please help thank you.
<asp:Panel ID="pnlModal3" runat="server" role="dialog" CssClass="modal fade">
<asp:Panel ID="pnlInner3" runat="server" CssClass="modal-dialog" >
<asp:Panel ID="pnlContent4" CssClass="modal-content" runat="server">
<asp:Panel runat="server" class="modal-header">
<h4 class="modal-title" >Clip Player</h4>
</asp:Panel>
<asp:panel runat="server" class="modal-body">
<telerik:RadScriptManager runat="server" ID="RadScriptManager2" />
<div style="text-align:center;">
<telerik:RadMediaPlayer ID="ClipPlayer" runat="server" AutoPlay="true" Height="400px" Width="400px" DestroyOnClose ="true">
</telerik:RadMediaPlayer>
</div>
</asp:panel>
<asp:panel runat="server" class="modal-footer">
<asp:Button ID="Button4" runat="server" Text="Close" OnClick="btnClose_Click" class="btn btn-default"/>
</asp:panel>
</asp:Panel>
</asp:Panel>
</asp:Panel>
First, two generic issues:
RadMediaPlayer does not have a DestroyOnClose property. RadWindow has.
The script manager should be your first control inside the .
Back to your question - what exactly is not working? have you tried setting margin: auto to the div element that is the media player control? This worked for me in a basic setup:
<div>
<telerik:RadMediaPlayer ID="ClipPlayer" CssClass="centeredPlayer" runat="server" AutoPlay="true" Height="400px" Width="400px">
</telerik:RadMediaPlayer>
</div>
and
.centeredPlayer
{
margin: auto;
}
If it does not work for you, inspect the rendered HTML to see what CSS is in play. Substitute RadMediaPlayer with a simple div and center that first.
I have an ajax NumericUpDown extender like so:
<div style="float: left;">
<asp:TextBox ID="txtFixedCost" runat="server" CssClass="app_textbox" Width="100px"
Height="15px" Text="40" MaxLength="2" />
<asp:NumericUpDownExtender ID="NumericUpDownExtender1" runat="server" TargetControlID="txtFixedCost"
Maximum="100" Minimum="0" Width="50" />
</div>
The problem is that the textbox/extender controls do not stay anchored on the page when it scrolls. They move along with the scrolling. How can I get these controls to stay put? Help is much appreciated, thanks.
Use position:fixed style for the outer div
I've got a RadGrid with a fixed height, which is the same that ten rows ones (360px). But in some cases, the texts shown in the rows have to wrap because of the small cell sizes. Then, the master table view grows correctly, but the grid doesn't. The grid border is drawn over the rows, and it does a really anoying visual effect.
I've tried to fix it via CSS, but no luck. I don't know if there is a RadGrid property that may help me; I tried many, but any of them worked.
This is the code I wrote:
<telerik:RadDock ID="MyRadDock" runat="server" Style="width: auto; height: auto;">
<ContentTemplate>
<div>
<telerik:RadGrid ID="MyRadGrid" runat="server" Height="360px" Style="width: auto;">
<MasterTableView Width="100%" PageSize="10">
<Columns>
<!-- ... -->
</Columns>
</MasterTableView>
</telerik:RadGrid>
</div>
</ContentTemplate>
</telerik:RadDock>
A pair of screenshots to understand the problem: Before the DataBind() and After the DataBind().
RadGrid height can definitely be tricky. In this case I think you can just remove the Height attribute and it will work as you're expecting.
<telerik:RadDock ID="MyRadDock" runat="server" Style="width: auto; height: auto;">
<ContentTemplate>
<div>
<telerik:RadGrid ID="MyRadGrid" runat="server" Style="width: auto;">
<MasterTableView Width="100%" PageSize="10">
<Columns>
<!-- ... -->
</Columns>
</MasterTableView>
</telerik:RadGrid>
</div>
</ContentTemplate>
The markup below displays the panels one below the other. What I would like to do is display them right next to each other. Here is the markup:
<div>
<asp:Panel ID="pnlA" runat="server">
<img src="../images/A.png" />
<asp:Literal ID="litA" runat="server" Text="A"></asp:Literal>
</asp:Panel>
<asp:Panel ID="pnlB" runat="server">
<img src="../images/B.png" />
<asp:Literal ID="litB" runat="server" Text="B"></asp:Literal>
</asp:Panel>
</div>
The above currently displays it like so:
Image A
Image B
When in fact, I would like it like Image A Image B
The HTML rendered is pretty much the same as above, but the Panels are rendered as divs, so the structure without everything inside is:
<div>
<div></div>
<div></div>
<div>
A Panel renders in HTML as a div. The easiest way is to just use CSS to override the default behavior of divs.
<asp:Panel ID="pnlA" runat="server" style="display:inline;">
<img src="App_Themes/TicketDeskTheme/file.gif" />
<asp:Literal ID="litA" runat="server" Text="A"></asp:Literal>
</asp:Panel>
<asp:Panel ID="pnlB" runat="server" style="display:inline;">
<img src="App_Themes/TicketDeskTheme/file.gif" />
<asp:Literal ID="litB" runat="server" Text="B"></asp:Literal>
</asp:Panel>
This example uses the style attribute, which gets passed on straight to the HTML. You can use CssClass if you prefer to do it in a reusable stylesheet of course.
asp:Panel will render as a DIV, check out this answer and see if it works