0

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

user1131661
  • 229
  • 3
  • 8
  • 19

2 Answers2

2

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.

Dave Walker
  • 3,498
  • 1
  • 24
  • 25
  • Hi, I've done that but that does nothing. Am I missing something really obvious. Again my style sheet is the following: .valSummary li { padding-bottom: 1320px; } And my ASP block is: – user1131661 Feb 03 '12 at 15:03
  • No looks fine to me. Do you have a URL you can post? – Dave Walker Feb 03 '12 at 15:19
  • No sorry I don't at the moment. Any else I could provide? – user1131661 Feb 03 '12 at 15:41
  • Anything else I could provide? (Sorry about the typo!) – user1131661 Feb 03 '12 at 15:49
  • Ok if you look at http://snipt.org/zgloj0 here you can see I have three validators and a style on the validation summary, and a style at the top. If you put that into a normal asp.net page then it will work – Dave Walker Feb 03 '12 at 16:09
  • Can you try set the background colour of the li - or use firebug and make sure you are targeting it correctly? It could be some other style is overwriting it somehow. Base behaviour for the validation summary with that style should work. – Dave Walker Feb 03 '12 at 16:11
  • Thanks for the code example. This works if I set the DisplayMode to BulletList but if I set the Display mode to List (which is what I want) it no longer works? Weird!? Any ideas on that? Also, it only seems to apply to the Page when the CCS Class is added to the ContentHead section of the ASP page. When I move the .valSummary to my global style sheet it's no longer applyied (but other styles are)? – user1131661 Feb 06 '12 at 09:01
  • Ok so you have two points there. The first is that DisplayMode="List" generates HTML that you can't really style in the way you want. I have changed my answer to include this. The second point is that your style is not being applied if you put it into the global stlye sheet. Ignoring the obvious sanity test of 'are you sure your global css is being loaded' then I would guess that it is being overridden somewhere/somehow. Try put a !important after the line and see if that overrides it. If you haven't used it then try firebug for firefox it will help you no end. – Dave Walker Feb 06 '12 at 09:36
  • OK thanks. I've used the BulletList now. Also I've found the problem with the style sheet. I wasn't loading it correctly! Doh! Thanks for all your help, it's really appreciated. – user1131661 Feb 06 '12 at 11:02
1

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

.valSummary
{
    padding-bottom: 10px;
}
IrishChieftain
  • 15,108
  • 7
  • 50
  • 91
  • 1
    Padding would probably be better, in case a single error message wraps lines – Mark Brackett Feb 02 '12 at 21:57
  • Hi, thanks for the reply but that makes no difference. – user1131661 Feb 03 '12 at 09:21
  • Sorry, ignore the above comment. Real one belew: Hi, thanks for the reply but that makes no difference. I've pasted the code the I've used below: When I view the ValidationSummary in design mode the extra spacing has been added to the bottom below the errors. I want the spacing in appear between the errors. Thanks. – user1131661 Feb 03 '12 at 09:35