Styling form validation errors and form input hints

Yii 1.1 General Discussion
1

I’ve got some CSS puzzles to solve. Here’s a sample view, straight out of the “blogs” demo:




<div class="row">

   <?php echo $form->labelEx($model,'author'); ?>

   <?php echo $form->textField($model,'author', array('size'=>60)); ?>

   <p class="hint">Hint: Enter author name</p> 

   <?php echo $form->error($model,'author'); ?>

</div>

Here’s what I’d like to change:

[list=1]

[*]Appearance of error message:

Right now, when the field is invalid, the validation error message appears directly to the right of the text field. Instead, I’d like to the validation error message to appear below the text field, and aligned-left with the text field itself.

[b]

[*]Appearance of the "hint" [/b](similar to above question, but a bit different!):

Right now, when the “hint” appears on its own line, left justified, so that it begins directly beneath the label “Author”. Instead, I’d like the hint to appear below the text field, and aligned-left with the text field itself.

[/list]

This is something that’s easy to accomplish with tables, but I’d much rather do things the right way, with div’s.

Any help appreciated!

Emily

2

Are you sure your question applies to yii?

With divs use float: left or display: inline-block

3

You are indeed so very, very correct. This does the trick:




div.form .errorMessage {

    font-size:10px !important;

    float:left !important;

   margin-left:100px !important;

}

:D

4

Why do you use !important in each rule? If you place these rules in your own css file and attach it after form.css they will be overriden. If not, just add more specifying:


div div.form .errorMessage {

    font-size: 10px;

    float: left;

    margin-left: 100px;

}
5

So true. The !important is not needed. Just an artifact of futzing about trying to get it to work! Thx! :mellow: