@mediaprint印刷用のCSSでGridViewが表示されない問題について

このQ&Aのポイント
  • GridViewが表示されない問題について解決方法を教えてください
  • 印刷用のCSSを用意し、ListViewとGridViewの印刷をする方法について教えてください
  • GridViewが真っ白になる問題を解決する方法を教えてください
回答を見る
  • ベストアンサー

@mediaprint

印刷用のCSSを用意して、 ListViewとGridViewのそれぞれのページを印刷したいのですが、 GridViewがあるページが表示されません。(真っ白ページになります) どのようにすればGridViewを表示することができるでしょうか ---html <div id="table_pnl" class="table-responsive">  <asp:GridView ID="_listView" runat="server" class="table table-responsive table-bordered table-hover table-striped grid" ClientIdMode="Static">  </asp:GridView> </div> ---css body{ margin: 0; font-size: 5pt; } #wrapper{ padding: 0; } #page-wrapper{ padding: 0; } .navbar{ display: none; } #print_eria{ border: none; } #print_eria div{ display: none; } #print_eria .panel-body, #print_eria .table-responsive, #print_eria #comment_new_erea, #print_eria .print-header, #print_eria .print-footer{ display: block!important; } .panel-body{ padding: 5px; } .table-responsive tr{ display: table-row; } .table-responsive td, .table-responsive th{ display: table-cell; } .table-responsive thead { display: table-header-group!important; } .table-hgroup thead { display: table-header-group; color: #ff0000; }

  • CSS
  • 回答数1
  • ありがとう数12

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

示された部分以外に原因があるようです。 とりあえず、それをmedia="screen"に変更(screen用のスタイルと置き換えて)して、firebigなどで、スタイル指定を確認すること。 ・HTMLからプレゼンテーションに関わる物をなくすこと ・セレクタは基点セレクタからきちんと書かないとメンテナンス出来ないですよ。 (例) <div id="table_pnl" class="table-responsive"> じゃなくて、 <div id="data1"> div.section div#data1{} とかね。

ekekojr
質問者

お礼

ありがとうございます! 記載の部分以外に問題がありました。 無事解決できました! ありがとうございます!

