Messages - Navbar dissapear

Questions
1

Hello there,

How can I keep the navbar always visible in messages?

When the keyboard is displayed, the navbar is hidden.

See attached.

Thanks!

image
F6618344-6AE1-4703-82B3-D466A6753CD2.png750Ă—1334 37 KB
image
AF73C4F2-0A1C-4B55-969E-7379EC9C35F4.png750Ă—1334 56.6 KB

2

Hi!

Please post bit of code :slight_smile: and i try help you.

Por lo que veo en las capturas eres de habla hispana, puedes usar en este mismo foro la sección Español :wink:

http://forum.framework7.io/c/questions/spanish

3

Hola @DanielRiera,

Sorry por el retraso. Éste el código:

<div class="page" data-name="mensaje">
  <div class="navbar">
    <div class="navbar-inner">
	  <div class="left">
          <a href="#" class="link back">
            <i class="icon icon-back"></i>
            <span class="ios-only">Atrás</span>
          </a>
        </div>
	  
      <div class="title">Chat</div>
    </div>
  </div>
  <div class="toolbar messagebar">
    <div class="toolbar-inner">
      <div class="messagebar-area">
        <textarea class="resizable" placeholder="Mensaje"></textarea>
      </div><a class="link send-link" href="#">Enviar</a>
    </div>
  </div>
  <div class="page-content messages-content">
    <div class="messages" id="mensaje_bloque">
      <!-- Messages title -->
      <!--<div class="messages-title"><b>Sunday, Feb 10,</b> 12:58</div>-->
      <!-- Full layout sent message -->
      <div class="message message-sent" id="test2">
    </div>
  </div>
</div>

No veo el por qué la navbar se oculta al sacar el teclado. Alguna idea de cómo resolverlo?

Gracias

Salu2

4

@nolimits4web Any suggestion here? not sure why the navbar is hidden when the keyboard shows up.

THANKS!

<div class="page" data-name="mensaje">
 <div class="navbar">
    <div class="navbar-inner">
	  <div class="left">
          <a href="#" class="link back">
            <i class="icon icon-back"></i>
            <span class="ios-only">Atrás</span>
          </a>
        </div>
	  
      <div class="title">Chat</div>
    </div>
  </div>
  <div class="toolbar messagebar">
    <div class="toolbar-inner">
      <div class="messagebar-area">
        <textarea class="resizable" placeholder="Mensaje"></textarea>
      </div><a class="link send-link" href="#">Enviar</a>
    </div>
  </div>
  <div class="page-content messages-content">
    <div class="messages" id="mensaje_bloque">
      <!-- Messages title -->
      <!--<div class="messages-title"><b>Sunday, Feb 10,</b> 12:58</div>-->
      <!-- Full layout sent message -->
      <div class="message message-sent" id="test2">
    </div>
  </div>
</div>
5

I think (guess) it’s not hidden. When the keyboard shows, the whole window is pushed up, because window/body height is not responsive. If you slide down, you’ll see the navbar.

In cordova, you could do some settings to make window responsive to keyboard shown event. In browser, I haven’t found any solution yet.

1 Like
6

Hi @Echo_Chen,

Thanks for the reply.

I’m using cordova and other areas of the part the keyboard is shown and the navbar stays.

How you do the windows responsive to the keybard shown event?

Thanks

7

just did a search and found this. i never use cordova, hope this could help you.

8

Thanks for that. I followed the instructions but the issue is still there. Android seems that manages the messages page better than iOS. I will continue troubleshooting…