RC 16, Text Input Placeholder issues

[munsterlander]

So this is clearly a CSS issue, not certain what is happening. In the below photo, you will see 3 states of the text input. Rest period seconds shows the placeholder. In the Monaca Cloud IDE, the placeholder is the correct height, but on the device it is not. For the other fields, you will notice a little green 00 in the upper-left hand corner. This happens after you type in a number. The placeholder animates it’s way to the corner. I probably messed something up when I added the CSS from the themeroller, even though I only included the lines I changed. Those are listed below:

.text-input {
              width: 80px;
              border: 1px solid #080000;
              -webkit-border-radius: 4px;
              border-radius: 4px;
              color: #1f1f21;
              font-size: 35px;
              height: 48px;
              padding: 4px 8px 0 8px;
            }

[Fran Diox]

@munsterlander Hi! In rc.16 some CSS related to the input element changed. Which version of Android had this problem?

[munsterlander]

@Fran-Diox I’m currently running 6.0.1

[Fran Diox]

@munsterlander Thanks! I thought this was related to the same bug of this other topic. However, that was not a real bug.

Is this happening also with the default CSS or only with your custom version?

[munsterlander]

@Fran-Diox This is my current loadout:

<link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-rc.16/css/onsenui.css" type="text/css" media="all" />
    <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-rc.16/css/onsen-css-components.css">
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-rc.16/js/onsenui.js"></script>

This is all the custom CSS:

.colon {
            color: #1f1f21;
            font-size: 35px;
            height: 48px;
            width: 10px;
            padding: 0;
            margin: 0;
            vertical-align: top;
        }
        .text-input {
              width: 80px;
              border: 1px solid #080000;
              -webkit-border-radius: 4px;
              border-radius: 4px;
              color: #1f1f21;
              font-size: 35px;
              height: 48px;
              padding: 4px 8px 0 8px;
            }
        
        #footer {
           position:fixed;
           left:0px;
           bottom:0px;
           height:60px;
           width:100%;
        }
        
        .smalltext{
            padding-top: 5px;
            font-size: 16px;
        }
        
        .status {
            color: #fff;
        }

I do wonder if my custom text-input class from the themeroller is causing the issue. To be honest, I haven’t looked into it too much as I have been working on JS functionality at the moment.

Thanks!

[munsterlander]

@Fran-Diox I have confirmed the issue on RC17 as well. I created a new project with RC17, just added:

<ons-input placeholder="00"></ons-input>

No custom CSS and the placeholder goes to the top left of the input. I can only guess that something else is happening in the default CSS. I inspected the object and it gets display: none so I assume something else is overriding it.

Edit: Confirmed this only affects material and not flat.