title: Bootstrap css with UpdatePanel partial rendering in asp.net
body: <p>I'm using Bootstrap-Twitter style in my ASP.NET application with Master-Content architecture (code below). On first load everything is OK, two span6 divs side by side, top menu normal.. I checked @media style and it's OK for both divs. When any of the update panels execute partial rendering (click on tree in left update panel) everything changes. Major and I think crucial problem is that now the @media is changed (now is @media (max-width: 767px) and before update was @media (min-width: 1200px)). This changing display page in wide monitor as you open in tablet or some small resolution and this happening only on update panel partial rendering. Does anyone have experience with this type of bug?</p>
  
  <p>Master code:    </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;!--[if lt IE 7]&gt; &lt;html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 7]&gt;    &lt;html class="no-js lt-ie9 lt-ie8" lang="en"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 8]&gt;    &lt;html class="no-js lt-ie9" lang="en"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 9]&gt;    &lt;html class="no-js lt-ie10" lang="en"&gt; &lt;![endif]--&gt;
  &lt;!--[if gt IE 9]&gt;&lt;!--&gt; &lt;html class="no-js" lang="en"&gt; &lt;!--&lt;![endif]--&gt; 
  &lt;head id="Head1" runat="server"&gt;   
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;Web Client&lt;/title&gt;
      &lt;meta name="description" content="" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
  
      &lt;!-- Le styles --&gt;
      &lt;link rel="stylesheet" href="../assets/css/bootstrap.css" media="all" /&gt;
  
      &lt;!-- HTML5 shim, for IE6-8 support of HTML5 elements --&gt;
      &lt;!--[if lt IE 9]&gt;
      &lt;script src="../assets/js/html5shiv.js" &gt;&lt;/script&gt;
      &lt;![endif]--&gt;
      &lt;script src="../assets/js/modernizr-2.5.3-respond-1.1.0.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Le fav and touch icons --&gt;
      &lt;link rel="shortcut icon" href="~/assets/ico/favicon.ico" /&gt;
      &lt;link rel="apple-touch-icon-precomposed" sizes="144x144" href="~/assets/ico/apple-touch-icon-144-precomposed.png" /&gt;
      &lt;link rel="apple-touch-icon-precomposed" sizes="114x114" href="~/assets/ico/apple-touch-icon-114-precomposed.png" /&gt;
      &lt;link rel="apple-touch-icon-precomposed" sizes="72x72" href="~/assets/ico/apple-touch-icon-72-precomposed.png" /&gt;
      &lt;link rel="apple-touch-icon-precomposed" href="~/assets/ico/apple-touch-icon-57-precomposed.png" /&gt;
  
  &lt;asp:ContentPlaceHolder ID="HeadContent" runat="server"&gt;
      &lt;/asp:ContentPlaceHolder&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;!--[if lt IE 7]&gt;&lt;p class=chromeframe&gt;Your browser is &lt;em&gt;ancient!&lt;/em&gt; &lt;a href="http://browsehappy.com/"&gt;Upgrade to a different browser&lt;/a&gt; or &lt;a href="http://www.google.com/chromeframe/?redirect=true"&gt;install Google Chrome Frame&lt;/a&gt; to experience this site.&lt;/p&gt;&lt;![endif]--&gt;
      &lt;form id="mainForm" runat="server"&gt;
      &lt;asp:ScriptManager ID="ScriptManager1" runat="server" OnAsyncPostBackError="ScriptManager1_AsyncPostBackError" AsyncPostBackTimeout="360000"&gt;
          &lt;Scripts&gt;
              &lt;asp:ScriptReference Path="~/assets/js/jquery-1.7.2.min.js" /&gt;
               &lt;asp:ScriptReference Path="~/assets/js/bootstrap/bootstrap.min.js" /&gt;
              &lt;asp:ScriptReference Path="~/assets/js/bootstrap/dropdown.js" /&gt;
              &lt;asp:ScriptReference Path="~/assets/js/bootstrap/tab.js" /&gt;
              &lt;asp:ScriptReference Path="~/assets/js/bootstrap/button.js" /&gt;
              &lt;asp:ScriptReference Path="~/assets/js/bootstrap/tooltip.js" /&gt;
              &lt;asp:ScriptReference Path="~/assets/js/bootstrap/modal.js" /&gt;
              &lt;asp:ScriptReference Path="~/JS/Safari3AjaxHack.js" /&gt;
              &lt;asp:ScriptReference Path="~/js/default.js" /&gt;
              &lt;asp:ScriptReference Path="~/JS/LongPolling.js" /&gt;
          &lt;/Scripts&gt;
      &lt;/asp:ScriptManager&gt;
  
      &lt;div class="navbar navbar-fixed-top"&gt;
        &lt;div class="navbar-inner"&gt;
          &lt;div class="container"&gt;
            &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/a&gt;
           &lt;!--TOP MENU CODE--&gt;
          &lt;/div&gt;        
        &lt;/div&gt;      
      &lt;/div&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;asp:ContentPlaceHolder ID="DefaultContent" runat="server" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;footer class="footer"&gt;        
         &lt;div class="navbar navbar-fixed-bottom"&gt;      
             &lt;div class="navbar-inner"&gt;
                 &lt;div class="container"&gt;                  
                     &lt;p class="pull-right"&gt;
                          v&lt;%= Application["ShellVersion"] %&gt;&amp;nbsp;  
                         Copyright 2012 All rights reserved.
                     &lt;/p&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
         &lt;/div&gt;
      &lt;/footer&gt;       
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Content code:</p>
  
  <pre><code>&lt;asp:Content ID="content" ContentPlaceHolderID="DefaultContent" Runat="Server"&gt;   
      &lt;div class="span6"&gt;
          &lt;div class="well"&gt;           
              &lt;asp:UpdatePanel ID="upLeft" runat="server" UpdateMode="Conditional"&gt;
                  &lt;ContentTemplate&gt;
                      &lt;asp:TreeView ID="tree" runat="server" OnTreeNodePopulate="tree_TreeNodePopulate"
                          ExpandDepth="1" NodeWrap="true" OnSelectedNodeChanged="tree_SelectedNodeChanged"
                          SelectedNodeStyle-BackColor="#000066" SelectedNodeStyle-ForeColor="#FFFFFF" /&gt;
                      &lt;link rel="stylesheet" href="../assets/css/bootstrap.css" media="all" /&gt;
                  &lt;/ContentTemplate&gt;
                  &lt;Triggers&gt;
                      &lt;asp:AsyncPostBackTrigger ControlID="ibtnExpand" EventName="Click" /&gt;
                      &lt;asp:AsyncPostBackTrigger ControlID="ibtnCollapse" EventName="Click" /&gt;
                      &lt;asp:AsyncPostBackTrigger ControlID="ibtnRefresh" EventName="Click" /&gt;
                  &lt;/Triggers&gt;
              &lt;/asp:UpdatePanel&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="span6"&gt;
          &lt;asp:UpdatePanel ID="upRight" runat="server" UpdateMode="Conditional"&gt;
              &lt;ContentTemplate&gt;
                  &lt;div runat="server" id="rightDIV"&gt;
                      &lt;ul class="nav nav-tabs" id="browseTab"&gt;
                          &lt;li class="active"&gt;&lt;a href="#recordTab" data-toggle="tab"&gt;&lt;%= GetStaticTabTitle() %&gt;&lt;/a&gt;&lt;/li&gt;
                          &lt;asp:Repeater ID="rptTabs" runat="server"&gt;
                              &lt;ItemTemplate&gt;
                                  &lt;%# GetTabCommand(Container.DataItem) %&gt;
                              &lt;/ItemTemplate&gt;
                          &lt;/asp:Repeater&gt;
                      &lt;/ul&gt;
                      &lt;div class="tab-content" style="overflow: visible;" id="rightTabs"&gt;
                          &lt;uc:RecordInfo ID="recordDetailsInfo" runat="server" /&gt;
                          &lt;div class="tab-pane active" id="recordTab"&gt;
                              &lt;uc:Record ID="Details" runat="server" /&gt;
                              &lt;uc:Files ID="Files" runat="server" /&gt;
                              &lt;uc:Agenda ID="Agenda" runat="server" /&gt;
                              &lt;uc:Section ID="Section" runat="server" /&gt;
                              &lt;uc:Item ID="Item" runat="server" /&gt;
                              &lt;asp:Panel ID="panelFiles" runat="server" Style="height: 300px; padding-bottom: 60px; margin-left: 0; padding-left: 0;"
                                  CssClass="span6"&gt;
                                  &lt;iframe name="ifrmFiles" seamless="seamless" id="ifrmFiles" src="" runat="server"
                                      class="span6" style="height: 295px; margin-left: 0; padding-left: 0; border: 0 none #ffffff; background: #ffffff url('../Images/file-loader.gif') no-repeat 5% 5%;"&gt;Your browser doesn't support iframes.&lt;/iframe&gt;
                              &lt;/asp:Panel&gt;
                          &lt;/div&gt;                      
                      &lt;/div&gt;
                  &lt;/div&gt;               
              &lt;/ContentTemplate&gt;
          &lt;/asp:UpdatePanel&gt;
      &lt;/div&gt;
  &lt;/asp:Content&gt;
  </code></pre>