Ionic input text not visible


#1

Tried the beta.
All is cool on iPhone but on Android have following issue with input.
The text is not visible when typing in input.
However text is inserted there

Have somebody has something like that?
Not sure may be it related to css somehow…as css is not mine. So I’m investigating on css.But if someone know something about this issue I will appreciate a lot.


#2

Hmm, I’ve been doing a lot of testing on Android lately and I haven’t come across this. What version android are you using? Also can you try the nightly builds?


#3

Hi, I have the same issue, everything is fine in my web browser (chrome) but when I try on iOS simulator and devise when I type to fill an input, I can’t see anything. Did someone found a solution ?
Thank you,


#4

Hey guys, so the issue was is that we were cloning inputs to prevent some issues that came across on android. What version of ionic are you using? Can you try beta 10 or the nightly builds?


#5

I am using the latest nightly build, i still am not able to see what i am typing ! its working on android 4.4.2 but not on 4.0.x or previous versions of android !


#6

Can you share some code? Do you have the ionic keyboard plugin?


#7
<ion-list class="disable-user-behavior">
  <div class="list">
    <label class="item item-input"><span class="input-label hasTooltip col-sm-2 control-label" data-toggle="tooltip" data-placement="auto top" data-html="true" for="name_179_56" title="Enter here the name of the item.&lt;br&gt;">Name<span class="star"> *</span></span>
      <input type="text"
      id="name_179_56" name="trucs[179][name]" class="form-control" value="" required="required">
    </label>
    <label class="item item-input-inset"><span class="input-label hasTooltip col-sm-2 control-label" data-toggle="tooltip" data-placement="auto top" data-html="true" for="alias_172_56" title="Specify an alias for the item. if left blank it will be automatically filled with the name.&lt;br&gt;">Alias</span>
      <input
      type="text" id="alias_172_56" name="trucs[172][alias]" class="form-control" value="">
    </label>
    <label class="item item-input-inset"><span class="input-label hasTooltip col-sm-2 control-label" data-toggle="tooltip" data-placement="auto top" data-html="true" for="namekey_172_56" title="SKU means ( Stock Keeping Unit ). It is an unique ID to identify the item.&lt;br&gt;Not spacing is allowed and it needs to be unique.&lt;br&gt;">SKU</span>
      <input
      type="text" id="namekey_172_56" name="trucs[172][namekey]" class="form-control" value="">
    </label>
    <label class="item item-input item-text-wrap item-select"><span class="input-label hasTooltip col-sm-2 control-label" data-toggle="tooltip" data-placement="auto top" data-html="true" for="x_categoryid_172_56" title="Choose a category. &lt;br&gt;&lt;span style=&quot;color: rgb(0, 0, 204); text-decoration: underline; font-weight: bold;&quot;&gt;Note:&lt;/span&gt; the chosen category will the &quot;default&quot; category, also the first category. The item can be listed in other category through the multiple category selector in the list of items.&lt;br&gt;">Category</span>
      <select
      name="trucs[172][x][categoryid]" id="trucs[172][x][categoryid]w6m47" class="form-control chosen-select">
        <option value="0">- Choose main category -</option>
        <option value="2">¦&nbsp;&nbsp; Default</option>
        <option value="9">¦&nbsp;&nbsp; Clothing</option>
        <option value="10">¦&nbsp;&nbsp; ¦&nbsp;&nbsp; Tee-Shirt</option>
        <option value="11">¦&nbsp;&nbsp; ¦&nbsp;&nbsp; Pants</option>
        <option value="5">¦&nbsp;&nbsp; Multimedia</option>
        <option value="6">¦&nbsp;&nbsp; ¦&nbsp;&nbsp; Photo Gallery</option>
        <option value="7">¦&nbsp;&nbsp; ¦&nbsp;&nbsp; Video Gallery</option>
        <option value="8">¦&nbsp;&nbsp; ¦&nbsp;&nbsp; Mp3 Songs</option>
        <option value="12">¦&nbsp;&nbsp; Donations</option>
        </select>
    </label>
    <label class="item item-input item-text-wrap item-select"><span class="input-label hasTooltip col-sm-2 control-label" data-toggle="tooltip" data-placement="auto top" data-html="true" for="priceid_172_56" title="Type of the amount ( the amount specified below this field ).&lt;br&gt;">Pricing</span>
      <select
      name="trucs[172][priceid]" id="trucs[172][priceid]w7m48" class="form-control" onchange="return joobi.run('LB_wf_product_product_edit_item_apply');">
        <option value="1">Standard</option>
        </select>
    </label>
    <label class="item">
      <div class="list">
        <label class="item item-input"><span class="input-label hasTooltip col-sm-2 control-label" data-toggle="tooltip" data-placement="auto top" data-html="true" for="price_172_56" title="Enter the price in the currency you selected.&lt;br&gt;&lt;br&gt;For donation, enter here the minimum donation that the customer can donate for this item. If you choose to set 0 as minimum, then this item would be set to free and the donation would be optional for the customer.&lt;br&gt;">Price<span class="star"> *</span></span>
          <input
          type="text" id="price_172_56" name="trucs[172][price]" align="right" class="form-control" value="0.00" required="required">
        </label>
        <label class="item item-input item-text-wrap item-select"><span class="input-label">Currency</span> 
          <select name="trucs[172][curid]" id="trucs[172][curid]w8m32" class="form-control">
            <option value="3">British pound (£)</option>
            <option value="4">Japanese yen (¥)</option>
            <option value="31">Canadian dollar ($)</option>
            <option value="112">New Zealand dollar ($)</option>
            <option value="2">United States dollar ($)</option>
            <option value="13">Australian dollar ($)</option>
            <option value="1" selected="selected">Euro (€)</option>
          </select>
        </label>
      </div>
    </label>
    <label class="item item-input-inset"><span class="input-label hasTooltip col-sm-2 control-label" data-toggle="tooltip" data-placement="auto top" data-html="true" for="discountrate_172_56" title="To discount the product enter a rate in percentage.&lt;br&gt;">Discount Rate</span>
      <div class="row">
        <input type="number" id="discountrate_172_56" name="trucs[172][discountrate]" class=" col" value="0" min="0" max="100">
        <div class="col">%</div>
      </div>
    </label>
    <label class="item item-input-inset"><span class="input-label hasTooltip col-sm-2 control-label" data-toggle="tooltip" data-placement="auto top" data-html="true" for="discountvalue_172_56" title="To discount the product enter a discount value. The currency will be the same as the one used for the product.&lt;br&gt;">Discount Value</span>
      <div
      class="row">
        <div class="col">€</div>
        <input type="text" id="discountvalue_172_56" name="trucs[172][discountvalue]" class=" col" value="0.00">
  </div>
  </label>
  <label class="item item-text-wrap"><span class="input-label hasTooltip col-sm-2 control-label" data-toggle="tooltip" data-placement="auto top" data-html="true" for="publish_172_56" title="Publish or unpublish the item from the catalog.&lt;br&gt;">Publish</span>
    <div class="btn-group btn-toggle"
    data-toggle="buttons">
      <label class="toggle">
        <input type="checkbox" ng-model="togglemodel2083759414" ng-true-value="1" class="ng-pristine ng-valid">
        <div class="track">
          <div class="handle"></div>
        </div>
      </label>
      <input id="172__publish_" type="hidden" name="trucs[172][publish]" value="">
    </div>
  </label>
  <label class="item item-input"><span class="input-label hasTooltip col-sm-2 control-label" data-toggle="tooltip" data-placement="auto top" data-html="true" for="introduction_179_56" title="Type here a short introduction.">Introduction</span>
    <textarea rows="5" name="trucs[179][introduction]"></textarea>
  </label>
  <label class="item item-input"><span class="input-label hasTooltip col-sm-2 control-label" data-toggle="tooltip" data-placement="auto top" data-html="true" for="description_179_56" title="Type here a detailed description of the item.">Description<span class="star"> *</span></span>
    <textarea
    rows="5" name="trucs[179][description]"></textarea>
  </label>
  </div>
