Home/ Questions/Q 243159
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T20:53:53+00:00

I’m creating a form with dojo, and I want a range-restricted number input field.

  • 0

I’m creating a form with dojo, and I want a range-restricted number input field. So I use this:

<input 
    id             = "sample_input"
    type           = "text"
    dojoType       = "dijit.form.NumberTextBox"
    name           = "sample_input"
    value          = "27"
    constraints    = "{min:1,max:30,places:0}"
    promptMessage  = "Enter a value"
    required       = "true" 
    invalidMessage = "Invalid value."
/>

It works, but it is too wide, and the content is left-justified.

Neither of these lines, added to my INPUT element, appears to make a difference:

width              = "60"
text-align         = "right"

which is a question in and of itself, but that’s OK, I know I should be using CSS instead of HTML. So I add this in the HEAD section:

<style type="text/css">
    .NARROW {width:60px;}
    .RIGHT_JUSTIFIED {text-align:right;}
</style>

and this to the INPUT element:

class              = "NARROW RIGHT_JUSTIFIED"

and that solves the width, but not the text justification.

To solve the text justification, I must instead do this:

<style type="text/css">
    .NARROW {width:60px;}
    input {text-align:right;}
</style>

Specifying the width property in the input style doesn’t work, either.

So that’s my question. Why don’t inline styles work in this case, and why must I use a class selector for width, but an element selector for text-align? And how can I anticipate when which selector will be applicable?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    i tried this code and it seems to work fine

    <html>
<head>
<style type="text/css">

    .width_narrow {width:60px;}
    .align_right {text-align:right;}

</style>
</head>
<body>

<input
    name           = "sample_input"
    type           = "text" 
    class         = "width_narrow align_right" 
    id             = "sample_input"
    value          = "27"
    dojoType       = "dijit.form.NumberTextBox"
    constraints    = "{min:1,max:30,places:0}"
    promptMessage  = "Enter a value"
    required       = "true" 
    invalidMessage = "Invalid value."
/>

</body>  
</html>
    • 0