Content-Length: 230122 | pFad | https://github.com/jquery/jquery-mobile/issues/4945

6A ListView in Grid makes strange border · Issue #4945 · jquery-archive/jquery-mobile · GitHub
Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

ListView in Grid makes strange border #4945

Closed
aabmar opened this issue Sep 6, 2012 · 2 comments
Closed

ListView in Grid makes strange border #4945

aabmar opened this issue Sep 6, 2012 · 2 comments
Assignees
@jaspermdegroot
Labels
Priority: High
Milestone
1.2.0

Comments

@aabmar
Copy link

aabmar commented Sep 6, 2012

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://clevelandohioweatherforecast.com//pFad.php?u=http%3A%2F%2Fcode.jquery.com%2Fmobile%2F1.2.0-beta.1%2Fjquery.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>
@jaspermdegroot
Copy link
Contributor

@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.

@ghost ghost assigned jaspermdegroot Sep 6, 2012
@gabrielschulhof
Copy link

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

@gabrielschulhof gabrielschulhof mentioned this issue Sep 10, 2012
Closed
arschmitz pushed a commit to arschmitz/jquery-mobile that referenced this issue Oct 16, 2012
@jaspermdegroot @arschmitz
Listview: increase level of specificity of the margin 0 rule for list…
19c5c6f 
…view buttons to avoid margins when used in grid. Fixes jquery-archive#4945
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@jaspermdegroot jaspermdegroot

Labels
Priority: High
Projects
None yet
Milestone
1.2.0
Development

No branches or pull requests
3 participants
@gabrielschulhof @jaspermdegroot @aabmar








ApplySandwichStrip

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

Fetched URL: https://github.com/jquery/jquery-mobile/issues/4945

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy