Consider the following task: The Web.TextControl should be arranged under a custom bar that is located at the top of the page like in the following screenshot:

MVC: Arrange a docked Web.TextControl with a custom bar at the top

Objects such as DIV elements doesn't really have an option to extend itself to 100% of the remaining space on a page. The CSS Height property set to 100% works only, if the container element has a defined height.

For this reason, we implemented the Dock property that defines how the control is docked to its container or web site. This allows you to set the Web.TextControl to full screen or fill a container.

But the described scenario cannot be realized only by using the Dock property. Custom Javascript is required to resize TX Text Control when the browser Window is resized. The view contains a DIV that represents the custom bar at the top and the HtmlHelper for the Web.TextControl is wrapped by another DIV that is used to manipulate Web.TextControl using Javascript.

Loading...

The following CSS style code shows the definitions for the two DIV elements in our view:

Loading...

In the Javascript, Web.TextControl is shifted down 50px using the CSS Top property and at the same time, the Height is decreased by 50px. This makes space for the custom bar at the top of the page.

Loading...

Download the sample from GitHub and test it on your own.

GitHub

Download and Fork This Sample on GitHub

We proudly host our sample code on GitHub.com/TextControl.

Please fork and contribute.

Requirements for This Sample

  • Visual Studio 2012 or better
  • TX Text Control .NET Server for ASP.NET (trial sufficient)