none
AjaxControlToolkit CalendarExtenderのWindowsAzureへ移行した場合の表示のされ方がおかしい件(背景透明) RRS feed

  • 質問

  • お世話になっております。

     

    Webサイトで開発を行った画面で、

    CalendarExtenderを使用している部分があり、テキストボックスをクリックすれば以下画像の通り表示されます。

    スタイルシートでの設定は

     

    .ajax__calendar_container table td

    {

    padding: 0px;

    background-color:White;

    }

     

    この設定のみで、このWebサイトをWebアプリケーションに変換し、

    VisualStudioのAzureエミュレータでローカル環境で確認しましたら

    同じ状態で表示されました。 が、

     

    実際にAzureに配置を行い、直接確認しました所、

     

    この様に表示が変わってしまいました。

     

    対処の方法ご存知の方いらっしゃいましたら、

    ご教授頂きたく、お願い致します。

     

    開発ビルド環境:VisualStudio2010

     

    確認ブラウザ:IE8

     

    Web.config指定:

      <system.web>

        <globalization culture="auto" uiCulture="auto"/>

      </system.web>

     

     

     

     

    2011年8月5日 11:50

回答

  • こんばんは

    CalendarExtenderのCSSを改めて調整したら、どうでしょうか

    <head runat="server">
      <style type="text/css">
        .myCss .ajax__calendar_container
        {
          padding: 4px;
          position: absolute;
          cursor: default;
          width: 170px;
          font-size: 11px;
          text-align: center;
          font-family: tahoma,verdana,helvetica;
        }
        .myCss .ajax__calendar_body
        {
          height: 139px;
          width: 170px;
          position: relative;
          overflow: hidden;
          margin: auto;
        }
        .myCss .ajax__calendar_days, .ajax__calendar_months, .ajax__calendar_years
        {
          top: 0px;
          left: 0px;
          height: 139px;
          width: 170px;
          position: absolute;
          text-align: center;
          margin: auto;
        }
        .myCss .ajax__calendar_container TABLE
        {
          font-size: 11px;
        }
    
        
        
        .myCss .ajax__calendar_header
        {
          height: 20px;
          width: 100%;
        }
        .myCss .ajax__calendar_prev
        {
          cursor: pointer;
          width: 15px;
          height: 15px;
          float: left;
          background-repeat: no-repeat;
          background-position: 50% 50%;
          background-image: url(WebResource.axd?d=x6lt9HfG5Si8NZjMNt1DLcY6US8hUl3G4muzIFtahMQFZTbwxJ00qsx5N8jeAW90ZvGxZ6SJJh48yx62JKItzQ2&amp;t=633053122925312500);
        }
        .myCss .ajax__calendar_next
        {
          cursor: pointer;
          width: 15px;
          height: 15px;
          float: right;
          background-repeat: no-repeat;
          background-position: 50% 50%;
          background-image: url(WebResource.axd?d=x6lt9HfG5Si8NZjMNt1DLcY6US8hUl3G4muzIFtahMQFZTbwxJ00qsx5N8jeAW90HZemRms4wXOo1BZWTwWtNQ2&amp;t=633053122925312500);
        }
        .myCss .ajax__calendar_title
        {
          cursor: pointer;
          font-weight: bold;
        }
        .myCss .ajax__calendar_footer
        {
          height: 15px;
        }
        .myCss .ajax__calendar_today
        {
          cursor: pointer;
          padding-top: 3px;
        }
        .myCss .ajax__calendar_dayname
        {
          height: 17px;
          width: 17px;
          text-align: right;
          padding: 0 2px;
        }
        .myCss .ajax__calendar_day
        {
          height: 17px;
          width: 18px;
          text-align: right;
          padding: 0 2px;
          cursor: pointer;
        }
        .myCss .ajax__calendar_month
        {
          height: 44px;
          width: 40px;
          text-align: center;
          cursor: pointer;
          overflow: hidden;
        }
        .myCss .ajax__calendar_year
        {
          height: 44px;
          width: 40px;
          text-align: center;
          cursor: pointer;
          overflow: hidden;
        }
        .myCss .ajax__calendar .ajax__calendar_container
        {
          border: 1px solid #646464;
          background-color: #ffffff;
          color: #000000;
        }
        .myCss .ajax__calendar .ajax__calendar_footer
        {
          border-top: 1px solid #f5f5f5;
        }
        .myCss .ajax__calendar .ajax__calendar_dayname
        {
          border-bottom: 1px solid #f5f5f5;
        }
        .myCss .ajax__calendar .ajax__calendar_day
        {
          border: 1px solid #ffffff;
        }
        .myCss .ajax__calendar .ajax__calendar_month
        {
          border: 1px solid #ffffff;
        }
        .myCss .ajax__calendar .ajax__calendar_year
        {
          border: 1px solid #ffffff;
        }
        .myCss .ajax__calendar .ajax__calendar_active .ajax__calendar_day
        {
          background-color: #edf9ff;
          border-color: #0066cc;
          color: #0066cc;
        }
        .myCss .ajax__calendar .ajax__calendar_active .ajax__calendar_month
        {
          background-color: #edf9ff;
          border-color: #0066cc;
          color: #0066cc;
        }
        .myCss .ajax__calendar .ajax__calendar_active .ajax__calendar_year
        {
          background-color: #edf9ff;
          border-color: #0066cc;
          color: #0066cc;
        }
        .myCss .ajax__calendar .ajax__calendar_other .ajax__calendar_day
        {
          background-color: #ffffff;
          border-color: #ffffff;
          color: #646464;
        }
        .myCss .ajax__calendar .ajax__calendar_other .ajax__calendar_year
        {
          background-color: #ffffff;
          border-color: #ffffff;
          color: #646464;
        }
        .myCss .ajax__calendar .ajax__calendar_hover .ajax__calendar_day
        {
          background-color: #edf9ff;
          border-color: #daf2fc;
          color: #0066cc;
        }
        .myCss .ajax__calendar .ajax__calendar_hover .ajax__calendar_month
        {
          background-color: #edf9ff;
          border-color: #daf2fc;
          color: #0066cc;
        }
        .myCss .ajax__calendar .ajax__calendar_hover .ajax__calendar_year
        {
          background-color: #edf9ff;
          border-color: #daf2fc;
          color: #0066cc;
        }
        .myCss .ajax__calendar .ajax__calendar_hover .ajax__calendar_title
        {
          color: #0066cc;
        }
        .myCss .ajax__calendar .ajax__calendar_hover .ajax__calendar_today
        {
          color: #0066cc;
        }
      </style>
    </head>
    <body>
      <form id="form1" runat="server">
      <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />
      <asp:TextBox runat="server" ID="txt_Test" />
      <asp:CalendarExtender ID="CalendarExtender1" CssClass="myCss" runat="server" TargetControlID="txt_Test" />
      </form>
    </body>
    </html>
    
    

    参照:http://programming.top54u.com/post/Customized-AJAX-Calendar-Control-CSS-Example.aspx


    Shadowと愉快なコード達
    Please correct me if my concept is wrong
    • 回答としてマーク らの太郎 2011年8月8日 0:43
    2011年8月5日 17:19
  • TextBox と CalendarExtender だけを貼り付けて何度か Azure にデプロイしてみましたが、現象が再現する時としない時がありました。
    不具合が再現する時には、CSS (/WebResource.axd?d=xxxxxxxxxxx) を読み込もうとして 404 エラーが発生しているようです。

    関連しそうなのが次のスレッドではないかと思われるのですが、

    Problem Deploying AJAX Application to Azure
    http://social.msdn.microsoft.com/Forums/en/windowsazure/thread/751e27a9-4108-4446-9870-411f409d2c08?prof=required&lc=1033

    これによると、タイムゾーンの絡みで AssemblyResourceLoader が正しく動くようになるまで "few hours" 待たないといけないそうで...。(ホンマかいな)
    待てない人は AjaxControlToolkit から CSS を抜いてきてコンテンツとして配置しろ、ということのようです。

    参考までに CalenderExtender の CSS の最新版はここにあります。
    http://ajaxcontroltoolkit.codeplex.com/SourceControl/changeset/view/82f5412e41bd#Server%2fAjaxControlToolkit%2fCalendar%2fCalendar_resource.css

    追記:
    CSS は CDN を使うというのもありかもしれないですね。

    Ajax Control Toolkit version 40412 - ASP.NET Ajax Library
    http://www.asp.net/ajaxlibrary/CDNACT40412.ashx
    • 編集済み totojo 2011年8月7日 17:41 CDN を追記
    • 回答としてマーク らの太郎 2011年8月8日 0:43
    2011年8月6日 5:20
  • 昼過ぎにデプロイしてデプロイした直後はカレンダーの表示が変だったのですが、そのまま放っておいたやつを今見たらカレンダーはちゃんと表示されました。
    "few hours" 待てば AssemblyResourceLoader が正しく動くようになるというのは、どうやら本当のようです。 
    • 回答としてマーク らの太郎 2011年8月8日 0:43
    2011年8月6日 14:37

