Jquery Mobile - scrolled button

Asked

Viewed 35 times

1

I’m playing in fds and learning a little Jquery Mobile, and I went to insert some buttons in the header, but the last button always stays out of the "scrolled down" position. how to solve this? 

<!DOCTYPE html>
<html lang="pt-BR">
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name='theme-color' content='#00974a'/>
<title>Teste</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css"/>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js">
</script>

<body> 

<div data-role="header" style="overflow:hidden;">
<h1>I'm a header</h1>
    <a href="#" data-icon="gear" class="ui-btn-right">Options</a>
    <div data-role="navbar">
        <ul>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
        </ul>
    </div><!-- /navbar -->
</div><!-- /header -->


<div data-role="content"> 

</div><!-- /content -->
	 
</div><!-- /page -->
</body>
</html>

jquery jquery-mobile

1 answer

1

The problem is that the indentation of <li> was as text space, and the snippet here is generating several &nbsp; (space), as shown in the print below:

inserir a descrição da imagem aqui

If you copy your code into a notepad and paste it back into the snippet, it will remove these spaces and the button will be ok, as shown below:

<!DOCTYPE html>
<html lang="pt-BR">
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name='theme-color' content='#00974a'/>
<title>Teste</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css"/>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js">
</script>

<body> 

<div data-role="header" style="overflow:hidden;">
<h1>I'm a header</h1>
    <a href="#" data-icon="gear" class="ui-btn-right">Options</a>
    <div data-role="navbar">
        <ul>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
        </ul>
    </div><!-- /navbar -->
</div><!-- /header -->


<div data-role="content"> 

</div><!-- /content -->
	 
</div><!-- /page -->
</body>
</html>

Now, check your HTML, because it has duplicate tags and missing close the <head>.

  • Thanks man! now it worked!.. ball show!

Browser other questions tagged jquery jquery-mobile

You are not signed in. Login or sign up in order to post.