locked
Expanding Panel with CollapsiblePanelExtender RRS feed

  • Question

  • User1377341490 posted

    I've setup a Panel that contains 5 buttons.  The Panel is collapsed so you only see ButtonUserAdd, ButtonGroupAdd and ButtonExportPermissions.

    Based on code behind the Panel expands with ButtonUndo and ButtonSave appearing, what I don't understand is why when these buttons are before ButtonExportPermissions they appear on one line and are formatted wrongly.  However if they are after ButtonExportPermissions they appear fine.  Is there something I can do to fix this?

    <asp:Panel ID="panelTasksContent" runat="server" CssClass="collapsiblePanelContent"
                            Width="146px" Wrap="False">
                            <div id="divCbInherit" runat="server" style="display: inline">
                                <asp:CheckBox ID="cbInherit" runat="server" Text="Inherit from parent" AutoPostBack="True"
                                    OnCheckedChanged="cbInherit_CheckedChanged" Enabled="false" ToolTip="Turn folder inheritance on or off. Allow permissions to flow through from a parent folder or not." />
                            </div>
                            <div align="left">
                                <asp:Button ID="ButtonUserAdd" Style="background-image: url('Images/User.gif'); background-color: Transparent;
                                    cursor: hand; background-repeat: no-repeat; background-; padding-left: 15px"
                                    runat="server" Height="25px" BorderStyle="None" Text="Add Users" Width="100px"
                                    OnClick="ButtonAdd_Click" ToolTip="Add Users to this folder and subfolders depending on inheritence." />
                            </div>
                            <div>
                                <asp:Button ID="ButtonGroupAdd" Style="background-image: url('Images/groups.gif');
                                    background-color: Transparent; cursor: hand; background-repeat: no-repeat; background-;
                                    padding-left: 15px" runat="server" Height="25px" BorderStyle="None" Text="Add Groups"
                                    Width="110px" OnClick="ButtonGroupAdd_Click" ToolTip="Add Groups to this folder and subfolders depending on inheritence." />
                            </div>
                            
                            <div id="divButtonUndo" runat="server">
                                <asp:Button ID="ButtonUndo" Style="background-image: url('Images/undo.gif'); background-color: Transparent;
                                    cursor: hand; background-repeat: no-repeat; background-; padding-left: 15px"
                                    runat="server" Height="25px" BorderStyle="None" Text="Undo Changes" OnClientClick="UndoChanges()"
                                    ToolTip="Undo Changes." />
                            </div>
                            <div id="divButtonSave" runat="server">
                                <asp:Button ID="ButtonSave" Style="background-image: url('Images/save.gif'); background-color: Transparent;
                                    cursor: hand; background-repeat: no-repeat; background-; padding-left: 15px"
                                    runat="server" Height="25px" BorderStyle="None" Text="Save" OnClientClick="SaveChanges()"
                                    ToolTip="Apply Permissions to bolded folder and subfolders.  Depending on Inheritance." />
                            </div>
                            <div>
                                <asp:Button ID="ButtonExportPermissions" Style="background-image: url('Images/export.gif');
                                    background-color: Transparent; cursor: hand; background-repeat: no-repeat; background-;
                                    padding-left: 15px" runat="server" Height="25px" BorderStyle="None" Text="Export Permissions"
                                    Width="150px" OnClick="ButtonExportPerms_Click" ToolTip="Will save a Tab delimited file containing the current permissions on the highlighted folder and subfolders." />
                            </div>
                            
                        </asp:Panel>
                    </asp:Panel>
                    <ajax:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" TargetControlID="panelTasksContent"
                        ExpandControlID="panelTasksHeader" CollapseControlID="panelTasksHeader" Collapsed="True"
                        ImageControlID="expandcollapse_tasks" ExpandedImage="~/images/collapse.gif" CollapsedImage="~/images/expand.gif"
                        SuppressPostBack="True" ExpandDirection="Vertical" CollapsedSize="100" ExpandedSize="150"/>
    Tuesday, November 11, 2014 5:03 AM

Answers

  • User1918509225 posted

    Hi aburrow,

      The 2 buttons Undo and Save though only appear with some code behind that also expands the panelTasksContent.

    It seems that the ajax collapsiblepanel extender control works very well,but the  buttons Undo and Save are not in the right position.

    I think it is more related with the css style which apply to your buttons.

    So I suggest you can press F12,click the "Dom Explorer" ,check if the css in your buttons.

    Best Regards,

    Kevin Shen.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 13, 2014 2:22 AM

All replies

  • User1918509225 posted

    Hi aburrow,

    According to your code, when you click the "panelTasksHeader" element ,it will expand and collapse the  "panelTasksContent" panel.

    And your button are formatted wrongly is related with that you didn't apply the css style for your button in your panel.

    I suggest that you can press F12, click the "Dom Explorer" to check your button css style.

    Best Regards,

    Kevin Shen.

    Tuesday, November 11, 2014 10:11 PM
  • User1377341490 posted

    Kevin,

    You are correct about the panelTasksHeader expanding and collapsing the panelTasksContent.  The 2 buttons Undo and Save though only appear with some code behind that also expands the panelTasksContent.

    I'm not sure what you mean by the buttons being formatted incorrectly all 5 buttons are working and they do have "Style's" attached.

    Wednesday, November 12, 2014 5:15 AM
  • User1918509225 posted

    Hi aburrow,

      The 2 buttons Undo and Save though only appear with some code behind that also expands the panelTasksContent.

    It seems that the ajax collapsiblepanel extender control works very well,but the  buttons Undo and Save are not in the right position.

    I think it is more related with the css style which apply to your buttons.

    So I suggest you can press F12,click the "Dom Explorer" ,check if the css in your buttons.

    Best Regards,

    Kevin Shen.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 13, 2014 2:22 AM
  • User1377341490 posted

    Kevin,

    Thanks for that. 

    I sat down and moved the Style's into the stylesheet and setup some CssClasses.  After I did that I moved the Width and Wrap to the "collapsiblePanelContent" CssClass instead of sepcifying it in the "panelTasksContent".  There was still no change.  In the end I removed the "Wrap" entirely from the stylesheet and everything is working as I'd hoped.

    Thanks again.

    Thursday, November 13, 2014 5:24 AM