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 can i make each div look like seperate block?

    How to achieve this layout with div and css?

    How to make elements appear one by one using css animation

    How should I use `position` and other properties correctly to position my web page?

    How to put all Array values in $_GET[]

    drupal themes: how do I include several css files / js files on my theme's .info file?

    How to position HTML code over CSS

    How to get the CSS width of a mobile device in ASP.NET MVC?

    How to make submit input and text input equally spaced

    How to make jQuery target and attach a plugin call to hundreds of CSS ID's with an ID number at the end of them?

    How to place an icon on the first line and text on the second line?

    how to call browser based css?

    CSS: How to fix overlapping divs

    How to place a div right below another div?

    How do you disable the set width of parent element for child element?

    How to make these jquery pop ups fall back to css when javascript disabled

    Restricted to CSS-2.1, can I ensure that one border in a table shows 'on top' of another border when borders are collapsed

    How to make a div and its children to ignore its parent styles?

    How to return a “text” in css less?

    How can display table-row behave like colspan=3

    How to do letter spacing every two letters with CSS only?

    How do I switch external CSS files?

    How to Paginate Footnotes Properly in CSS & HTML (Print Media)

    CSS: how to set width to children's width?

    how to give two different states in css?

    How do i put text under an img icon in a menu?

    How to program the navigation bar(image) web html

    How to detect if html contains block level elements using jQuery?

    How to adjust 100% height to include height of added element

    How to show hidden content when hover in CSS not working