Skip to content
This repository

ListView in Grid makes strange border #4945

Closed
aabmar opened this Issue September 06, 2012 · 2 comments

3 participants

aabmar Jasper de Groot Gabriel "_|Nix|_" Schulhof
aabmar

In JQM 1.1 it was no problem having a listview inside a grid column. In 1.2 B1 this creates a strange border around the listview.

This code shows the error:

<!DOCTYPE html>
<html>
  <head>
    <title>Grid Test</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.js"></script>
  </head>
  <body>
    <div data-role="page"> 
      <div data-role="header"><h3>Grid - ListView bug</h3></div> 
      <div data-role="content">
        <div class="ui-grid-a">
          <div class="ui-block-a">
            Around thid listveiw, a strange border will appear. This worked perfectly in JQM 1.1.
              <ul data-role="listview" data-inset="true">
                <li><a href="index.html">Acura</a></li>
                <li><a href="index.html">Audi</a></li>
                <li><a href="index.html">BMW</a></li>
                <li><a href="index.html">Cadillac</a></li>
                <li><a href="index.html">Ferrari</a></li>
              </ul>
          </div>
          <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div>
        </div>
    </div> 
  </body>
</html>
Jasper de Groot
Owner

@aabmar

Thanks for reporting the issue. The problem is the 5px margin that we add for regular buttons inside a grid. That shouldn't be applied to other buttons like the listview items. This is a regression from commit 7ab7420. I will look into a better way to do this.

Gabriel "_|Nix|_" Schulhof
Collaborator

Turned it into a jsbin: http://jsbin.com/iwokon/2

Jasper de Groot uGoMobi closed this issue from a commit September 11, 2012
Jasper de Groot Listview: increase level of specificity of the margin 0 rule for list…
…view buttons to avoid margins when used in grid. Fixes #4945
229d8f0
Jasper de Groot uGoMobi closed this in 229d8f0 September 10, 2012
Alexander Schmitz arschmitz referenced this issue from a commit in arschmitz/jquery-mobile September 11, 2012
Jasper de Groot Listview: increase level of specificity of the margin 0 rule for list…
…view buttons to avoid margins when used in grid. Fixes #4945
19c5c6f
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.