How can I anticipate which type of CSS selector will work?

StackOverflow https://stackoverflow.com/questions/1015341

  •  06-07-2019
  •  | 
  •  

Question

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?

Was it helpful?

Solution

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>

OTHER TIPS

You have a typo in your class selector.

RIGHT_JUSTIFIED and RIGHT-JUSTIFIED will not match

If a selector isn't working, there are a couple quick tests you can do to isolate the problem.

First, I try trying a more specific selector to see if a selector in a different part of the CSS is overriding your styles. For example,

body #problem { ... }

is more specific than

#problem { ... }

You can also add the !important property, which gives the property precedence over [nearly] all other properties, no matter how much more specific they are:

#problem { width:60px !important; }

If neither of those works, there's either a deeper issue, or a sneaky typo. At this stage, completely isolating the section of HTML and CSS (as you've done in the answer above) is the most effective, but also more time consuming.

Use FireBug to see if there is a more specific selector overriding .RIGHT_JUSTIFIED.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top