Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-18979] Windows: Button is not shown until tapped when backgroundColor is set on a window

GitHub Issuen/a
TypeBug
PriorityNone
StatusClosed
ResolutionInvalid
Resolution Date2015-06-11T05:12:06.000+0000
Affected Version/sRelease 4.1.0
Fix Version/sRelease 4.1.0
ComponentsWindows
Labelsqe-4.1.0
ReporterEwan Harris
AssigneeKota Iguchi
Created2015-06-05T23:58:17.000+0000
Updated2015-06-24T05:17:53.000+0000

Description

Description

When creating a button and adding it to a window the button does not show, unless it is tapped. *This code works with no issues on an Android device* 
var win = Ti.UI.createWindow({backgroundColor:'white'});

var button = Titanium.UI.createButton({
    top: 60,
    title: 'Hello',
    width: '180',
    height: '80',
    image: '/KS_nav_ui.png'
});


button.addEventListener('click', function(){
    alert('HELLO!');
});

win.add(button);
win.open();

Steps To Reproduce

1. Replace the code in an app.js file with the above 2. Build the app to device using appc run -p windows -T device or ti build -p windows -T device 3. Tap in the middle of the screen in the top third of the screen

Actual Result

The button is not visible until tapped

Expected Result

The button should be visible at all times

Comments

  1. Ewan Harris 2015-06-10

    I believe this is actually that certain UI elements are not being shown when added to a tabgroup, for example if I replace the above code with the below the button is shown with no problems. I have also seen behavior similar to this issue when attempting to add a tableview to a tab group 
       Ti.UI.backgroundColor = 'white';
   
   var win = Ti.UI.createWindow();
   
   var button = Ti.UI.createButton({
       title: 'Hello'
   })
   
   button.addEventListener('click', function(){
       alert('Hello');
   })
   
   win.add(button);
   win.open();
  2. Kota Iguchi 2015-06-10

    [~eharris] When you say "tab group", that means Ti.UI.TabGroup, right? Would you add a sample code which uses it?
  3. Ewan Harris 2015-06-11

    [~kota] It appears I was wrong about it being a TabGroup, I think it's when the backgroundColor is set for a window. I'll rework the ticket to reflect this *This code does not show a button*, 
       var win = Ti.UI.createWindow({backgroundColor:'white'});
    
   var button = Ti.UI.createButton({
       title: 'Hello'
   })
    
   button.addEventListener('click', function(){
       alert('Hello');
   })
    
   win.add(button);
   win.open();
    *This code does* 
       var win = Ti.UI.createWindow();
    
   var button = Ti.UI.createButton({
       title: 'Hello'
   })
    
   button.addEventListener('click', function(){
       alert('Hello');
   })
    
   win.add(button);
   win.open();
  4. Kota Iguchi 2015-06-11

    The reason because Button looks like invisible is that the color of Window is white, and Button text color is white by default in this case. * Window background color is white * Button background is transparent (thus it shows Window background color = white) * Button text color is white by default * When you tap the button, Button shows "selected" color, which is blue * Which makes looking like Buttons are suddenly visible Sample code: 
       var win = Ti.UI.createWindow({ backgroundColor: 'red' });
   
   var button = Titanium.UI.createButton({
       top: 60,
       title: 'Hello',
       width: '180',
       height: '80',
       image: '/KS_nav_ui.png'
   });
   
   button.addEventListener('click', function () {
       alert('HELLO!');
   });
   
   win.add(button);
   win.open();
  5. Kota Iguchi 2015-06-11

  6. Kota Iguchi 2015-06-11

    PS. The reason why they look different between Android and Windows is that because the difference of UI color scheme. I believe Titanium should leverage each platform's color scheme, so it may look different. In this case Windows has its own scheme which treats Button background transparent and default text color is white, which causes "look" different between platforms. I think this is the way how Titanium works.
  7. Eric Merriman 2015-06-23

    [~eharris] Please close if in agreement, otherwise provide details on why this shouldn't be closed as invalid.
  8. Ewan Harris 2015-06-24

    [~kota] thanks for the heads up, Titanium should adhere to each platforms color scheme so I'll close this ticket.

JSON Source