フィールドバリデーターで AjaxControlToolkit ValidatorCalloutExtender コントロールを使用して、ASP.Net C# で Web アプリケーションに取り組んでいます。エクステンダー ポップアップは次のようにレンダリングされます。
(エラー メッセージ ボックスとコールアウト矢印の間のスペースに注意してください)。なぜこれが起こっているのか知っています。検証中のコントロールを含むフォームがテーブルに配置されており、フォーム テーブルの CSS に次のものがあります。
.formTable td, .formTable th
{
padding: 3px;
}
行をコメントアウトするとpadding: 3px;
、ポップアップは問題ないように見えますが、フォームのレイアウトが悪くなります。
私の質問は次のとおりです。フォーム レイアウト テーブルにパディングを残したまま、テーブル内でレンダリングされるポップアップで無効にする方法はありますか?
編集:これは、バリデータコールアウトのスタイリングをオーバーライドするために私が遊んでいた完全なCSSです。
.ajax__validatorcallout_popup_table
{
/* display: none; */
border: none;
background-color: transparent;
padding: 0px;
}
.ajax__validatorcallout_popup_table_row
{
vertical-align: top;
height: 100%;
background-color: transparent;
padding: 0px;
}
.ajax__validatorcallout_callout_cell
{
width: 20px;
height: 100%;
text-align: right;
vertical-align: top;
border: none;
background-color: transparent;
padding: 0px;
}
.ajax__validatorcallout_callout_table
{
height: 100%;
border: none;
background-color: transparent;
padding: 0px;
}
.ajax__validatorcallout_callout_table_row
{
background-color: transparent;
padding: 0px;
}
.ajax__validatorcallout_arrow_cell
{
padding: 8px 0 0 0;
text-align: right;
vertical-align: top;
font-size: 1px;
border: none;
background-color: transparent;
}
.ajax__validatorcallout_callout_arrow_cell .ajax__validatorcallout_innerdiv
{
font-size: 1px;
position: relative;
left: 1px;
border-bottom: none;
border-right: none;
border-left: none;
width: 15px;
background-color: transparent;
padding: 0px;
}
.ajax__validatorcallout_callout_arrow_cell .ajax__validatorcallout_innerdiv div
{
height: 1px;
overflow: hidden;
border-top: none;
border-bottom: none;
border-right: none;
padding: 0px;
margin-left: auto;
}
.ajax__validatorcallout_error_message_cell
{
font-family: Verdana;
font-size: 10px;
color: red;
padding: 5px;
border-right: none;
border-left: none;
width: 100%;
}
.ajax__validatorcallout_icon_cell
{
width: 20px;
padding: 5px;
border-right: none;
}
.ajax__validatorcallout_close_button_cell
{
vertical-align: top;
padding: 0px;
text-align: right;
border-left: none;
}
.ajax__validatorcallout_close_button_cell .ajax__validatorcallout_innerdiv
{
border: none;
text-align: center;
width: 10px;
padding: 2px;
cursor: pointer;
}
編集:これは、ポップアップテーブル用にASP.NetでレンダリングされたHTMLです(申し訳ありませんが、画像として投稿する必要があります)。