Opened 12 years ago

Closed 12 years ago

Last modified 9 years ago

#3432 closed defect (duplicate)

RadioButton layout in Dialog is skewed

Reported by: guest Owned by: bill
Priority: high Milestone: 0.9
Component: Dijit - Form Version: 0.9
Keywords: Cc:
Blocked By: Blocking:

Description

I've placed a vertical group of two RadioButtons? in a Dialog. The buttons show up as 'one-and-half' buttons before the label field. Non-dojo radiobuttons look fine in Dialog. Code for dialog table:

<table>
  <tr>
    <td>Create Container</td>
    <td>
        <input type="radio" name="grp1" id="contRadio1" value="inselected" dojoType="dijit.form.RadioButton"/>
        <label for="contRadio1">inside the selected Container</label><br/>
        <input type="radio" name="grp1" id="contRadio2" value="astop" dojoType="dijit.form.RadioButton"/>
        <label for="contRadio2">as top Container</label>
    </td>
  </tr>
  <tr>  
    <td>Other input fields</td>
    <td>And submit buttons</td>
  </tr>
</table>

I have a screenshot of it, didn't know how to put it here in the most sensible way.

Anni

Attachments (2)

Dialog_Radiobutton2.jpg (18.6 KB) - added by guest 12 years ago.
Screenshot
testcase.html (2.9 KB) - added by guest 12 years ago.

Download all attachments as: .zip

Change History (10)

comment:1 Changed 12 years ago by bill

Hi Anni - both screenshots and testcases should be attached to the bug using the "Attach File" button but you need to submit the bug first and then attach afterwards. The button doesn't appear when creating a new bug.

Also should list what browser it happens on.

Your example above isn't a full testcase. It doesn't include dojo, and it doesn't even have a dijit.layout.Dialog, does it? So pleae attach one.

comment:2 Changed 12 years ago by guest

This is with Firefox 1.5.0.12. Dojo 0.9 nightly 20/Jun/2007. It appears that omitting @import "../../../dojo/resources/dojo.css"; style causes this problem. Testcase is here, modified from test_Dialog.html

<html>
<head>
<title>Dialog Widget Dojo Tests</title>
<style type="text/css">
	@import "../../themes/tundra/tundra.css";
        @import "../css/dijitTests.css";
	table { border: none; }
</style>		
<style type="text/css">
body { font-family : sans-serif; }


form {
	margin-bottom : 0;
}
</style>
<script type="text/javascript"
        djConfig="isDebug: true"
        src="../../../dojo/dojo.js"></script>
<script type="text/javascript">
        dojo.require("dijit.layout.Dialog");
        dojo.require("dijit.form.Checkbox");
        dojo.require("dojo.parser");    // scan page for widgets and instantiate them

</script>
</head>
<body class="tundra">
<h2>Dijit layout.Dialog tests</h2>
<a href="javascript:dijit.byId('dialog1').show()">Show First Dialog</a>

<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos.
</p>

<div dojoType="dijit.layout.Dialog" id="dialog1" closeNode="hider" title="First Dialog">
    <form onsubmit="return false;">
        <table>
                        <tr>
                                <td><label for="name">Radiobuttons: </label></td>
                                <td><p>
                                    <input type="radio" name="g1" id="contParentCheck1" value="selected" checked="checked" dojoType="dijit.form.RadioButton"/>
                                    <label for="contParentCheck1">checked</label><br />
                                    <input type="radio" name="g1" id="contParentCheck2" value="root" dojoType="dijit.form.RadioButton"/>
                                    <label for="contParentCheck2">not checked and long label</label>
                                    </p>
                                </td>
                        </tr>
            <tr>
                <td><label for="name">Name: </label></td>
                <td><input type="text" id="name"></td>
            </tr>
            <tr>
                <td><label for="loc">Location: </label></td>
                <td><input type="text" id="loc"></td>
            </tr>
            <tr>
                <td><label for="desc">Description and with very long label to screw layout: </label></td>
                <td><input type="text" id="desc"></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                <input type="button" id="hider" value="OK"></td>
            </tr>
        </table>
    </form>
</div>


</body>
</html>

Changed 12 years ago by guest

Attachment: Dialog_Radiobutton2.jpg added

Screenshot

comment:3 Changed 12 years ago by bill

Again, as I said above, attach testcases to the bug using the "Attach File" button.

Firefox 1.5 is not support by Dijit, or my Mozilla, for that matter. Does it happen on FF2?

comment:4 Changed 12 years ago by bill

PS: had a few typos above. I meant to say "Firefox 1.5 is not supported by Dijit, or by Mozilla, for that matter. Does it happen on Firefox 2?"

Changed 12 years ago by guest

Attachment: testcase.html added

comment:5 Changed 12 years ago by guest

Attahed testcase as a file. This occurs in FF2 as well, using nightly 26.Jun. Note that testcase paths have now changed since Dialog apparently moved from dijit.layout to dijit root this weekend.

comment:6 Changed 12 years ago by bill

Milestone: 0.9

comment:7 Changed 12 years ago by dante

Resolution: duplicate
Status: newclosed

addressed in #3666, so this is technically a duplicate. synopsis: tundra.css assumes the inclusion of dojo.css in some cases (default td and margin settings) ... suggest merge dojo.css into dijit.css as part of 'dijit' ... as dojo core (shouldn't) need any additional styling to work at all?

comment:8 Changed 9 years ago by bill

Component: DijitDijit - Form
Note: See TracTickets for help on using tickets.