CODEWITHSUNDEEP
jqueryasp.netcss
Fiona
Fiona

Reputation: 1599

asp:panel hide and show and positioning

I've the following 2 panels inside a div:

 <div id="interval" style="margin-top:12px; float: left; margin-left: 10px;">
                <div>
                    <asp:Panel id="FrequencyMinutes" style="margin-left: 10px; margin-top: 2px" runat="server">
                        <asp:DropDownList runat="server" DataSource="<%# Model.ScheduleIntervalList %>" SelectedValue="<%# Model.SelectedScheduleInterval %>" OnSelectedIndexChanged="ScheduleInterval_SelectedIndexChanged" ID="AVContentPollingFrequencyDropDownList">            
                        </asp:DropDownList> &nbsp;
                        <asp:Localize ID="MinutesText" runat="server" Text="<%$ Resources:AntiVirus, AVRepl_Minutes %>"></asp:Localize>&nbsp;
                        <br />
                    </asp:Panel>
                    <asp:Panel id="TimePicker" style="margin-top: 2px; margin-left: 10px; min-width: 80%" runat="server">
                        <telerik:RadTimePicker Skin="Office2007" ID="StartTimeRadTimePicker" Width="15em" runat="server" OnSelectedDateChanged="StartTime_Changed" AutoPostBack="True" SelectedDate="<%# Model.ScheduleDateUpdated %>">
                            <DateInput ID="TimeInputTextBox" runat="server">
                            </DateInput>
                            <TimeView ID="TimeView" ShowHeader="false" Columns="6" Interval="0:30" runat="server" Visible="True">
                            </TimeView>
                        </telerik:RadTimePicker>
                        <asp:CustomValidator ID="RequiredTimeValidator" runat="server" Display="None" 
                        OnServerValidate="ValidateScheduledDateTime" ErrorMessage="<%$ Resources:Console, StartTimeNotValid %>">
                            <asp:Image ID="Image1" runat="server" SkinID="ValidationErrorSkin" ToolTip="<%$ Resources:Console, StartTimeNotValid %>" />
                        </asp:CustomValidator>
                    </asp:Panel>
                </div>
            </div>

I then have JQuery showing and hiding these panels depending on which listitem is selected in a radiobuttonlist:

$("#<%=pollingFrequencyRadioButtonList.ClientID%> input:radio").change(function() {
            if (this.checked) {
                if (this.value == "True") {
                    $("#" + "<%= FrequencyMinutes.ClientID %>").hide();
                    $("#" + "<%= TimePicker.ClientID %>").show();
                }
                else {
                    $("#" + "<%= FrequencyMinutes.ClientID %>").show();
                    $("#" + "<%= TimePicker.ClientID %>").hide();
                }
            }
        }).filter(":checked").change();

The problem is that when I hide the first panel the second one jumps up in its place.. What I'd like is for the first one to hide and the second panel to be shown below it.

Any ideas on how I could achieve this?

Upvotes: 0

Views: 8472

Answers (1)

robooneus
robooneus

Reputation: 1344

Instead of using .hide(), which takes the element out of the flow (display:none), change the visibility of the item.

use 

.css('visibility', 'hidden'); //for hide
.css('visibility', 'visible'); //for show

Upvotes: 3

Related Questions