UI Changes when dynamically hiding elements

This topic contains 4 replies, has 3 voices, and was last updated by Profile photo of Stu Wade Stu Wade 4 years, 3 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #339006 Reply
    Profile photo of davidg
    davidg
    Member

    Hi,

    I am experiencing a problem that I don’t know how to fix.

    Here’s a basic example:

    I have a screen with 4 different text elements and 4 editable text fields. I want to dynamically hide them from the user based on the selection of a combo box on another screen. The problem comes when I hide them using

    $(‘#m1-screen-text4’).animate({opacity: “hide”});

    This hides text4 but it messes up the vertical position of text2 and text3. I tried using

    $(‘#m1-screen-text4’).animate({opacity: 0});

    This worked without changing the position of the other text elements but when used on the editable text field it still caused the keypad to appear when the user clicked on the area of the text field.

    I just need to make these elements disappear without effecting the UI of the other elements.

    Anybody have any suggestions?

    Thanks

    #339008 Reply
    Profile photo of paulD
    paulD
    Member

    Not at my pc to test this but try .fadeTo I think this doesnt effect the position of the other divs.

    http://api.jquery.com/fadeTo/

    #339021 Reply
    Profile photo of Stu Wade
    Stu Wade
    Member

    I use $(‘#m1-screen-textbox’).css(‘visibility’,’hidden’);
    This works perfectly for me – note that the opposite – to make them visible again – is ‘inherit’ which allows whole panels of widgets to be switched off by manipulating the visibility of the panel and not ‘visible’ which overrides any container settings.

    #339043 Reply
    Profile photo of davidg
    davidg
    Member

    @stu Wade wrote:

    I use $(‘#m1-screen-textbox’).css(‘visibility’,’hidden’);
    This works perfectly for me – note that the opposite – to make them visible again – is ‘inherit’ which allows whole panels of widgets to be switched off by manipulating the visibility of the panel and not ‘visible’ which overrides any container settings.

    This method worked great the only change I had to do was add phoneui.preprocessDOM(‘#m1-screen1’) to the functions otherwise the changes wouldn’t appear without a screen refresh (at least in the emulator, I didn’t try it on an actual device).

    Thanks Stu.

    @paul
    I didn’t try .fade()
    It might work I just tried this method first and it worked for me. Thanks though

    #339046 Reply
    Profile photo of Stu Wade
    Stu Wade
    Member

    You are most welcome. I am learning an enormous amount of M1 lore, by continuously scanning this forum for tid-bits – only fair to share.

    I was interested that you found the need to force a refresh – that’s something that I have not had to do with visibility changes either within a single screen or on currently inactive screens.

Viewing 5 posts - 1 through 5 (of 5 total)
Reply To: UI Changes when dynamically hiding elements