[Dojo-interest] Preventing Select from resizing inside a Table?

Paul D. Fernhout pdfernhout at kurtz-fernhout.com
Sat Sep 6 12:25:02 EDT 2014


I am trying to use Dojo to make a table with two side-by-side selects, where the selects do not change size when selections are chosen.

I included a test case below and also created one at this fiddle: http://jsfiddle.net/z7Lowupx/2/

The test case has two options in each select, one with a short piece of text and one with a long piece of text. However, the test case does not work as I would expect. The sizes of the selects change when an option is chosen in Firefox 31.0 and Safari 5.1.10 but not in Chromium 34.0.1847.137. I would expect the selects not to resize in any browser because I have set the width to 100% for each select and also for the table. How can I prevent that resizing from happening? Or is this a bug in Dojo Select widgets or tables?

--Paul Fernhout

========== dojo-two-selects-in-a-table.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test of select in a table</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/dijit.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css">

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js"></script>

</head>

<body class="claro">

<div id="testDiv"></div>

<script>
require(["dijit/form/Select", "dojox/layout/TableContainer", "dojo/domReady!"], function(Select, TableContainer){
    // My intent here is to have a table with two side-by-side selects, where the selects do not change size when selections are chosen.
    // Why do the sizes of the selects change when an option is chosen in Firefox 31.0 and Safari 5.1.10 but not in Chromium 34.0.1847.137?
    
    function newSelect(options, containerPane) {
        var select = new Select({
            options: options,
            style: "width: 100%;"
        });
        
        containerPane.addChild(select);
        select.startup();
        return select;
    }
    
    var table = new TableContainer({
        cols: 2,
        showLabels: false,
        style: "width: 100%;"
    }, "testDiv");
    
    options = [
        {label: "short", value: "1"},
        {label: "long ---------------------------------------------", value: "2"}
    ];
    
    newSelect(options, table);
    newSelect(options, table);
    
    table.startup();
});
</script>

</body>
</html>


More information about the Dojo-interest mailing list