Skip to content
This repository

Grouped link button in a dialog shows wrong border #3697

Closed
Azuo opened this Issue March 01, 2012 · 1 comment

3 participants

Azuo Mat Marquis Anne-Gaelle Colom
Azuo
Azuo commented March 01, 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>
Anne-Gaelle Colom
Collaborator

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

Mat Marquis Wilto closed this issue from a commit March 01, 2012
Mat Marquis 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
Mat Marquis Wilto closed this in 2a0a230 March 01, 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.