Grouped link button in a dialog shows wrong border #3697

Closed
Azuo opened this Issue Mar 1, 2012 · 1 comment

Projects

None yet

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
jQuery Foundation member

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

@Wilto Wilto added a commit that closed this issue Mar 1, 2012
@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 Mar 1, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment