【发布时间】:2013-05-16 04:45:23
【问题描述】:
我正在使用 ASP.Net C# 中的 Web 应用程序,在我的字段验证器上使用 AjaxControlToolkit ValidatorCalloutExtender 控件。扩展器弹出窗口呈现如下:
(注意错误消息框和标注箭头之间的空格)。我知道为什么会这样;我有一个表格,其中包含我要验证的控件,并在表格中放置,并且我的 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(抱歉,我必须将其作为图像发布)。
【问题讨论】:
-
标注扩展器上是否有类/ID?
-
把
position:relative; left:3px;加到小角落的东西上,不看更多信息很难说 -
当弹出窗口呈现时 - 它在呈现的 HTML 中是否有 ID?
-
@vcsjones - 我一直在玩弄标注扩展器的 CSS,但没有得到任何结果。在imaginativeuniversal.com/blog/post/2008/09/04/…,我读到如果您想更改其样式中的任何内容,则必须覆盖所有内容,因为否则它不会正确呈现嵌套类。我会将我一直在使用的覆盖添加到上面的代码中。
-
@Connor - 不幸的是,这不起作用,因为 ASP.Net 将弹出窗口呈现为表格。我将在上面添加这些呈现的弹出窗口之一的示例。
标签: asp.net css ajaxcontroltoolkit