Issue in alignment of the controls while using jQuery show() and hide() functions RSS

• • Reply
  

  hr3

  Member

  15 Points

  32 Posts

  Issue in alignment of the controls while using jQuery show() and hide() functions

  Jan 23, 2013 06:00 PM|LINK

  Hi all,

  I have two radio button lists in my html table column. Up on the selection of options in the first radio button list second will be shown/hidden using jquery. While I do so, the second radio button is moved to the next line. They both will on the same line when do the same from the code behind (page will do a post back then). What might be the issue here. I am not able to figure this out.

  Thanks in advance...

• • Reply
  

  velambath

  Member

  396 Points

  111 Posts

  Re: Issue in alignment of the controls while using jQuery show() and hide() functions

  Jan 23, 2013 06:48 PM|LINK

  Hi,

  PLS POST your code here, will b helpfull to analyse for us.
  and explain your needs.

   

  Kind Regards
  - Rigin
  
• • Reply
  

  hr3

  Member

  15 Points

  32 Posts

  Re: Issue in alignment of the controls while using jQuery show() and hide() functions

  Jan 24, 2013 11:18 PM|LINK

  Sorry for the delay in the following up. Here is my code...

  JQuery:

  $(document).ready(function () {
                  var jradBtnLst1 = $("#<%=radBtnLst1.ClientID %> input");
                  
                  jradBtnLst1.unbind("click").click(function (event) {
                      var selRadBtnLst1 = $('#<%=radBtnLst1.ClientID %> input[type=radio]:checked').val().toString().toLowerCase();
                      var prodName = $("#<%=lblProduct.ClientID%>").html().toString().toLowerCase();
                      if (selRadBtnLst1 == "case1" && prodName == "prod1") {
                          $("#<%=radBtnLst2.ClientID %>").show();
                      }
                      else {
                          $("#<%=radBtnLst2.ClientID %>").hide();
                      }
                  });
              });

  HTML:

  <tr style="background-color: gray">
  	<td style="text-align: center;">
  		Config Type:&nbsp;<asp:RadioButtonList ID="radBtnLst1" runat="server" 
                                                 CausesValidation="false" RepeatDirection="Horizontal" BorderStyle="Dotted" 
                                                 BorderColor="Black" BorderWidth="1px" RepeatLayout="Flow" 
                                                 AutoPostBack="false">
  									<asp:ListItem Text="&nbsp;Case 1&nbsp;" Value="Case1" />
                                      <asp:ListItem Text="&nbsp;Case 2&nbsp;" Value="Case2" />
                             </asp:RadioButtonList>&nbsp;
                             <asp:RadioButtonList ID="radBtnLst2" runat="server" CausesValidation="false" RepeatDirection="Horizontal" BorderStyle="Dotted" BorderColor="Black" BorderWidth="1px" RepeatLayout="Flow" style="display:none">
                                          <asp:ListItem Text="&nbsp;Type 1&nbsp;" Value="Type1" />
                                          <asp:ListItem Text="&nbsp;Type 2&nbsp;" Value="Type2" />
                             </asp:RadioButtonList>
      </td>
      <td style="text-align: center;">
          <asp:ImageButton ID="btnSubmit" runat="server" 
                           ImageUrl="~/imgbtnSubmit.gif" 
                           onclick="btnSubmit_Click" />
      </td>
  </tr>

  • Edited by hr3 on Jan 24, 2013 11:31 PM
  • Edited by hr3 on Jan 24, 2013 11:31 PM
• • Reply
  

  bruce (sqlwo...

  All-Star

  36882 Points

  5451 Posts

  Re: Issue in alignment of the controls while using jQuery show() and hide() functions

  Jan 25, 2013 01:56 PM|LINK

  the jquery hide() sets the style to "display:none", the show() sets the style to "display:block". you probably want to set the disply to inline-block on show, so you can not use show(). make a hide and show classes, and use addClass/removeClass instead of show/hide.

  bruce (sqlwork.com)
  • Marked as answer by Song-Tian - MSFT on Feb 04, 2013 01:16 AM