ASP.NETでRadioButtonListの項目の背景を設定したい

Question

VB2010(.NetFramework4)による開発です。

動的に作成したRadioButtonListで、RepeatLayoutをTableとした場合に、指定した項目のみの背景に色を指定するため、

Items.Addの後で、項目のインデックスに対してAttributes.Add("class", "ShowAreaAlert") としてスタイルシートを

指定しました。この場合、<td>の後に<span>がきさいされ、それに対するスタイル設定となってしまい、文字がある

範囲までしか色が付きませんでした。

<td>に対してスタイルを設定することはできるのでしょうか。

.ShowAreaAlert {
	color:yellow;
	-moz-border-radius: 5px;
	-moz-text-shadow: #000000 2px 2px 2px;
	border-radius: 5px;
	text-shadow: #000000 2px 2px 2px;
	background-image: url(../img/alertback.gif);
	background-repeat:repeat-x;
	background-nbsp;left top;
	padding-right:20px;｝

Answer 1

ShowAreart td{}

のスタイルを定義すれば良いんじゃ無いでしょうか。

Answer 2

かるあ様 返信ありがとうございます。

私の説明が足りていませんでした。

複数の項目を追加していまして、概ね10項目ほどあります。

たとえば、そのうちの、9番目だけに背景色をつけるといったことを検討しています。

また、タグの構成としては、以下のようになっておりまして、<td>は<span>の上位にあります。

<tr>
  <td>
    <span class="ShowAreaAlert">
      <input id="RBLConstructionList_9" type="radio" name="RBLConstructionList" value="marumaru@@@○○地区@@@1" />
      <label for="RBLConstructionList_9">　○○地区</label>
    </span>
  </td>
</tr>

.ShowAreaAlert {　を　.ShowAreaAlert  td{ としてみましたが、色は付きませんでした。

Answer 3

コードビハインドではなかなか難しそう（調べたけどわからなかったということです）なので、jQueryでなんとか・・・（＾＾；

もともと点滅も客先指定だったので、attribute.addでダミーのスタイル「dmclass」を指定し、jQueryで親要素にスタイルを追加しました。

とりあえずは、これで目的のことができましたが、よりよい方法をご存知の方がいらっしゃいましたら、返信よろしくお願いいたします。

    <script type="text/javascript">
        $(function () {
            $('.dmclass').parent().addClass('ShowAreaAlert');
            setInterval(function () {
                $('.ShowAreaAlert').parent().fadeOut(500, function () { $(this).fadeIn(500) });
            }, 1000);
        });
    </script>

Answer 4

難しいですね。

<tr><td>タグは固定的に出力されていて、ASP.NETのサーバーサイドでは介入できなさそうでした。

CSS4のsubject機能を使えば

!td > .ShowAreaAlert {
  ...
}

で表現できそうですが、まだ仕様も固まっていませんし、対応ブラウザーもどうなんでしょう。

副作用があるかもしれませんが、<span class="ShowAreaAlert">を横幅いっぱいに伸ばすようスタイルを定義するとか。後はクライアントサイドのJavaScriptで走査して<span class="ShowAreaAlert">を見つけたらその親を<td class="ShowAreaAlert">にセットしてやるか…。

う～ん。

Answer 5

佐祐里 様 返信ありがとうございます。

CSS4は思いつきませんでした。佐祐里様のおっしゃられるように対応ブラウザーがネックになりますよね。

ShowAreaAlertのスタイルに、Width: 100%　やら 600pxやら いろいろやってみましたが、影響は

ありませんでした(T_T)

とりあえず、佐祐里様のおっしゃられるように「クライアントサイドで」ってのをｊQueryに任せました（＾＾；）

Answer 6

ShowAreaAlertのスタイルに、Width: 100%　やら 600pxやら いろいろやってみましたが、影響はありませんでした(T_T)

質問文に挙げられているCSSですが「background-nbsp;left top;」ってなんでしょう？ 存在しないプロパティや構文になっているので、どこまで解釈されて、どの範囲がスキップされるのか不明確ですから、正しく書くことをお勧めしますよ？

それとspanはインライン要素なので、まずdisplayを変えるところから始めるべきかと。

# jQueryに任せるならそれはそれでかまいませんが。

Answer 7

佐祐里 様 返信ありがとうございます。

「background-nbsp;left top;」の件ですが、コピペのときに化けてしまったようです。実際は、

「background-position」としています。お騒がせしました。

なるほど、spanはdisplay要素で・・・。知りませんでした・・・。

以上を踏まえて、Attributes.Add("class", "ShowAreaAlert") に戻して、スタイルを以下のようにしました。

.ShowAreaAlert {
	color:yellow;
	-moz-border-radius: 5px;
	-moz-text-shadow: #000000 2px 2px 2px;
	border-radius: 5px;
	text-shadow: #000000 2px 2px 2px;
	background-image: url(../img/alertback.gif);
	background-repeat:repeat-x;
	background-position：left top;
	display:inline-table;
	width:100%;
	width /*\**/: 98%; /*IE8対応*/
}

Answer 8

結局、css の書き方の問題だったようですね。

つまり、td の中に配置された span（インライン要素なので
width は無視される）に background-image を repeat-x で
適用したが、「td の幅」＞「span の中の文字の幅」の場合、

> 文字がある範囲までしか色が付きませんでした

という結果になったということと理解しています。

ところで、css がまだ変です。

> background-position：left top;

コロンが全角です。

> display:inline-table;

inline-block の方がいいのではありませんか？

inline-blockとinline-table
http://wiki.stsd.info/html/aW5saW5lLWJsb2Nr44GoaW5saW5lLXRhYmxl.html

Answer 9

よっぽどキー入力が不得手なんでしょうね。

いっそのことinline-tableやinline-blockにせず、blockにしてしまえば幅いっぱいに広がってくれるので、widthを100%だの98%だのしなくても済みそうですけど。よく調べてませんが（was 副作用があるかもしれませんが）。

CSSについては言い出すときりがなくて、-moz-text-shadowを認識するブラウザーは存在しなくて（Firefoxも！）、-moz-border-radiusもFirefrox 3.6以下です。どっちも不要でしょう。

Answer 10

SurferOnWww様 返信ありがとうございます。

まさにおっしゃるとおりのような状況でした。

コロンが全角の件、説明不足でしたね （＾＾；）　ちょっとした手間を惜しんでしまいました。

「コードブロックの挿入」で、「background-position：left top;」と入力(コピペ)したら、何故か化けてしまったのです（この返信もやっぱりおかしくなってしまいましたので、編集で「：」にしています）。

後から「編集」で直すときに、「全角なら大丈夫だろう」ということで

全角入力しなおしました。実際は半角で入力しています。IDEでエラーが出るのでそのままには(^^;;

inline-blockとinline-tableの件ですが、一応一折全部試してからinlineｰtableを選びました。

inline-blockとしてwidth: 100% を入れると、IE9とChromeではRadioButtionListの枠からはみ出してしまいました。

width: 100% を入れないと、文字列の幅となり、これはNGでした。

そこで、inline-tableとしたところ、Chromeでは枠からはみ出ず、IE9とIE8でははみ出してしまい、

苦肉の策で、「width /*\**/: 97%; /*IE8対応*/」を入れました。

はみ出したのは、他の要素の問題もあるのかもしれません。inline-tableとして問題ないのであれば、

こちらで良いかなと思いました。

Answer 11

佐祐里 様 返信ありがとうございます。

「よっぽどキー入力が不得手なんでしょうね。」の件ですが、そうではないんですね(^^;;

前にも記載しましたが、コードはそのままコピペしてます。全角コロンはIDEでエラー表示となるので、気がつきます(不得手だからコピペだろうといわれてしまうかもですが、とりあえず動いているコードをそのままが確実であるということです)。

SurferOnWww様への返信に記載しましたが、「投稿」後に表示がおかしくなってしまうため、全角に手入力しなおしました。ちゃんと説明をしてなかった当方の不手際でした。

-moz-text-shadowは、確か、Ajaxのサンプルに記載されていたCSSを参照していました。

あまり深くは考えていなかったのですが、今回の顧客の関係上古いブラウザを使用されている可能性も十分あるので、ご説明をいただいて、「入れておいた方がよさそう」であるということが再認識できました。

ブラウザのバージョンについては、サポートやセキュリティ、HTMLやCSSのバージョンの問題も含まれているので提案はしていきますが、最終判断としてはお客様次第というところがありなかなか思うように行かないところです。

以前も、「IE6でないとダメだ！」というお客様もいて色々苦労しました(^^;;

さすがに今回は事前に通達しているので、IE8以降であると思います。ただ、FireFoxについては名言していませんでしたので、何を言われるか・・・　ログインページには、「最新版を・・」という記載を入れてありすので、そちらを見ていただけていれば、よいのですが・・　　とこれはグチでした(^^;)

Answer 12

オフトピですみませんが、書いておきます。

フォーラムの投稿フォームについては、よくわかりません。私は大体入力したままの文字が表示できています。

挙げられたCSSについては、出典の不確かなコピペ臭がしていました。-moz-text-shadowが含まれている時点で動作環境を意識していないコードです。つまり動作環境を意識していないコードをコピーしてきて構わないのだから、「IE6でないとダメだ！」というお客様向けのコードではないと判断しました。また「-moz」「/*IE8対応*/」とあるのでFirefoxとIE8以降は動作環境なのだと判断しました。
その上で先のコメントになります。私自身は、IE6対応が必要ならそのように書きますし、不要なら不要で対応バージョンに絞った書き方をします。

で、 display: block; はダメでした？ widthが不要になり、IE8対応も必要なくなると思ったのですが。
# もちろん確かめてません。

Answer 13

佐祐里 様 返信ありがとうございます。

こちらは、Windwos7 Pro x64 での Chrome 23.0.1271.64 からの投稿です。そのあたりの影響なのかもしれません。

おっしゃる通り、IE6の件は、今回の案件での要求はありません。

CSSの記述は照査して、よりベターなものを検討してみます(www.dextronet.com/css-buttons-generator/ あたりも参考にしてたりしますので、こちらの抜粋かもしれません)。

「display : block;」は行けました。思った通りの表示ができています。ありがとうございます。

報告が遅くなりましてすみませんでした。

Answer 14

こんにちは、Kino001 さん
フォーラムオペレータの佐伯 玲 です。

投稿のご確認はテスト投稿フォーラムでも行えますので今後またご確認されたい場合にはテスト投稿フォーラムをご活用いただければと思います。

テスト投稿フォーラム
http://social.msdn.microsoft.com/Forums/ja-JP/384/threads

MSDN フォーラムではご質問の解決と併せて解決後も同じ問題や疑問をお持ちの方がスレッドを見直すだけで解決できるよう事も目的とさせていただいております。
可読性という意味合いからKino001 さんのテスト投稿はこちらで削除させていただきました。

ご理解、ご協力のほど宜しくお願い致します。
__________________________
日本マイクロソフト株式会社 フォーラム オペレータ 佐伯 玲

Answer 15

テスト投稿には専用フォーラムを使用してください。ついでに「<span class="ShowAreaAlert">を横幅いっぱいに伸ばすようスタイルを定義する」という私の返信は回答になったのではないでしょうか。チェックしていただけたらと思います。「いっそのことinline-tableやinline-blockにせず、blockにしてしまえば」も参考になったかと思います。

ちなみに私もChrome 23を使用していますが、先ほどの display: block; も何の問題もなく投稿できています。余分なスペースも必要ありませんし。

Answer 16

佐伯 様

ASP.NETフォーラムでのテスト投稿すみませんでした。

削除の件、了解いたしました。

以後、テスト投稿は、テスト投稿フォーラムで行うようにいたします。

Answer 17

佐祐里 様 返信ありがとうございます。

テスト投稿フォーラムの件は、調査不足でした。すみませんでした。

テスト投稿フォーラムでテストしてみました。

どうやら 「position」と「:」を継続して記述すると、positionからコロンとそれに付随する文字列がごっそり消えてしまうようでした。

Answer 18

CSSもいろいろ投稿していたつもりでしたが、ｐｏｓｉｔｉｏｎ：が書き込めないのは知りませんでした。

というわけで勝手ながらMSDN / TechNet フォーラムへのご意見ご要望にｐｏｓｉｔｉｏｎ： が書き込めないを投稿しました。

Answer 19

佐祐里 様 返信ありがとうございます。

またテスト投稿での確認ありがとうございました。