New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Grouped link button in a dialog shows wrong border #3697

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

Comments

Projects
None yet
3 participants
@Azuo
Contributor

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

This comment has been minimized.

Show comment
Hide comment
@agcolom

agcolom Mar 1, 2012

Member

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

Member

agcolom commented Mar 1, 2012

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

@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