ASP.Net vertical spacing on a ValidationSummary control

1.4k views Asked by At

Within ASP.Net 4.0 is it possible to increase the vertical spacing between the errors\warnings that appear on a ValidationSummary control?

I'm finding that they are just a little to close to each other.

Thanks

2

There are 2 answers

9
Dave Walker On BEST ANSWER

As above (IrishChieftain) but target the li nodes that get generated?

<asp:ValidationSummary CssClass="valSummary"

.valSummary li 
{
    padding-bottom: 10px;
}

If you want to have the ValidationSummary with a displaymode of 'List' then you have very little chance to style this as the html that is generated is just text with breaks

e.g.

<div id="MainContent_ValidationSummary1" class="valSummary" style="">
    Following error occurs:
    <br>
    Input Country!
    <br>
    Input Region!
    <br>
</div>

However you can set the DisplayMode to be BulletList and use CSS to hide the bullet points which will give you the same effect

e.g.

<asp:ValidationSummary CssClass="valSummary" DisplayMode="BulletList" .. />

.valSummary li 
{
    padding-bottom: 10px;
    list-style-type: none; /* Or can just use list-style: none; */
}

Which is what I think you are after.

3
IrishChieftain On

Just add some padding in CSS and apply that CSS class in your markup, to the control.

.valSummary
{
    padding-bottom: 10px;
}