Partager via


How to expand InputFormTextBox

If you need to expand InputFormTextBox control and CssClass property seems to be not working, continue reading this post.

I’ve created an application page and I used an InputFormTextBox control to give users the possibility to write some html content. This is the code I used:

 <wssawc:InputFormTextBox 
          Title="My Field" 
          ID="myField" 
          Rows="15" 
          Runat="server" 
          TextMode="MultiLine" 
          RichText="true" 
          RichTextMode="FullHtml"/>

You can see the page rendering in the following picture:

image

As you can see, the control’s width is not at 100% of available space.

Trying to enlarge the control with style and CssClass attributes were unsuccessful. I made some investigations and I discovered that code rendered by the control simply ignores those attributes.

Looking at html generated by the control, I saw that it is rendered as two main element, a table element to display the toolbar and an iframe element for the html container. Both have a css class defined, ms-rtetoolbarmenu for the table (toolbar) and  ms-rtelong for the iframe (html container).

My solution to the problem was to override those classes with the following code

 <style type="text/css"> 

table.ms-rtetoolbarmenu{ 
    width:100%;
} 

iframe.ms-rtelong{ 
    width:100%;
} 

</style> 

The page rendering after this modify was:

image

Hope this can help you.

Technorati Tag: MOSS

Comments

  • Anonymous
    February 19, 2009
    PingBack from http://www.clickandsolve.com/?p=11512

  • Anonymous
    February 26, 2009
    Really really really nice. this is the only thing that works. Thanks for working this out. WOW!!

  • Anonymous
    March 02, 2009
    I've spent the last several days, on and off, playing with this, trying to find a way to "fix" it. Thanks a million!

  • Anonymous
    March 10, 2009
    Nice tip! Thanks. I put this in the "PlaceHolderAdditionalPageHead" placeholder like this so it works easily with the LAYOUTS pages that are using application.master: <asp:Content ID="Additional" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">   <style type="text/css">      table.ms-rtetoolbarmenu{width:100%;}      iframe.ms-rtelong{width:100%;}   </style> </asp:Content>

  • Anonymous
    April 22, 2009
    Thanks a lot... Ur tip really replied me. done

  • Anonymous
    April 30, 2009
    This doesn't seem to work for discussion board

  • Anonymous
    July 08, 2009
    Thank you so much . I have put following code in Page_Load of user control of web part. It is working. Thank you, Your efforts helped me. StringBuilder sb = new StringBuilder(); sb.Append("<style type="text/css">table.ms-rtetoolbarmenu{width:100%;}iframe.ms-rtelong{width:100%;}</style>"); Response.Write(sb.ToString());

  • Anonymous
    August 28, 2009
    thank u so much its work fine

  • Anonymous
    October 21, 2009
    Thanks a lot you solved my problem.

  • Anonymous
    October 30, 2009
    Perfect!  I too worked days trying to figure out why this control wouldn't size as I was specifying.  thanks SO Much!

  • Anonymous
    January 27, 2010
    Thanks I tried a lot options but this works and is really simple to apply. BTW can we ever get the toolbars on one row?

  • Anonymous
    February 21, 2010
    Hi Dave, I suppose it's not possible with css because rows don't have unique ids. Besides it's not recommended. Try to increace spacing between button instead of having only one row.

  • Anonymous
    August 17, 2010
    Can I set a default Font-size to the....... Rich text editor........... if i apply font-size, color, font-weight properties to the classes - ms-rtelong or ms-rtelonger ....... it is not working.......... but properties like width and height are working............... Is there a work around.......... Thanks in advance

  • Anonymous
    October 13, 2010
    Can i remove toolbar for inputformtextbox ? Please help its urgent... Thanks in Advance.

  • Anonymous
    June 02, 2011
    Hi, When used inside an update panel, the width is reset. Please suggest a solution for this. Regards, Harish.

  • Anonymous
    October 23, 2013
    Really i was great helpful to fix in sharepoint forminput textbox control.

  • Anonymous
    October 23, 2013
    The comment has been removed

  • Anonymous
    March 12, 2015
    Works perfect for me. Thanks