Combobox style not working on focus RSS

• • Reply
  

  sharprajat

  Member

  1 Points

  22 Posts

  Re: Combobox style not working on focus

  Feb 26, 2013 09:29 PM|LINK

  Ok. I resolved it like this:

  HTML

  <ajax:ComboBox ID="TypeComboBox" runat="server" DropDownStyle="DropDown" Width="60" TabIndex="13" CssClass="PONComboBox" >
  <asp:ListItem Selected="True">HTA</asp:ListItem>
  <asp:ListItem >TSA</asp:ListItem>
  </ajax:ComboBox>

  Stylesheet

  .PONComboBox .ajax__combobox_textboxcontainer input{border:thin solid #31659C;border-right:0 none;}
  .PONComboBox .ajax__combobox_buttoncontainer button{background-color:#31659C;border:thin solid #31659C;}

  JQuery

  $("#<%= TypeComboBox.ClientID%>").find('input[type="text"]').focus(function() {
        $("#<%= TypeComboBox.ClientID%>").find('input[type="text"]').css("border", "thin solid #FF6600");
     $("#<%= TypeComboBox.ClientID%>").find("button").css("border", "thin solid #FF6600");
     $("#<%= TypeComboBox.ClientID%>").find("button").css("background-color", "#FF6600");
  });

  $("#<%= TypeComboBox.ClientID%>").find('input[type="text"]').blur(function() {
        $("#<%= TypeComboBox.ClientID%>").find('input[type="text"]').css("border", "thin solid #31659C");
     $("#<%= TypeComboBox.ClientID%>").find("button").css("border", "thin solid #31659C");
     $("#<%= TypeComboBox.ClientID%>").find("button").css("background-color", "#31659C");
  });

  And the rendered HTML is

  <div id="ctl00_BodyContentPlaceHolder_ctlTicketInfo_TypeComboBox" class="PONComboBox" style="display:inline;">

  <table id="ctl00_BodyContentPlaceHolder_ctlTicketInfo_TypeComboBox_TypeComboBox_Table" class="ajax__combobox_inputcontainer" cellspacing="0" cellpadding="0" border="0" style="border-width:0px;border-style:None;border-collapse:collapse;display:inline;position:relative;top:5px;">
  <tr>
  <td class="ajax__combobox_textboxcontainer"><input name="ctl00$BodyContentPlaceHolder$ctlTicketInfo$TypeComboBox$TypeComboBox_TextBox" type="text" id="ctl00_BodyContentPlaceHolder_ctlTicketInfo_TypeComboBox_TypeComboBox_TextBox" tabindex="13" autocomplete="off" style="width:60px;" /></td><td class="ajax__combobox_buttoncontainer"><button id="ctl00_BodyContentPlaceHolder_ctlTicketInfo_TypeComboBox_TypeComboBox_Button" type="button"></button>
  </td>
  </tr>
  </table>

  <ul id="ctl00_BodyContentPlaceHolder_ctlTicketInfo_TypeComboBox_TypeComboBox_OptionList" class="ajax__combobox_itemlist" style="display:none;visibility:hidden;">
  <li>HTA</li>
  <li>TSA</li>
  </ul><input type="hidden" name="ctl00$BodyContentPlaceHolder$ctlTicketInfo$TypeComboBox$TypeComboBox_HiddenField" id="ctl00_BodyContentPlaceHolder_ctlTicketInfo_TypeComboBox_TypeComboBox_HiddenField" value="0" />

  </div>

  I am sure there is a better way of doing this and I would prefer to set the styles using stylesheet instead of JQuery. However, for the time being my issue is resolved.

  Many thanks Rion for staying with me. Please provide your feedback and any alternative if you come across one.

  Regards

  Rajat

   

  • Marked as answer by Yanping Wang - MSFT on Feb 28, 2013 01:52 AM