Textboxes do not render incorrectly in simulator/HTML [SOLVED]

Please report bugs here. If you are unsure whether something is a bug or an expected behavior, please post it on the "Technical Support" forum instead, and wait for a moderator to handle/move the post.
NineLives
Posts: 3
Joined: Wed Apr 22, 2015 9:26 am

Textboxes do not render incorrectly in simulator/HTML [SOLVED]

Postby NineLives » Thu Apr 23, 2015 6:06 am

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?

JS-Support @Userware
Site Admin
Posts: 1142
Joined: Tue Apr 08, 2014 3:42 pm

Re: Textboxes do not render incorrectly in simulator/HTML

Postby JS-Support @Userware » Thu Apr 23, 2015 10:51 am

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:

Code: Select all

if (CSharpXamlForHtml5.DomManagement.IsControlInVisualTree(TextBox1))
{
    CSharpXamlForHtml5.DomManagement.GetDomElementFromControl(TextBox1).style.resize = "none";
}


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

JS-Support @Userware
Site Admin
Posts: 1142
Joined: Tue Apr 08, 2014 3:42 pm

Re: Textboxes do not render incorrectly in simulator/HTML

Postby JS-Support @Userware » Mon Jun 15, 2015 9:00 am

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


Return to “Bug Reports”

Who is online

Users browsing this forum: No registered users and 32 guests

 

 

cron