Search jQuery

jQuery Forum

why this empty space - css is not fixed auto by jQm?

in jQuery Mobile • 4 years ago

jQm 1.4.5

Why in collapsible widget between items, in header (double line with empty black color) and footer there is empty space like image attached... ? In footer one item is also Not aligned with other footer buttons... well?

    <link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
    <link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" href="../_assets/css/jqm-demos.css">
    <script src="../js/jquery.js"></script>
    <script src="../_assets/js/index.js"></script>
    <script src="../js/jquery.mobile-1.4.5.min.js"></script>
<div data-role="page" id="demo-page" data-url="demo-page">
        <div data-role="header" data-theme="b">
            <h1>Design Patterns GoF & more in 4 Languages</h1>
            <a href="#left-panel" data-icon="carat-r" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-nodisc-icon">Open left panel</a>
            <a href="#right-panel" data-icon="carat-l" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-nodisc-icon">Open right panel</a>
        </div>
        <div role="main" class="ui-content">

            <div data-role="collapsible" data-inset="true">
                <h3>Creational (5)</h3>
                <ul data-role="listview">
                    <li><a href="#pattern" data-dp="Singleton">Singleton</a></li>
                    <li><a href="#pattern" data-dp="Prototype">Prototype</a></li>
                    <li><a href="#pattern" data-dp="FactoryMethod">Factory Method</a></li>
                    <li><a href="#pattern" data-dp="AbstractFactory">Abstract Factory</a></li>
                    <li><a href="#pattern" data-dp="Builder">Builder</a></li>
                </ul>

Replies(5)

polis123

Re: why this empty space - css is not fixed auto by jQm?

4 years ago

</div>
<div data-role="footer" data-position="fixed" data-display="overlay" style="overflow:hidden;">
<div data-role="navbar" data-iconpos="top" class="ui-navbar" role="navigation">
<ul>
<li><a href="#demo-page" data-icon="home" data-theme="a">home</a></li>
<li><a href="#fav" data-icon="star" data-theme="b">Favorites</a></li>
<li><a href="#recent" data-icon="eye" data-theme="c">Recent</a></li>
</ul>
</div>
</div>
</div>
<!-- page : pattern item - end -

polis123

Re: why this empty space - css is not fixed auto by jQm?

4 years ago

as i see in inspect code

there is extra " .... "

how disable or remove this ?

watusiware

Re: why this empty space - css is not fixed auto by jQm?

4 years ago

1. Don't include jqm-demos.css. It is not a part of jQuery Mobile. It is for the JQM demo page.

2. Don't include other files that are only part of the demo. I can't guess what is in index.js. Is it only your code, or does it have something from the demo?

3. I can't guess what you mean by "extra  "

It's always better to post a link to your page, or to make a jsFiddle that we can try. Then we don't have to guess.

polis123

Re: why this empty space - css is not fixed auto by jQm?

4 years ago

yes taken from swipe demo example.

3. I can't guess what you mean by "extra  "

I mean in inspect html code in chrome where as exist this empty white space ... exist

Don't include other files that are only part of the demo

this makes that correct ???

watusiware

Re: why this empty space - css is not fixed auto by jQm?

4 years ago

Don't include other files that are only part of the demo

this makes that correct ???

I've no idea. It's a guess. I don't know what is in those files, as you didn't share them. Did you try it?

Since you didn't provide a jsFiddle or other workable demo we can try, we can only guess.

It's just common sense when starting a JQM project to start with the JS and CSS as distributed, and not add some random code and CSS that's not part of JQM. The extra bits of code and CSS on the JQM demo site were made for the JQM demo site - not your project. Follow the recommended page structure, and don't include anything else (except your own code and CSS overrides, if any).

http://demos.jquerymobile.com/1.4.5/pages/

Top Reply

Response title

Attachments

jQuery Forum

why this empty space - css is not fixed auto by jQm?

Replies(5)

Re: why this empty space - css is not fixed auto by jQm?

Re: why this empty space - css is not fixed auto by jQm?

Re: why this empty space - css is not fixed auto by jQm?

Re: why this empty space - css is not fixed auto by jQm?

Re: why this empty space - css is not fixed auto by jQm?

Statistics

Tags

Actions

Related Posts