Forums - CSHTML5

Subject:
Textboxes do not render correctly in simulator/html

To Reproduce:
Simply add a basic textbox into your grid like so:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
</Grid.RowDefinitions>
<Textbox Grid.Row="0" Name="chkObject"/>
</Grid>

Investigation:
In the XAML preview pane, the textbox is rendered correctly. You will see the textbox filling the space as defined (height no more than 25px, width equals the grid width). When running the simulator (or using the generated HTML), you instead see that the textbox is now two lines high, only about 100 or so pixels wide, and has a resizable anchor on the bottle right corner.

This is likely related to how textareas are defined in HTML. Unless you use CSS, there isn't a way to directly manipulate height outside of the TextArea rows attribute. This defaults to 2 rows. The same goes for the width, which is manipulated with either CSS, or indirectly with the cols attribute. The resize handle needs to be explicitly disabled using CSS:

textarea {
resize: none;
}

I'd personally rather css be auto generated (rather than messing with cols/rows), but that does reduce the number of compatible browser versions this could target. Is there any way we could attach css to our textboxes in the xaml if we so chose?

Thanks a lot NineLives for the detailed feedback.

We are going to improve the rendering of the TextBox as soon as possible.

In the meantime, yes, you can attach CSS to your textbox with the following code:



The control must be already in the visual tree (which means on the page). You can place the code in the "Loaded" event handler of the page/usercontrol for example.

Regards,
JS-Support

Hello NineLives,

This is a short update to inform you that we have fixed the issue in the Beta 4 release.

Shall you find any other issues related to the TextBox, please feel free to let us know.

Thanks,
Regards,
JS-Support