changing the display property from inline to block in C# RSS

• • Reply
  

  newbie06

  Member

  625 Points

  458 Posts

  changing the display property from inline to block in C#

  Dec 19, 2007 08:18 PM|LINK

  I want the Validation controls to display "block" rather than "inline". I have added the following lines to the Page_Load event:

  RequiredFieldValidatorFirstName.Style["display"] = "block";

  RequiredFieldValidatorLastName.Style["display"] = "block";

  RequiredFieldValidatorDateOfBirth.Style["display"] = "block";

  While this works for the Label control and the inline is changed to block it does not seem to work for the validation control.

  LabelErrorMessage.Style["display"] = "block";

  Any ideas? Newbie

  • Moved by pkellner on Dec 19, 2007 08:24 PM
• • Reply
  

  karan@dotnet

  All-Star

  26228 Points

  4596 Posts

  Re: changing the display property from inline to block in C#

  Dec 19, 2007 08:36 PM|LINK

  Try:

    RequiredFieldValidatorDateOfBirth.Attributes.Add("display","block"); 

  Thanks,
  Karan
  
  ~ Blog ~
  
  Remember To Mark The Post(s) That Helped You As The ANSWER
• • Reply
  

  karan@dotnet

  All-Star

  26228 Points

  4596 Posts

  Re: changing the display property from inline to block in C#

  Dec 19, 2007 08:38 PM|LINK

   RequiredFieldValidatorDateOfBirth.Style.Add("display", "inline");

  Thanks,
  Karan
  
  ~ Blog ~
  
  Remember To Mark The Post(s) That Helped You As The ANSWER
• • Reply
  

  newbie06

  Member

  625 Points

  458 Posts

  Re: changing the display property from inline to block in C#

  Dec 20, 2007 09:06 PM|LINK

  <div class="" id=61 _vpps_id="61" containedtag="SPAN"> <div style="MARGIN: 0px 0px 0px 120px">This is what I get when I put this line in my Page_Load event -

  RequiredFieldValidatorFirstName.Attributes.Add("display", "block");

  </div> <div style="MARGIN: 0px 0px 0px 120px"><span style="color: Red; display: inline;" display="block" id="ctl00_DefaultMasterPageContentPlaceHolder_RequiredFieldValidatorFirstName"></div> <div style="MARGIN: 0px 0px 0px 130px">

  First Name is required.

  </div> <div style="MARGIN: 0px 0px 0px 120px"></span></div> <div style="MARGIN: 0px 0px 0px 120px"> </div> <div style="MARGIN: 0px 0px 0px 120px">This line does not effect anything -

  RequiredFieldValidatorDateOfBirth.Style.Add("display", "block");

  <div class="" id=66 _vpps_id="66" containedtag="SPAN"> <div style="MARGIN: 0px 0px 0px 120px"><span style="color: Red; display: inline;" id="ctl00_DefaultMasterPageContentPlaceHolder_RequiredFieldValidatorLastName"></div> <div style="MARGIN: 0px 0px 0px 130px">

  Last Name is required.

  </div> <div style="MARGIN: 0px 0px 0px 120px"></span></div> <div style="MARGIN: 0px 0px 0px 120px"> </div> <div style="MARGIN: 0px 0px 0px 120px">Any ideas how I can change the display from inline to block?</div></div></div></div>
  • Edited by newbie06 on Dec 20, 2007 09:12 PM
• • Reply
  

  scott976

  Member

  716 Points

  161 Posts

  Re: changing the display property from inline to block in C#

  Dec 20, 2007 09:46 PM|LINK

   I would enclose the validator in a div that is inline.
  

• • Reply
  

  ddegil

  Member

  2 Points

  1 Post

  Re: changing the display property from inline to block in C#

  Feb 22, 2013 07:45 PM|LINK

  There is no need to use an elaborate set of c#, VB or javascript to do this. You can do it with CSS (assuming your site is made for current browsers).

  <asp:RequiredFieldValidator runat="server" ID="rfvRequired" ErrorMessage="This is required.<br/>This is line 2" ControlToValidate="tbRequired" ValidationGroup="CommonAttributesValidationGroup" SetFocusOnError="True" CssClass="valerror" Display="Dynamic"></asp:RequiredFieldValidator>

  To make the above validator to display as a block with a yellow background and a border simply add this to your style sheet (assumes the validator has the class of "valerror" as above. if not make sure you name them the same)

  span.valerror[style*="inline"]
  {
      display:block !Important;
      background-color: Yellow;
      border: 1px solid #cccccc;
      font-size:.9em;
  }

   

  That is it. When the validator span gets changed to "inline" by the client browser javascript, the style above will kick in. The display will be forced to block. When the inline style on the span is changed back to none or inline is removed, the style above stock affecting the span. Instant block display.

  I have tested this on IE10, FF and Chrome and it is working on them at my office and home. Once you make the style sheet as you want it to dislpay, you only have to make sure all the validators use the same CssClass.

   

  Hope that help you out.