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:
Comments (18)

  1. Robert Graauw says:

    Really really really nice. this is the only thing that works. Thanks for working this out.

    WOW!!

  2. Bill Zimmer says:

    I’ve spent the last several days, on and off, playing with this, trying to find a way to "fix" it. Thanks a million!

  3. Scot Hillier says:

    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>

  4. Jagadish says:

    Thanks a lot… Ur tip really replied me. done

  5. Reggie says:

    This doesn’t seem to work for discussion board

  6. Naryana Reddy says:

    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());

  7. piyush patel says:

    thank u so much

    its work fine

  8. Arfan says:

    Thanks a lot you solved my problem.

  9. Sylvia says:

    Perfect!  I too worked days trying to figure out why this control wouldn’t size as I was specifying.  thanks SO Much!

  10. Dave says:

    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?

  11. 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.

  12. Thendral says:

    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

  13. Rajkumar says:

    Can i remove toolbar for inputformtextbox ? Please help its urgent…

    Thanks in Advance.

  14. Harish says:

    Hi,

    When used inside an update panel, the width is reset. Please suggest a solution for this.

    Regards,

    Harish.

  15. Somanathan Munusmay says:

    Really i was great helpful to fix in sharepoint forminput textbox control.

  16. Somanathan Munusmay says:

    hi guys

    to change input box text area and toolbar width to have to apply the below css tag in ascx control

    table.ms-rtetoolbarmenu {

           width: 100%;

           /*display: none;*/

       }

       iframe.ms-rtelong{

           width: 99.8%;

           height:100px !important;

       }

    and one thing please set RichTextMode="FullHtml" if u keep compatible u have to change ms-rtelong class to ms-rtelonger. That's it.

  17. ajay says:

    Works perfect for me. Thanks

Skip to main content