How to center a Dijit Select widget?


Tags: javascript,html,css,dojo,dijit.form

Problem :

I'm using Dojo 1.10 and I need to display a Select widget centered horizontally on the page. I cannot figure out how to do it. I have guessed a number of CSS attributes to try with no luck. The Select widget is always displayed to the left. Nothing seems to move it to the center. How do I do it?

More broadly, where in the Dojo documentation does it describe how to do this? Believe me when I say I have done web search after web search; maybe I don't know what to search for. Thanks in advance.

This code is adapted from one of the dijit/form/Select samples.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/resources/dojo.css">
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dijit/themes/claro/claro.css">
    <script>dojoConfig = {async: true, parseOnLoad: true}</script>
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"></script>
    <script>
      require(["dojo/parser", "dijit/form/Select"]);
    </script>
  </head>

  <body class="claro">
    <select name="select1" data-dojo-type="dijit/form/Select">
      <option value="TN">Tennessee</option>
      <option value="VA" selected="selected">Virginia</option>
      <option value="WA">Washington</option>
      <option value="FL">Florida</option>
      <option value="CA">California</option>
    </select>
  </body>
</html>


Solution :

It can be done, but as far as i know it can't be done by using CSS on the element classes or ID. Inline styles however will work. This is due to how the Dijit is rendered. For horizontal centering you need to specify element width (fixed or percentage). Note that this width can only be defined inline. Otherwise it won't work and will screw up your rendering.

Giving the element a width and display it as block with horizontal margins on auto will do the trick. Like this:

<select data-dojo-type="dijit/form/Select" style="width: 200px; display: block; margin: 0 auto;">
    <!-- options -->
</select>

Since that's inline it isn't very maintainable. So i would suggest/recommend using a wrapper element and putting the dijit's width to 100% like this:

<div id="wrapper">
    <select data-dojo-type="dijit/form/Select" style="width: 100%;">
        <!-- options -->
    </select>
</div>

So now you can use CSS to control your wrapper's width and margins:

#wrapper {
    width: 200px;
    margin: 0px auto;
}

Here's a working example on Plunker: http://plnkr.co/edit/NyD28E?p=preview


    CSS Howto..

    How to minify css files with RequireJS

    How to configure opacity based CSS overlay to not effect spacing of surrounding elements?

    How to get a reference to id=“xxx.yyy” in CSS?

    How to change link color when using jquery mouseover

    Grunt + Sass, how do I include subfolder scss when I compile?

    How to scroll a page or a element using css

    I have a link icon next to each link. How do I exclude the link icon from images?

    How to make this loading overlay effect responsive?

    How to do the Height of html tag Body on 100% of browser window size?

    How to avoid universal Rule CSS Asterisk(*)?

    How can I trigger a jQuery alert when an iframe AND its CSS is loaded and rendered?

    How to Detect css style by iPhone/iPad

    How to share js/css/images across Rails applications?

    how to make text with quotations justify? [closed]

    How to populate JSON response values in Jquery

    How do I use CSS to add a non-rectangular border around an image?

    How to set display none on tag using css?

    Modernizr: how do I detect CSS display:table-cell support?

    How to animate through stacked images Javascript

    how fix bug with white lines between the cells of the table in IE11

    how to correctly render a response on an gsp from on the same page as the request (REST call) in grails

    How to make CSS 3 columns stay in their posisiton?

    How to keep nav bar from shifting elements to next line when zooming in?

    How to spread elements evenly (horizonatly)?

    XPath how to find second element with CSS class name

    In how many ways and places we can place comment in CSS?

    How can I display 2 big buttons next to each other html & css

    CSS - How to remove 2nd vertical scroll bar without changing anything else?

    How do you hide and show a background image using a carousel?

    How to center div while keeping inside divs on same line in css?