將RadDropDownTree放置在引導模式對話框內

我正試圖在引導模式對話框上放置RadDropDownTree telerik Web UI控件。我遇到的問題是，放置在對話框中的下拉樹的過濾文本框無法接收任何用戶輸入。請看下面的代碼片段：將RadDropDownTree放置在引導模式對話框內

<telerik:RadScriptManager runat="server"></telerik:RadScriptManager> 

<!-- Button trigger modal --> 
<a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
    Launch demo modal 
</a> 

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 

      <telerik:RadDropDownTree ID="RadDropDownTree2" runat="server" EnableFiltering="True" FilterSettings-EmptyMessage="i can't text anything here" >     
      </telerik:RadDropDownTree> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div>

來源

2014-03-24 Giorgos Betsos

我確實看到你也在Telerik論壇上問過這個問題（http://www.telerik.com/forums/radumsdowntree-in-bootstrap-modal），但是真的解決了這個問題嗎？我有同樣的情況，並且使用「可見性：隱藏」而不是「隱藏」類代碼來掙扎代碼。例如，我不能使用data-target/data-dismiss，並且不會顯示背景。你有沒有找到任何其他解決方案？ – Nurp

@Nurp我們使用了Magdalena在她在Telerik論壇上發表的文章。它爲我們工作得很好。 –

我研究了詳細的問題的情況，並發現它是不相關的Telerik的DropDownTree控制，因爲它甚至可以用絕對定位的輸入元素的標準進行復制。我錄製了一段視頻，演示了絕對定位的輸入元素的焦點狀態未被觸發，但只有激活的元素不會觸發編輯。奇怪的是，在IE中，用戶可以輸入，而在Chrome和Firefox中，他/她是不允許的。

下面是視頻：http://screencast.com/t/hr5D6j1R77p

下面是標記：

<%@ Page Language="C#" AutoEventWireup="true" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script> 

    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 

    <!-- Optional theme --> 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> 

    <!-- Latest compiled and minified JavaScript --> 
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    <style> 
     input[type=text]:focus { 
      background: red !important; 
     } 
     input[type=text]:active{ 
      background: green !important; 
     } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 

     <!-- Button trigger modal --> 
     <a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal 
     </a> 

     <!-- Modal --> 
     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
      <div class="modal-dialog"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
         <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
        </div> 
        <div class="modal-body"> 

        </div> 
        <div class="modal-footer"> 
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
         <button type="button" class="btn btn-primary">Save changes</button> 
        </div> 
       </div> 
      </div> 
     </div> 



     <div style="position: absolute; z-index: 4000; top: 300px; left: 200px;"> 
      <input type="text" name="name" value=" " /> 
     </div> 


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

來源

2014-07-07 13:44:59

如果您不使用絕對定位的文本輸入元素，則問題不會重現。您是否建議我使用的telerik控件生成絕對定位的輸入控件？ –

從模式中刪除tabindex="-1"將使它發揮作用。

但它也有副作用，不僅使模式的輸入成爲tabbable，而且使頁面的所有輸入/鏈接/按鈕成爲可能。

來源

2014-07-18 13:53:54 Nurp

將RadDropDownTree放置在引導模式對話框內

回答

相關問題