関連するQ&A

  • HTMLで横幅をCSSで設定できません。

    HTMLで横幅をCSSで設定できません。 headerを作成しているのですが、画像のように横幅が外枠の wrapperをはみ出して表示されてしまいます。 はみ出した値は5pxとpaddingで指定した値と一致します。 headerをtableタグで作成した場合、横幅700pxの枠中での padding-left:5px;になり、横幅には変化はありません。 しかし、<div id="header">で横幅を700pxとし、 padding-left:5px;とすると、headerの横幅が 5px増えてしまいます。 <div id="header">の横幅を変化させずに、 paddingを指定することは可能なのでしょうか。 わかる方いらっしゃいましたら宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> </div> </body> </html> ■CSS #wrapper { width: 700px; } #header { width: 700px; padding-left: 5px; }

    • ベストアンサー
    • HTML
  • ヘッダーのみ固定について

    ヘッダーのみ固定させたいのですが、IE6だけコンテンツ部分とナビ部分が開いてしまいます。 開かなくする為にはどうすればいいでしょうか? CSS * html body { overflow: hidden; } body{   margin: 0px;   padding: 0px; } .clear { overflow: hidden; display: block !important; display: inline-block; } #wrapper { width: 900px; margin: 0 auto; } #header { width: 900px; height: 100px; position: fixed !important; position: absolute; } * html div#header{ position: absolute; top: expression(eval(document.documentElement.scrollTop+0)); } #content { width: 900px; padding-bottom: 25px; background: #fff; padding-top: 135px; overflow: auto; } #global_navi { display: block !important; display: inline-block; overflow: hidden; position: fixed !important; padding-top: 100px; } HTML <div id="wrapper"> <div id="header"> <h1>○○○○</h1> <div class="header_logo"><a href="index.html"><img src="img/header_logo.gif" alt="" width="400" height="60" /></a></div> </div> <ul id="global_navi"> <li class="gn01"><a href="index.html">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> </ul> <div id="content" class="clear"> <div class="index_left"> </div> <div class="index_right"> </div> </div> <div id="footer" class="clear"> </div> </div>

    • ベストアンサー
    • HTML
  • ディスプレイサイズにあわせた背景画像

    html、cssは独学、javaはネットに上がっているものを活用させていただく程度の質問者です。 メインコンテンツ<wrapper>と<body>にかけて右角にラインの画像を斜めに貼り付けたサイトを作成しようと思っています。 今のところ下記のように書いているのですが、これだとlineのwidth=300pxのせいで、ブラウザに横スクロールが出来てしまいます。この横スクロールが出ないように設定したいのです。 例えば、ディスプレイのサイズを取得してlineのwidthを調整するとかlineを斜めにリピートするとか。 なにかよい方法がありましたら、お教え下さい。よろしくお願い致します。 *****html部分************************************ <body> <div id="wrapper"> <div id="header"> <div class="line"></div> </div> </body> ************************************************ *****css部分************************************ body{ width:auto; margin:0; padding:0; background:url(../images/body_bg.jpg) repeat; } div#wrapper{ width:850px; margin:0 auto; padding:0; background:url(../images/wrapper_bg.gif) repeat-y; } div#header{ width:850px; height:210px; margin:0 auto; background:url(../images/header_bg.gif) no-repeat;//ライン画像の一部 position:relative; } div#header div.line{ width:300px; height:200px; background:url(../images/line.jpg) repeat-x;//ライン画像 position:absolute; left:850px; top:0; } ************************************************

  • CSSでブラウザ判別した場合の表記方法

    スタイルシートでブラウザを判別して それにみあった表示を行うようにしたいと思っています。 header('content-type:text/css'); img{border:none;}#共通 p{color:#000000;}#共通 <?php $Agent = getenv( "HTTP_USER_AGENT" ); if( ereg( "Firefox", $Agent ) ){ print <<<END body{background-color:#FFFFFF;} #wrapper{ margin:0 auto; padding:0; } END; } elseif( ereg( "MSIE", $Agent ) ) { print <<<END body{background-color:#000000;} #wrapper{ margin:0 auto; padding:0; } END; } else { print <<<END body{background-color:#666666;} #wrapper{ margin:0 auto; padding:0; } END; } ?> スタイルシート側の記述を上記のようにしております。 ですが、どうしてもエラーが でてしまいます。 どこがおかしいかわからず困っております。 どうかお教えください。

    • ベストアンサー
    • PHP
  • ディスプレイのサイズに合わせた背景画像

    html、cssは独学、javaはネットに上がっているものを活用させていただく程度の質問者です。 メインコンテンツ<wrapper>と<body>にかけて右角にラインの画像を斜めに貼り付けたサイトを作成しようと思っています。 今のところ下記のように書いているのですが、これだとlineのwidth=300pxのせいで、ブラウザに横スクロールが出来てしまいます。この横スクロールが出ないように設定したいのです。 例えば、ディスプレイのサイズを取得してlineのwidthをちょうせいする。とかlineを斜めにリピートするとか。 なにかよい方法がありましたら、お教え下さい。よろしくお願い致します。 *****html部分************************************ <body> <div id="wrapper"> <div id="header"> <div class="line"></div> </div> </body> ************************************************ *****css部分************************************ body{ width:auto; margin:0; padding:0; background:url(../images/body_bg.jpg) repeat; } div#wrapper{ width:850px; margin:0 auto; padding:0; background:url(../images/wrapper_bg.gif) repeat-y; } div#header{ width:850px; height:210px; margin:0 auto; background:url(../images/header_bg.gif) no-repeat; position:relative; } div#header div.line{ width:300px; height:200px; background:url(../images/line.jpg) repeat-x; position:absolute; left:850px; top:0; } ************************************************

    • 締切済み
    • CSS
  • cssの中にテーブルを入れると崩れる。

    html+CSSでページを作っていて 途中にテーブルを入れると レイアウトが崩れます。 テーブルのすぐ右横に次の見出しが来てしまったりします。 どうしたらいいでしょうか? <body> <div id="wrapper"> <div id="header"> ~略~ </div> <div id="contents"> <h2> ●●● </h2> <h3> ●●● </h3> 例えばココに<table>~</table> <h2> ●●● </h2> <h3> ●●● </h3> </div> </div> </body> とするとこのテーブルの真横に次の<h2>が来てしまいます。 テーブルの用途は料金表などで、レイアウト的に使うのではありません。 どなたかご教授下さい。 宜しくお願いいたします。

    • ベストアンサー
    • CSS
  • javascriptでid要素の取得について

    お世話になります。 最近、javascriptの勉強を始めたたのですが、 以下の違いがよくわかりません。 ------------------------------------------------------- <html> <head><title>Test</titile></head> <body> <div id='wrapper'></div> </body> </html> <script language='javascript'> function aaa() { document.getElementById("wrapper").style.display = "none";//---(1) wrapper.style.display = "none"; //---(2) } </script> (2)は、document等省略してますが、その違いは無視して 頂ければと思います。 (1)でわざわざgetElementByIdを使用してid要素を取得 するメリットがわかりません。 初心者の質問で申し訳ありませんが、よろしくお願い致します。

  • 背景色が重なるもしくはつかない

    こんばんは、お世話になります。 背景色が重なる、もしくは色がつかないのですが どのようにしたらよいでしょうか? 因みにヘッダーのメニューの後ろにも灰色を付けています。 ご教示お願いします。 @charset "utf-8"; body { color: lightblue; } .wrapper { width: 960px; margin: 0 auto; overflow: hidden; padding: 0px 0px 10px 10px; } .wrapper .col { float: left; width: 25%; } .wrapper .col .item { display: block; margin: 5px 5px 5px 5px; padding: 10px; } .imgbox img { width: 100%; height: 100%; object-fit: cover; vertical-align: bottom; border-radius:15%; } .fadein { opacity : 0; transform : translate(0, 100px); transition : all 1s; } .fadein.active{ opacity : 1; transform : translate(0, 0); } a.header { display: block; text-decoration: none; } .header { background-color: rgba(0,0,0,.1); margin: 0; } ul{ display: flex; flex-wrap: wrap; } .header ul { display: flex; justify-content: center; } .header li { font-size: 15px; list-style-type: none; } .header li:not(:first-of-type) { margin-left: 1rem; } .header a { color: #000; padding: 20px; } .text li{ width: 50%; padding: 20px; box-sizing: border-box; /* 透過・非表示 */ opacity: 0; visibility: hidden; /* 要素の位置指定・アニメーション */ translate: 0 20px; transition: 1s; } img{ width: 100%; height: auto; } /* クラス付与で表示する */ .is-active{ opacity: 1; visibility: visible; translate: 0 0; } header li{ opacity: 1; visibility: visible; display: block; /* 縦に並べる*/ list-style-type: none; padding: 0.5em; background: #ccc; }

    • ベストアンサー
    • CSS
  • Firefox2.0で背景が上段に集まってしまいます。

    以下のCSS、HTMLでdiv要素を分けて3つの細いgif画像を見た目は一つの背景になるように指定しているつもりです。真ん中のdiv要素をy方向にリピートさせて記事が長くなっても背景が崩れないページを作りたいと思っております。 IE7.0では問題なく表示してくれるのですがFirefox2.0になると背景が上段に集まってしまいます。 すみませんが改善方法をアドバイスよろしくお願い致します。 【CSS】 body { font-family: "MS Pゴシック"; margin: 0px; padding: 0px; text-align: center; background: #E8FFFF fixed; } #wrapper { text-align: left; margin: 0px auto; padding: 0px 0px 0px 20px; height: auto; width: 900px; background: url(background_3.gif) repeat-y; } #head-background { margin: 0px auto; height: 17px; width: 900px; background: url(background_7.gif) no-repeat; padding: 0px; } #header { margin: 0px; padding: 0px; height: 20px; width: 800px; } #footer {     clear: both width: 900px;     background: url(background_6.gif) no-repeat; margin: 0px auto; padding: 0px; } 【HTML】 <body> <div id="head-background"> </div> <div id="wrapper"> <div id="header"> ・・・・・(ロールオーバーリンク) </div> <div id="header"> ・・・・・(MPEG画像) </div> </div> </div> <div id="footer"> </div> </BODY> </HTML>

    • 締切済み
    • CSS
  • フロートするとIE7だけレイアウトがくずれる

    IE7以上、FireFox3以上の対応でコーディングをしています。 下記のようなレイアウトでIE7でだけ<div id="main">のカラムの中のテーブルだけがおちてしまします。 レイアウトとしては、全体には幅指定をせず、サイドナビゲーションにのみ幅指定をしています。 と言うのも、mainの中のテーブルの大きさが各ページ違い、かなり大きなサイズのテーブルになるため、大きくなるテーブルはブラウザからわざとはみ出させるためです。 幅の小さなテーブルがあるページはブラウザ内に収まり、幅の大きなテーブルはブラウザからはみ出します。 幅指定をしていないので、navi main 両方にフロートをかけることはせず、naviにのみフロートをかけ、mainには左側にマージンを入れています。 これでFFとIE8では思い通りに表示されています。 IE7だけブラウザ幅を超えるテーブルがあるページのテーブルのみが下におちてしまいます。 --------------------------------------------- <body> <div id="all"> <div id="header">ヘッダー</div> <div id="wrap" class="C"> <div id="navi">ナビゲーション</div> <div id="main"> <table> <thead> <th>あかさたな</th> <th>あかさたな</th> </thead> <tbody> <td>はまやらわ</td> <td>はまやらわ</td> </tbody> </table> </div> </div> </div> CSS------------------- #all{ min-width:850px; } #wrap{ padding:20px 20px; margin:0 0; } #navi{ float:left; width:190px; padding:0; } #main{ margin:0 0 0 200px;  } どうすればIE7でもIE8と同じ表示にできるか、テーブルが落ちてしまわないかわかる方はいらっしゃいませんでしょうか? よろしくお願いします。

    • ベストアンサー
    • CSS

専門家に質問してみよう