Languages

Menu
Sites
Language
Input field appears in black

Hola,

I've got an input field in a slide in & out div that appears in black blackground and white colored text.
The code I am using is exactly the same as in the numerous input fields I have in this same web app.

Any idea on what may be causing this?

Here it is -> http://i.imgur.com/vYdLfLM.png (just behind the input field is a white image; it has nothing to do with the problem, I used the same set elsewhere and didn't produce the same outcome)

 
Code:

<div id="textInputField">
   <img src="./images/inputfield.png">
   <div id="inputDiv">
      <input id="inputText" type="text" name="inputField" placeholder="Write something...">
   </div>
</div>

 

Javascript:

$("#textInputField").slideUp(500);

&

$("#textInputField").slideDown(500);

 

CSS:
 

#textInputField {
position: relative;
width: 700px;
height: 190px;
}
 
#textInputField img {
position: absolute;
bottom: 45px;
}
 
#inputDiv {
position: absolute;
top: 50px;
left: 20px;
width: 640px;
height: 100px;
}
Edited by: Brock Boland on 17 Mar, 2014 Reason: Paragraph tags added automatically from tizen_format_fix module.
List

Responses

7 Replies
talari praveen kumar
Hi Varsamis I have tested with the below code but i am not able to reproduce the issue, please share your code 
main.js

  $("#clickme").toggle(function () {
            $(this).parent().parent().animate({left:'0px'}, {queue: false, duration: 500});
        }, function () {
            $(this).parent().parent().animate({left:'-280px'}, {queue: false, duration: 500});
        });


CSS

#slideout {
    background:white;
    position: relative;
    width: 300px;
    height: 80px;
    top: 45%;
    left:-280px;
}
   
#containclickme {
background: white;
    float:right;
    height: 80px;
    width:20px;
}

#clickme {
    float: right;
    height: 20px;
    width: 20px;
    background: #ff0000;
}

#slidecontent {
    float:left;
  
}
Varsamis
I added the code in my first post.
talari praveen kumar
Hi Varsamis I think you are using "black-theme" in tizen. ( &script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js" data-framework-theme="tizen-black" > </script>) so you are getting this issue. Please use 'data-framework-theme=tizen-black' .
talari praveen kumar
'data-framework-theme=tizen-white'
Varsamis
I'm using jQuery Mobile.
talari praveen kumar
I tried with your code but i am not facing any issues as you said. Are you facing this only for text box or any other like button ??
Varsamis
It happens only with text input components and only in that case. As I said, I'm using the exact same code for 4-5 other input fields in the same app and there is no such problem in these. The only thing that's unique in this case is that the div is hidden and slides up and down. (additionally, the input field doesn't correspond to the given width of the containing div -unlike all other cases) Seems very strange; can't think of anything that would cause this issue.