How to center a Dijit Select widget?
Question
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>
1 answers
solution1
1 ACCPTED 2014-12-18 01:13:57
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.