@Html.TXTextControl().TextControl(settings => {
settings.Dock = TXTextControl.Web.DockStyle.Fill;
}).Render()
```
#### Why the Container Matters
One of the most important implementation details is that the editor requires an actual, calculable height.
```
#text-control-container {
width: 100%;
height: calc(100vh - 6rem);
}
```
The sample repeatedly emphasizes this point for all layouts. Good values are fixed pixel heights, calc(...), or height: 100% only when the parent chain already has explicit heights. The README explicitly warns against height: auto and percentage heights without a defined parent height.
### The Sample Application
The sample application provides an overview page containing links to the five layout patterns. Each pattern is implemented in a separate Razor view and the project includes a shared CSS file for common styles. Designed to be easy to understand and extend, the application is a valuable resource for developers looking to integrate the TX Text Control Document Editor into their own ASP.NET Core applications.
#### Full Screen Editor
This pattern dedicates the entire screen to the editor, providing a distraction-free environment for focused editing. It is ideal when document editing is the primary purpose of the page.
##### Razor View
```
@using TXTextControl.Web.MVC
@Html.TXTextControl().TextControl(settings => {
settings.Dock = TXTextControl.Web.DockStyle.Fill;
}).Render()
```
##### CSS Styles
```
.editor-page {
padding: 1.5rem;
}
#text-control-container {
height: calc(100vh - 6rem);
width: 100%;
}
```
In this layout, the editor is placed within a container that fills the entire viewport. The CSS code ensures that the container takes up the full height of the screen, enabling the editor to expand accordingly. This setup is ideal for applications where users need to focus solely on editing documents without distractions from other UI elements. The following screenshot shows the full-screen editor layout in action.
#### Modal Popup Editor
The modal pattern is useful when users need to temporarily edit a document without leaving the current application context. It allows for quick edits and is ideal for scenarios where the document is a secondary element of the workflow.
##### HTML Structure
```
@Html.TXTextControl().TextControl(settings => {
settings.Dock = TXTextControl.Web.DockStyle.Fill;
}).Render()
```
##### CSS Styles
```
.modal-overlay {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
display: none;
opacity: 0;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.5);
transition: opacity 0.3s ease;
}
.modal-overlay.show {
display: flex !important;
opacity: 1;
}
#text-control-container {
height: calc(100% - 80px);
width: calc(100% - 2rem);
margin: 0 auto;
}
```
##### JavaScript Code
```
openModalBtn.addEventListener('click', function () {
modalOverlay.style.display = 'flex';
setTimeout(() => {
modalOverlay.classList.add('show');
}, 10);
});
```
The sample illustrates two practical points: firstly, the modal is initially hidden using the display: none property; secondly, the height of the TX Text Control container is calculated to leave room for the modal header. The repository also notes that no special refresh logic is required for this scenario. The following screenshot shows the modal popup editor layout in action.
#### Sidebar Panel Editor
The sidebar layout is ideal for situations where document editing is just one aspect of a larger screen, such as when it is displayed alongside customer data, case metadata or workflow details. It allows users to edit documents while still having access to other relevant information.
##### HTML Structure
```
```
##### Razor View
```
```
##### CSS Styles
```
.sidebar-container {
position: fixed;
top: 0;
left: -75%;
width: 75%;
height: 100vh;
transition: left 0.3s ease;
}
.sidebar-overlay.show .sidebar-container {
left: 0;
}
#sidebar-text-control-container {
flex: 1;
width: calc(100% - 3rem);
height: calc(100vh - 100px);
margin: 1.5rem;
}
```
##### JavaScript Code
```
openSidebarBtn.addEventListener('click', function () {
sidebarOverlay.style.display = 'block';
setTimeout(() => {
sidebarOverlay.classList.add('show');
}, 10);
});
```
The sample illustrates this pattern using a slide-out sidebar that covers 75% of the viewport. The TX Text Control-specific requirement is that the container should be explicitly sized, with the editor filling the available area. The following screenshot shows the sidebar panel editor layout in action.
#### Split Panel Editor
Split view is ideal for displaying a document alongside related content, such as a properties panel, navigation tree, template selection or contextual business data.
##### HTML Structure
```