すべての返信

  • こんばんは

    CalendarExtenderのCSSを改めて調整したら、どうでしょうか

    <head runat="server">
      <style type="text/css">
        .myCss .ajax__calendar_container
        {
          padding: 4px;
          position: absolute;
          cursor: default;
          width: 170px;
          font-size: 11px;
          text-align: center;
          font-family: tahoma,verdana,helvetica;
        }
        .myCss .ajax__calendar_body
        {
          height: 139px;
          width: 170px;
          position: relative;
          overflow: hidden;
          margin: auto;
        }
        .myCss .ajax__calendar_days, .ajax__calendar_months, .ajax__calendar_years
        {
          top: 0px;
          left: 0px;
          height: 139px;
          width: 170px;
          position: absolute;
          text-align: center;
          margin: auto;
        }
        .myCss .ajax__calendar_container TABLE
        {
          font-size: 11px;
        }
    
        
        
        .myCss .ajax__calendar_header
        {
          height: 20px;
          width: 100%;
        }
        .myCss .ajax__calendar_prev
        {
          cursor: pointer;
          width: 15px;
          height: 15px;
          float: left;
          background-repeat: no-repeat;
          background-position: 50% 50%;
          background-image: url(WebResource.axd?d=x6lt9HfG5Si8NZjMNt1DLcY6US8hUl3G4muzIFtahMQFZTbwxJ00qsx5N8jeAW90ZvGxZ6SJJh48yx62JKItzQ2&amp;t=633053122925312500);
        }
        .myCss .ajax__calendar_next
        {
          cursor: pointer;
          width: 15px;
          height: 15px;
          float: right;
          background-repeat: no-repeat;
          background-position: 50% 50%;
          background-image: url(WebResource.axd?d=x6lt9HfG5Si8NZjMNt1DLcY6US8hUl3G4muzIFtahMQFZTbwxJ00qsx5N8jeAW90HZemRms4wXOo1BZWTwWtNQ2&amp;t=633053122925312500);
        }
        .myCss .ajax__calendar_title
        {
          cursor: pointer;
          font-weight: bold;
        }
        .myCss .ajax__calendar_footer
        {
          height: 15px;
        }
        .myCss .ajax__calendar_today
        {
          cursor: pointer;
          padding-top: 3px;
        }
        .myCss .ajax__calendar_dayname
        {
          height: 17px;
          width: 17px;
          text-align: right;
          padding: 0 2px;
        }
        .myCss .ajax__calendar_day
        {
          height: 17px;
          width: 18px;
          text-align: right;
          padding: 0 2px;
          cursor: pointer;
        }
        .myCss .ajax__calendar_month
        {
          height: 44px;
          width: 40px;
          text-align: center;
          cursor: pointer;
          overflow: hidden;
        }
        .myCss .ajax__calendar_year
        {
          height: 44px;
          width: 40px;
          text-align: center;
          cursor: pointer;
          overflow: hidden;
        }
        .myCss .ajax__calendar .ajax__calendar_container
        {
          border: 1px solid #646464;
          background-color: #ffffff;
          color: #000000;
        }
        .myCss .ajax__calendar .ajax__calendar_footer
        {
          border-top: 1px solid #f5f5f5;
        }
        .myCss .ajax__calendar .ajax__calendar_dayname
        {
          border-bottom: 1px solid #f5f5f5;
        }
        .myCss .ajax__calendar .ajax__calendar_day
        {
          border: 1px solid #ffffff;
        }
        .myCss .ajax__calendar .ajax__calendar_month
        {
          border: 1px solid #ffffff;
        }
        .myCss .ajax__calendar .ajax__calendar_year
        {
          border: 1px solid #ffffff;
        }
        .myCss .ajax__calendar .ajax__calendar_active .ajax__calendar_day
        {
          background-color: #edf9ff;
          border-color: #0066cc;
          color: #0066cc;
        }
        .myCss .ajax__calendar .ajax__calendar_active .ajax__calendar_month
        {
          background-color: #edf9ff;
          border-color: #0066cc;
          color: #0066cc;
        }
        .myCss .ajax__calendar .ajax__calendar_active .ajax__calendar_year
        {
          background-color: #edf9ff;
          border-color: #0066cc;
          color: #0066cc;
        }
        .myCss .ajax__calendar .ajax__calendar_other .ajax__calendar_day
        {
          background-color: #ffffff;
          border-color: #ffffff;
          color: #646464;
        }
        .myCss .ajax__calendar .ajax__calendar_other .ajax__calendar_year
        {
          background-color: #ffffff;
          border-color: #ffffff;
          color: #646464;
        }
        .myCss .ajax__calendar .ajax__calendar_hover .ajax__calendar_day
        {
          background-color: #edf9ff;
          border-color: #daf2fc;
          color: #0066cc;
        }
        .myCss .ajax__calendar .ajax__calendar_hover .ajax__calendar_month
        {
          background-color: #edf9ff;
          border-color: #daf2fc;
          color: #0066cc;
        }
        .myCss .ajax__calendar .ajax__calendar_hover .ajax__calendar_year
        {
          background-color: #edf9ff;
          border-color: #daf2fc;
          color: #0066cc;
        }
        .myCss .ajax__calendar .ajax__calendar_hover .ajax__calendar_title
        {
          color: #0066cc;
        }
        .myCss .ajax__calendar .ajax__calendar_hover .ajax__calendar_today
        {
          color: #0066cc;
        }
      </style>
    </head>
    <body>
      <form id="form1" runat="server">
      <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />
      <asp:TextBox runat="server" ID="txt_Test" />
      <asp:CalendarExtender ID="CalendarExtender1" CssClass="myCss" runat="server" TargetControlID="txt_Test" />
      </form>
    </body>
    </html>
    
    

    参照:http://programming.top54u.com/post/Customized-AJAX-Calendar-Control-CSS-Example.aspx


    Shadowと愉快なコード達
    Please correct me if my concept is wrong
    • 回答としてマーク らの太郎 2011年8月8日 0:43
    2011年8月5日 17:19
  • TextBox と CalendarExtender だけを貼り付けて何度か Azure にデプロイしてみましたが、現象が再現する時としない時がありました。
    不具合が再現する時には、CSS (/WebResource.axd?d=xxxxxxxxxxx) を読み込もうとして 404 エラーが発生しているようです。

    関連しそうなのが次のスレッドではないかと思われるのですが、

    Problem Deploying AJAX Application to Azure
    http://social.msdn.microsoft.com/Forums/en/windowsazure/thread/751e27a9-4108-4446-9870-411f409d2c08?prof=required&lc=1033

    これによると、タイムゾーンの絡みで AssemblyResourceLoader が正しく動くようになるまで "few hours" 待たないといけないそうで...。(ホンマかいな)
    待てない人は AjaxControlToolkit から CSS を抜いてきてコンテンツとして配置しろ、ということのようです。

    参考までに CalenderExtender の CSS の最新版はここにあります。
    http://ajaxcontroltoolkit.codeplex.com/SourceControl/changeset/view/82f5412e41bd#Server%2fAjaxControlToolkit%2fCalendar%2fCalendar_resource.css

    追記:
    CSS は CDN を使うというのもありかもしれないですね。

    Ajax Control Toolkit version 40412 - ASP.NET Ajax Library
    http://www.asp.net/ajaxlibrary/CDNACT40412.ashx
    • 編集済み totojo 2011年8月7日 17:41 CDN を追記
    • 回答としてマーク らの太郎 2011年8月8日 0:43
    2011年8月6日 5:20
  • 昼過ぎにデプロイしてデプロイした直後はカレンダーの表示が変だったのですが、そのまま放っておいたやつを今見たらカレンダーはちゃんと表示されました。
    "few hours" 待てば AssemblyResourceLoader が正しく動くようになるというのは、どうやら本当のようです。 
    • 回答としてマーク らの太郎 2011年8月8日 0:43
    2011年8月6日 14:37
  • Shadow And Happy Codeさん


    totojoさん

     

    ご回答頂き有難う御座いました。

    私の方でも確認しました所、

    "few hours"の通り、普通にカレンダー表示されておりまして、

    再デプロイした直後確認した所、先日添付した、

    表示のおかしいカレンダーになりました。

     

    ご教授頂いた、CSSを記載しておく様に対処しておこうかと思います。

     

    有難う御座いました。

    2011年8月8日 0:46