Listpicker width does not compute properly. #2985

Activity

1. tsonevn

   self-assigned this

   on Oct 31, 2016
2. tsonevn commented on Oct 31, 2016

   

   tsonevn

   on Oct 31, 2016

   Last edited by tsonevn

   Contributor

   More actions

   Hi @davecoffin,
   Thank you for reporting this issue,
   I investigated this behavior with displaying the ListPicker in iOS and found several problems. The first one is that ListPicker resizing on iOS is not supported. The ListPicker is a common abstraction over iOS UIPickerView, underlying native iOS component is designed to used the entire width of the screen. This behavior is iOS specific and has been described in issue #314.
   The second problem that I found is that, when the ListPicker main container visibility property is set to collapsed in Page Initializing, the ListPicker width will not be set properly while setting visibility to visible state.
   Workaround:

   main-page.xml

   <Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
     <GridLayout>
       <StackLayout>
         <Label text="Tap the button" class="title"/>
         <Button text="TAP" tap="onTap" />
         <Label text="{{ message }}" class="message" textWrap="true"/>
       </StackLayout>
   
         <GridLayout style="background-color: pink;" rows="auto *" id="listpicker_holder" visibility="{{showListPicker ? 'visible' : 'collapsed'}}">
             <Button text="Close" tap="onTap" row="0" />
             <StackLayout row="1">
                 <ListPicker id="list_picker"  items="{{ options }}" />
             </StackLayout>
   
   
         </GridLayout>
     </GridLayout>
   </Page>
   

   main-page.ts

   import { Page } from 'ui/page';
   import { HelloWorldModel } from './main-view-model';
   import { setTimeout } from "timer"
   
   // Event handler for Page "navigatingTo" event attached in main-page.xml
   var listPickerVisibility = false;
   var newobservable;
   export function navigatingTo(args: EventData) {
     // Get the event sender
     let page = <Page>args.object;
     let array = ["options1", "options2", "options3"];
     newobservable = new Observable();
     newobservable.set("showListPicker", true);
     newobservable.set("options", array);
     setTimeout(function(){
       newobservable.set("showListPicker", listPickerVisibility);
     }, 1)
     page.bindingContext = newobservable;
   }
   
   export function onTap(){
     listPickerVisibility = !listPickerVisibility;
     newobservable.set("showListPicker", listPickerVisibility);
   }
   

   Hope this will help.
3. tsonevn

   added

   bug

   os: ios

   on Oct 31, 2016
4. davecoffin commented on Oct 31, 2016

   

   davecoffin

   on Oct 31, 2016

   ContributorAuthor

   More actions

   Thanks @tsonevn, but your xml doesnt make any difference unfortunately. Here's what it looks like (same exact problem): https://cl.ly/hxF3
5. tsonevn commented on Oct 31, 2016

   

   tsonevn

   on Oct 31, 2016

   Contributor

   More actions

   Hi @davecoffin,
   Excuse me for my mistake,
   I researched further the problem and found that the problem has been caused due to setting visibility to collapsed on Page initializing. I also updated the workaround in my previous comment.
6. davecoffin commented on Oct 31, 2016

   

   davecoffin

   on Oct 31, 2016

   Last edited by davecoffin

   ContributorAuthor

   More actions

   Thanks! Btw, this also appears to happen if the container is set to collapsed. The only way I could truly get around this is by hiding it using opacity=0.
7. tsonevn

   removed their assignment

   on Nov 1, 2016
8. tsonevn

   added this to the 2.6.0 (TBD)This milestone has been deleted milestone on Dec 5, 2016
9. SvetoslavTsenov

   self-assigned this

   on Apr 28, 2017
10. SvetoslavTsenov

    added

    done

    on May 1, 2017
11. SvetoslavTsenov

    closed this as completedon May 1, 2017
12. lock commented on Aug 28, 2019

    

    lockbot

    on Aug 28, 2019

    More actions

    This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
13. lock

    locked and limited conversation to collaborators on Aug 28, 2019