</ion-list>


#8

This is the markup and its inside a slide box ! and i am not using ionic keyboard plugin.
and to clarify the keyboard is fine its the input that is not visible , say like the text color is white !! it is invisible


#9

Right, but the keyboard is provide events that ionic is listening for. Can you include the keyboard plugin and try with that?


#10

ok ! i will let you know


#11

Ohk @mhartington i tried with keyboard installed it still doesnt work


#12

What particular version of android is this screen shot from?


#13

its from android 4.2 !


#14

Hmm, just tried this on a 4.1 device and it works fine. Maybe some css some where in your project is causing some issues?


#15

i have tried it on a 4.4.2 device. it works but on some device such as the 4.2 its not working !!! that is really strange .
I have no clue why ?


#16

Hmm, can you create a new project from the command line and test a demo of just some basic inputs? This way we can figure out if it’s something on our end or in your code.


#17

actually the first screenshot is actually a sample app i created for this issue ! it just has a list with two inputs and a button !


#18

seems like it is some clash of css files and properties !
Debugging now to the core
Anyway thanks for the Help and for your time !
I will figure it out


#19

Has anyone figured this one out? I’m having the same bug on the login screen of my app and it drives the client crazy!


#20

Actually its happened to me too, when type on login screen , when focus, content will scroll automatically to top to make space for keyboard, but text we typed not show instantly, sometimes we need to scroll manually to top before text shown

I’m using latest code and android 4.4.2

thanks