Ajax 콤보 목록이 Jquery 탭 바로 아래로 이동합니다.

내 프로젝트에서 동일한 Ajax Combobox를 사용하고 있지만 jquery 탭 컨트롤에서 Ajax Combobox를 사용하자마자 목록이 오른쪽으로 이동하고 UI가 모호하게 보입니다. 아약스에서 jquery 콤보 박스 및 자동 완성으로 전환하고 싶지 않습니다.이 문제를 해결하기 만하면됩니다.Ajax 콤보 목록이 Jquery 탭 바로 아래로 이동합니다.

<ajax:ComboBox ID="LenCompDpd" runat="server" Width="133px" CssClass="AquaStyle  textfont" 
OnSelectedIndexChanged="LenCompDpd_SelectedIndexChanged" AutoPostBack="true" 
            DropDownStyle="DropDown" AutoCompleteMode="SuggestAppend" CaseSensitive="false" 
            ItemInsertLocation="OrdinalText" />

출처

2012-10-11 Iti Tyagi

JQuery와 UI에 대한 CSS 설정이 아약스 콤보 상자에 대한 CSS를 설정 놨 때문이다가, 여기 내가있는 콤보 상자의 스타일을 설정했습니다 간단한 예입니다 : 다음은 내 코드입니다 페이지는 정상 보이게하기 위해 jQuery를에서 CSS를위한 조정 :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Tabs.aspx.cs" Inherits="WebApplication1.Tabs" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />  
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>  
    <script type="text/javascript" src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script> 
    <script type="text/javascript">   
     $(function() { $("#tabs").tabs(); });  
    </script> 
    <style type="text/css"> 
     .ajax__combobox_itemlist 
     { 
      left: 28px !important;    
      top: 103px !important; 
     } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <asp:ScriptManager ID="ScriptManager1" runat="server"> 
     </asp:ScriptManager> 
     <div id="tabs">  
      <ul>   
       <li><a href="#tabs-1">Nunc tincidunt</a></li>   
       <li><a href="#tabs-2">Proin dolor</a></li> 
      </ul>  
      <div id="tabs-1"> 
        <ajaxToolkit:ComboBox ID="ComboBox1" runat="server" 
         AutoPostBack="False" 
         DropDownStyle="DropDownList"> 
         <asp:ListItem Text="One"></asp:ListItem> 
         <asp:ListItem Text="Two" /> 
         <asp:ListItem Text="Three" /> 
        </ajaxToolkit:ComboBox> 
      </div>  
      <div id="tabs-2">   

      </div>  
     </div> 
    </form> 
</body> 
</html>

트릭는 jQuery를 물건과 함께 작동하도록 스타일을 조정 .ajax__combobox_itemlist처럼 콤보 상자의 CSS 클래스를 사용하는 것입니다.

출처

2012-10-11 15:38:46

Ajax 콤보 목록이 Jquery 탭 바로 아래로 이동합니다.

답변

관련 문제