Updateprogress panel, CSS и удаление inline stlyes

Question

Это заставляет меня думать!

Хорошо, у меня есть следующий сценарий - ModalPopupExtender, используемый для отображения панели UpdateProgress при запуске AJAX. Так что я следующее:

<asp:Panel ID="panelUpdateProgress" runat="server" CssClass="updateProgress" > 
      <asp:UpdateProgress ID="UpdateProg1" DisplayAfter="2" runat="server" ClientIDMode="Static"> 
       <ProgressTemplate> 
        <div style="position: relative; top: 40%; text-align: center;"> 
         <asp:Image ID="Image1" runat="server" Style="border: 0px; vertical-align: middle; 
          padding-bottom: 4px;" ImageUrl="~/Images/Refresh.gif" /> 
         <asp:Label ID="Label2" runat="server" Style="border: 0px; vertical-align: middle; 
          margin-left: 7px" Text="Refreshing data, please wait..."></asp:Label> 
       </div> 
       </ProgressTemplate> 
      </asp:UpdateProgress> 
     </asp:Panel> 
    <ajaxToolkit:ModalPopupExtender ID="ModalProgress" runat="server" TargetControlID="panelUpdateProgress" 
     BackgroundCssClass="modalBackground" PopupControlID="panelUpdateProgress"> 
    </ajaxToolkit:ModalPopupExtender> 

Javascript стрелять вещь, когда AJAX ногами инов:

<script type="text/javascript" language="javascript"> 
    var ModalProgress = '<%= ModalProgress.ClientID %>'; 
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq); 
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq); 
    function beginReq(sender, args) { 
     // shows the Popup 
     $find(ModalProgress).show(); 
    } 

    function endReq(sender, args) { 
     // Hides the Popup 
     $find(ModalProgress).hide(); 
    } 
</script> 

С стайлинга:

<style type="text/css"> 
    .modalBackground 
    { 
     background-color: Gray; 
     filter: alpha(opacity=50); 
     opacity: 0.50; 
    } 

    .updateProgress 
    { 
     float: right; 
     border-width: 1px; 
     border-style: solid; 
     background-color: #FAFAD2; 
     width: 250px; 
     height: 100px; 
    } 
</style> 

Однако, я не могу за жизнь я получаю updateProgress, чтобы плавать вправо или регулировать положение (как пример).

Используя инструменты для разработчиков, я вижу, что какой-то встроенный стиль переопределяет стиль CSS.

Как я могу получить, например, мой updateprogress, чтобы плавать вправо?

Answer 1

Если вы сражаетесь против встроенных стилей, которые вы не имеете никакого контроля над, это один из тех редких случаев, когда использование !important фактически оправдано:

Дайте это попробовать:

.updateProgress 
{ 
    float: right !important; 
    /* etc. */ 
} 

Если это не сработает, попробуйте добавить clear:right, или используя более specific селектор, как:

#someElement .updateProgress {} 

EDIT: Специфика в селекторах CSS не поможет против встроенных стилей, поэтому игнорируйте это как возможное решение.

Answer 2

хорошо я канава таблицы стилей и работать с этим:

<asp:UpdateProgress ID="UpdateProg1" DisplayAfter="2" runat="server" ClientIDMode="Static"> 
      <ProgressTemplate> 
       <div style="float: right; border-width: 1px; border-style: solid; background-color: #FAFAD2; 
        width: 250px; height: 100px;"> 
        <div style="position: relative; top: 40%; text-align: center;"> 
         <asp:Image ID="Image1" runat="server" Style="border: 0px; vertical-align: middle; 
          padding-bottom: 4px;" ImageUrl="~/Images/Refresh.gif" /> 
         <asp:Label ID="Label2" runat="server" Style="border: 0px; vertical-align: middle; 
          margin-left: 7px" Text="Refreshing data, please wait..."></asp:Label> 
        </div> 
       </div> 
      </ProgressTemplate> 
     </asp:UpdateProgress> 

Это делает бизнес, так что я счастлив сейчас: D