0

I am new to NativeScript. I am trying to place a icon inside the textbox but it is not working. Please Help me out.

Expected O/P

Actual O/P

Code

            <GridLayout columns="*, *" rows="auto">
            <TextField row="0" col="0" hint="Height">
             <Image src="../../abc.png">
            </TextField>
            <TextField row="0" col="1" hint="Weight">
            <Image src="../../cde.png">
           </TextField>
           </GridLayout>

I am getting the textbox without icon. Please get me out

1 Answer 1

0

A TextField doesn't accept images inside it. One way to do it is to wrap your TextField inside a GridLayout and add the icon inside the GridLayout instead.

The first TextField would be

<GridLayout rows="auto" columns="auto, *">
  <Image row="0" col="0" src="../../abc.png"></Image>
  <TextField row="0" col="1" hint="Height"></TextField>
</GridLayout>

So both Textfields together would look like this:

<GridLayout columns="*, *" rows="auto">

  <!-- first textfield -->
  <GridLayout row="0" col="0" rows="auto" columns="auto, *">
    <Image row="0" col="0" src="../../abc.png"></Image>
    <TextField row="0" col="1" hint="Height"></TextField>
  </GridLayout>

  <!-- second textfield -->
  <GridLayout row="0" col="1" rows="auto" columns="auto, *">
    <Image row="0" col="0" src="../../cde.png"></Image>
    <TextField row="0" col="1" hint="Height"></TextField>
  </GridLayout>
</GridLayout>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.