Framework7: Error align center navbar with material theme

[mdeprezzo]

Hi guys, i've a problem with navbar and the text alignment. The point is that with material theme the text doesn't align properly, and all text overlaps. How can i fix this ?
And in general, the sliding transition with material theme doesn't works properly too.

[nolimits4web]

Example, screenshot or something more clear to understand?

[mdeprezzo]

Sorry, the sliding effect that with ios theme works, with material theme doesn't. So, there will be some updating for material theme too ?

[nolimits4web]

Look at Material theme guides and tutorials on website. There is no sliding effect in Material theme

[mdeprezzo]

Ok, i'm saying that would be nice to have that effetct on material. Btw, it doesn't matter. Thanks.

[coorasse]

Why has this ticket been closed?
If you simply take the Basic Android/Material App Layout proposed in the docs and try to add left, center and right elements in the navbar it doesn't work properly:

<div class="navbar">
  <div class="navbar-inner">
    <div class="left">
      <a href="#" class="link">Left Link</a>
     </div>
     <div class="center">Awesome App</div>
     <div class="right">
       <a href="#" class="link">Right Link</a>
      </div>
    </div>
  </div>

will result in:

If I remove left and right links then everything is ok.

[mdeprezzo]

I know but the name goes to the left and not on center. Btw thanks for info

[coorasse]

Sorry, maybe I was not clear but I think this issue should not be closed.

[nolimits4web]

@coorasse "center" element on Material theme should stick to the left side

[coorasse]

By specification? If so, do you have a link to that specific please? I tried to Google a little bit about it but I can't find anything about this topic.

[nolimits4web]

https://www.google.com/design/spec/layout/structure.html

[coorasse]

Cool, thanks. I still think "center" class is leading to misunderstanding but I hope this conversation will be helpful for someone else.

[koofah]

Thanks . it saved me hours of frustration.

[rajabilal555]

But for some reason for me it's like this...

My CODE:

             <div class="navbar">
               <div class="navbar-inner">
                 <div class="left">
                    <a href="#" class="link icon-only open-panel">
                        <i class="icon icon-bars"></i>
                    </a>
                 </div>
                 <div class="center">WGaming Application</div>
               </div>
             </div>

And That if the screen is bigger it gets more pulled towards left...
it works fine on 310 x ***

[noxx2]

@rajabilal555 Had the same issue as you and found this to be the solution.

[lock[bot]]

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.