Skip to content

Grouped link button in a dialog shows wrong border #3697

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

3 participants

@Azuo
Azuo commented Mar 1, 2012

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
agcolom commented Mar 1, 2012

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
Something went wrong with that request. Please try again.