Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Grouped link button in a dialog shows wrong border #3697

Closed
Azuo opened this Issue · 1 comment

3 participants

@Azuo

A link button in a dialog will have wrong border rendered if it is placed within a "controlgroup" container:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>JQM Grouped Button Test</title>
        <link type="text/css" rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
        <!--
        <link type="text/css" rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
        -->
    </head>
    <body>
        <div id="page" data-role="page">
            <div data-role="header"><h1>Grouped Button Test</h1></div>
            <div data-role="content">
                <div data-role="controlgroup" data-type="horizontal">
                    <input type="button" value="Button" data-inline="true" data-theme="b" data-icon="check" />
                    <a href="#" data-role="button" data-inline="true" data-theme="e" data-icon="delete">Link</a>
                </div>
                <div data-role="controlgroup" data-type="horizontal">
                    <input type="button" value="Button" data-inline="true" data-theme="b" data-icon="check" />
                    <input type="button" value="Button" data-inline="true" data-theme="e" data-icon="delete" />
                </div>
                <div data-role="controlgroup" data-type="horizontal">
                    <a href="#" data-role="button" data-inline="true" data-theme="b" data-icon="check">Link</a>
                    <a href="#" data-role="button" data-inline="true" data-theme="e" data-icon="delete">Link</a>
                </div>
                <div data-role="controlgroup" data-type="horizontal">
                    <a href="#" data-role="button" data-inline="true" data-theme="b" data-icon="check">Link</a>
                    <input type="button" value="Button" data-inline="true" data-theme="e" data-icon="delete" />
                </div>
                <a href="#dialog" data-role="button" data-inline="true" data-rel="dialog">Open in a Dialog</a>
            </div>
        </div>
        <div id="dialog" data-role="dialog">
            <div data-role="header"><h1>Grouped Button Test</h1></div>
            <div data-role="content">
                <div data-role="controlgroup" data-type="horizontal">
                    <input type="button" value="Button" data-inline="true" data-theme="b" data-icon="check" />
                    <a href="#" data-role="button" data-inline="true" data-theme="e" data-icon="delete">Link</a>
                </div>
                <div data-role="controlgroup" data-type="horizontal">
                    <input type="button" value="Button" data-inline="true" data-theme="b" data-icon="check" />
                    <input type="button" value="Button" data-inline="true" data-theme="e" data-icon="delete" />
                </div>
                <div data-role="controlgroup" data-type="horizontal">
                    <a href="#" data-role="button" data-inline="true" data-theme="b" data-icon="check">Link</a>
                    <a href="#" data-role="button" data-inline="true" data-theme="e" data-icon="delete">Link</a>
                </div>
                <div data-role="controlgroup" data-type="horizontal">
                    <a href="#" data-role="button" data-inline="true" data-theme="b" data-icon="check">Link</a>
                    <input type="button" value="Button" data-inline="true" data-theme="e" data-icon="delete" />
                </div>
                <a href="#" data-role="button" data-inline="true" data-rel="back">Close</a>
            </div>
        </div>
    </body>
</html>
@agcolom
Collaborator

Yes, I can confirm... here's the fiddle to illustrate: http://jsfiddle.net/agcolom/qeqB2/

@Wilto Wilto closed this issue from a commit
@Wilto Wilto Fixes #3697 — `.ui-corner-top`/`.ui-corner-bottom` are no longer inco…
…rrectly applied to the first and last elements in a controlgroup within a dialog page.
2a0a230
@Wilto Wilto closed this in 2a0a230
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.