Skip to content

Actionbar Items show/hide not working correctly #658

Closed
splatterb0y opened this Issue Feb 3, 2013 · 19 comments

2 participants

@splatterb0y

If I dynamically show and hide action bar items they disappear completly.

HTML

<div data-bb-type="action-bar"  data-bb-back-caption="Zurück">
    <div id="watch-action" onclick="ui.watchList.add();" data-bb-type="action" data-bb-style="button" data-bb-overflow="true" data-bb-img="img/icons/add.png">Vormerken</div>
    <div id="delete-action" onclick="ui.watchList.remove();" data-bb-type="action" data-bb-style="button" data-bb-overflow="true" data-bb-img="img/icons/delete.png">Entfernen</div>
</div>

JavaScript

var ui = {
     watchList = {
         add: function() {
            document.getElementById('delete-action').show();
            document.getElementById('watch-action').hide();
         },
         remove: function() {
            document.getElementById('delete-action').hide();
            document.getElementById('watch-action').show();
         }
     }
};

(code for illustrative purpose only)

when I click the button the first time the delete action appears and the watch action is hidden. If I click the delete action after this, the action bar overflow is empty but instead of being empty it should show the watch action.

Dev Alpha A (Firmware 10.9.10.35)
bbUI.js 0.9.6.80


I played around with it in the web inspector and came up with this error message:

> document.getElementById("watch-action").show();
< undefined
> document.getElementById("watch-action").hide();
< undefined
> document.getElementById("delete-action").hide();
< TypeError: 'undefined' is not an object (evaluating 'this.actions[0].style')
> document.getElementById("delete-action").show();
< undefined
> document.getElementById("watch-action").show();
< undefined

and this screen
IMG_00000001

@splatterb0y

@tneil? Any comment on this one?

@tneil
Open Source Projects member
tneil commented Feb 9, 2013

I unfortunately haven't had a chance to try and reproduce it. I do have some show/hide action items in the "Dynamic Action Bar" sample that are working. I'll have to figure out why your scenario is different

@splatterb0y

Well I guess the problem is some styling missing, because it gave me this error message:

TypeError: 'undefined' is not an object (evaluating 'this.actions[0].style')

The problem still exists with the current version of bbUI.js.

@splatterb0y

The same thing happens when I pin both buttons. The one that is first in the action bar is working fine and is at the bottom of the action bar menu when it is visible. The second one sticks to the top of it despite the fact that it is pinned.

@splatterb0y

I set the initial visibility of both items with data-bb-visible="false" to false, and voila both are now sticking to the top of the action bar.

I check in my onscreemready event which one should be shown and call the show() method on the div.

Is this helping you @tneil?

@tneil
Open Source Projects member
tneil commented Feb 13, 2013

Yes, all information helps. As a note, there hasn't been any code written to handle dynamic show/hide of pinned items or having more than one pinned item that has its visibility toggled.

@tneil
Open Source Projects member
tneil commented Feb 19, 2013

I'm still unable to reproduce your scenario. I am doing the same thing in the dynamicActionBar.htm sample. Toggling visibility of action items in the action overflow menu and I am not able to cause layout issues.

Can you try the sample to see if it is working for you?

Also, can you post up a full screen sample source code that shows the issue. I just can't seem to reproduce what you're seeing.

@splatterb0y

I will check the sample. This issue drives me crazy because it is the last one which is blocking my relase update.

@splatterb0y

@tneil. Maybe I am missing something but this is just an example for hiding/showing actions on the visible action bar not the action bar overflow.

@tneil
Open Source Projects member
tneil commented Feb 19, 2013

The actions on the overflow have hide/show actions where they toggle their visibility.. almost exactly like your example

@splatterb0y

@tneil: You mean these 'Hide Action Overflow' and 'Hide Tab Overflow' Actions in the Action Overflow Menu?

They are changing their text, but not their visibility for me. I highlighted the buttons I tried.

IMG_00000016

@tneil
Open Source Projects member
tneil commented Feb 19, 2013

Show Action Overflow and Hide Action Overflow toggles the visibility of two action overflow items. The logic for the show/hide is in the onclick on those actions

@splatterb0y

They are not working for me. I packaged the samples for my Dev Alpha A with WebWorks SDK 1.0.4.11.
When I tap "Show Action Overflow" nothing changes and the overflow menu closes same thing for "Hide Action Overflow"

Related to my issue:
I tested with the Action Bar Items and it looks like two of them get an margin-top: 307px;

@splatterb0y

Alright here is the fun fact @tneil:

This reproduces the error above:

 <div id="watch-action" 
    onclick="ui.watchList.add();" 
    data-bb-type="action" 
    data-bb-style="button" 
    data-bb-overflow="true" 
    data-bb-img="img/icons/tac.png">
    Vormerken
</div>

<div id="delete-action" 
    onclick=""
    data-bb-type="action"
    data-bb-style="button"
    data-bb-overflow="true"
    data-bb-img="img/icons/delete.png">
    Entfernen
</div>

<div data-bb-type="action" 
    onclick="ui.result.tweet();" 
    data-bb-style="button" 
    data-bb-overflow="true"
    data-bb-img="img/icons/twitter.png">
    Tweet
</div>

<div data-bb-type="action" 
    onclick="ui.result.share();"
    data-bb-style="button"
    data-bb-overflow="true"
    data-bb-img="img/icons/facebook.png">
    Teilen
</div>

This works fine:

<div data-bb-type="action" 
    onclick="ui.result.tweet();" 
    data-bb-style="button" 
    data-bb-overflow="true"
    data-bb-img="img/icons/twitter.png">
    Tweet
</div>

<div data-bb-type="action" 
    onclick="ui.result.share();"
    data-bb-style="button"
    data-bb-overflow="true"
    data-bb-img="img/icons/facebook.png">
    Teilen
</div>

<div id="watch-action" 
    onclick="ui.watchList.add();" 
    data-bb-type="action" 
    data-bb-style="button" 
    data-bb-overflow="true" 
    data-bb-img="img/icons/tac.png">
    Vormerken
</div>

<div id="delete-action" 
    onclick=""
    data-bb-type="action"
    data-bb-style="button"
    data-bb-overflow="true"
    data-bb-img="img/icons/delete.png">
    Entfernen
</div>

I guess this is related to the margin that is added to the first item. Lets say A. A has a margin-top. B has no margin and is hidden. When I press A it is hidden and B shows up which has now margin-top and therefore screws up the overflow menu.

@tneil
Open Source Projects member
tneil commented Feb 19, 2013

Show Action Overflow and hide action overflow are showing/hiding each other.. When you look at it, it makes it look like the text of the action is just changing.. but it is actually showing and hiding two different actions.

From your code it shows that the id being specified is causing the issue... what happens if you don't have a hyphen in them? Wondering if in some weird scenario it is being evaluated as JS

@splatterb0y

This does not change the problem itself.

Try the following: Move the buttons of your dynamic action menu sample that are shown/hidden to the top of the overflow menu. This is how you can exactly reproduce my problem, with your own code.

@tneil
Open Source Projects member
tneil commented Feb 20, 2013

Ah... That did it.. let me take a look to see what is going on

@tneil tneil pushed a commit that referenced this issue Feb 20, 2013
Tim Neil fix for overflow action show and hide for issue #658 ce5898c
@tneil
Open Source Projects member
tneil commented Feb 20, 2013

Ok, this is now fixed. Thanks for helping to get to the bottom of the issue :)

@tneil tneil closed this Feb 20, 2013
@splatterb0y

I have to thank you @tneil. Glad I could help you sort it out this time.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.