Possible bug in v5.04

1

Hello
I have 2 problems - one is related to hide/display sidebar button and second problem is related to wrong position of icons in the class “right”.
Here is code:

  <div id="app">
     <div id="panelleftmain" class="panelleftmain panel panel-left panel-cover panel-init" data-swipe="true" data-visible-breakpoint="992" style="width: 80px;">
        <div class="view view-left">
           <div class="page" style="background:#e9ecef">
              <div class="navbar">
                 <div class="navbar-inner sliding">
                    <div id="mylogo"></div>
                 </div>
              </div>
           </div>
        </div>
     </div>
     <div class="view view-main ios-edges">
        <div class="page" data-name="home">
           <div class="navbar">
              <div class="navbar-inner">
                 <div class="left">              
                   <a href="#" class="link icon-only panel-open" data-panel="left">                
                     <i class="icon f7-icons ios-only">menu</i>                
                     <i class="icon material-icons md-only">menu</i>              
                   </a>            
                 </div>
                 <div class="title">Test</div>
                 <div class="right">              
                   <a href="#" class="link icon-only project-popover" >                
                     <i class="fa fa-plus"></i>              
                   </a>              
                   <a href="#" class="link icon-only">                
                     <i class="fa fa-plus"></i>              
                   </a>            
                 </div>
              </div>
           </div>
           <div class="page-content"></div>
        </div>
     </div>
  </div>

and here are images:
on this image: https://imgur.com/GWZbG7m
you can see that second icon is missing. This is initial page you see once app is loaded.
here: https://imgur.com/0tMKO6f
you can see second icon, after I resize a page a bit, or when I click F5 to refresh page
and here: https://imgur.com/TrViGJm
you can see menu which should be hidden initially.
All those things works perfect in v4.5.2
Can someone check this, please?
Thank you.

2

Would be good to see live example or JSFIddle, there is something wrong in your code or something is breaking it

3

Regarding second icon, it was Opera browser problem. After upgrading, it works fine.
Regarding menu, here is complete code:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="default">
      <meta name="theme-color" content="#2196f3">
      <meta name="format-detection" content="telephone=no">
      <meta name="msapplication-tap-highlight" content="no">
      <title>Simple</title>
      <link rel="stylesheet" href="css/framework7.bundle.min.css" />
      <link rel="stylesheet" href="css/app.css" />
   </head>
   <body>
      <div id="app">
         <div id="panelleftmain" class="panelleftmain panel panel-left panel-cover panel-init" data-swipe="true" data-visible-breakpoint="992">
            <div class="view view-left">
               <div class="page" style="background:#e9ecef">
                  <div class="navbar">
                     <div class="navbar-inner sliding">
                        <div id="mylogo"></div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="view view-main ios-edges">
            <div class="page" data-name="home">
               <div class="navbar">
                  <div class="navbar-inner">
                     <div class="left">              
                       <a href="#" class="link icon-only panel-open" data-panel="left">                
                         <i class="icon f7-icons ios-only">menu</i>                
                         <i class="icon material-icons md-only">menu</i>              
                       </a>            
                     </div>
                     <div class="title">Test</div>
                     <div class="right">              
                       <a href="#" class="link icon-only project-popover" >                
                         <i class="fa fa-plus"></i>              
                       </a>              
                       <a href="#" class="link icon-only">                
                         <i class="fa fa-plus"></i>              
                       </a>            
                     </div>
                  </div>
               </div>
               <div class="page-content"></div>
            </div>
         </div>
      </div>
      <script src="js/framework7.bundle.min.js"></script>  
      <script>
        var sapp  = new Framework7({
          root: '#app',
          id: 'io.simple',
          name: 'Simpe',
        });      
      </script>  
   </body>
</html>

I don’t know how to post to fiddle using F7 links.
app.css is used from your source.
It looks like this: https://imgur.com/egiyJiT
with other words, menu is visible and it should not be.
Thank you.

4

Please, can anybody check why is menu displayed?

5

Why it shouldn’t be displayed if you have that icon in code? Did you add some css to hide it or what?

6

It should be displayed only when in mobile screen size, otherwise it should not be visible. Same code worked perfect in v4.5.2
Thank you.

7

It was always a custom CSS generated by CLI, make sure you have this code in styles:

.panel-left.panel-in-breakpoint ~ .view .navbar .panel-open[data-panel="left"] {
  display: none;
}
1 Like
8

Awesome, my old CSS was:

.panel-left.panel-visible-by-breakpoint ~ .view .navbar .panel-open[data-panel="left"] {
  display: none;
}

it works with your CSS, thank you!