CODEWITHSUNDEEP
htmlcss
user3652541
user3652541

Reputation: 83

Styles using CSS issue

I want my comments input text box to be bigger than other fields in the form. I have got the following code in my add form:

<div class="divm centerdiv">
<?php echo $this->Form->create('Call'); ?>
    <fieldset>
        <legend><?php echo __('Add Call Details'); ?></legend>
            <?php

        echo $this->Form->input('call_date',array('required'=>false,'id'=>'datepicker','type'=>'text'));
        echo $this->Form->input('call_time', array('required'=>false));
        echo $this->Form->input('comments', array('required'=>false, 'id'=> 'comments'));
        echo $this->Form->input('next_call_date',array('required'=>false,'id'=>'datepicker2','type'=>'text'));
        echo $this->Form->input('customers_id', array('label' =>'Customer Name','options'=>$customers, 'label'=>'Customer Name', 'required'=>false));
        echo $this->Form->input('employees_id', array('label' =>'Employee name','options'=>$employees, 'label'=>'Employee name', 'required'=>false));

    ?>
    </fieldset>

<?php echo $this->Form->end(__('Submit')); ?>
</div>

I have added an ID for the comments and my style sheet as follows:

//some code
.divm
{
    width: 50%;

}
.centerdiv
{
    margin: 50px auto;

}
divm.comments{
    height: 20px;
    width: 20px;
}

//some code

I want to change the size of the text box of comments to a bigger size than the other fields. I have tried to do this by adding the "divm.comments{}" parts in the style sheet adn it doesn't seem to work.Can someone help?

Upvotes: 1

Views: 40

Answers (2)

user3559349
user3559349

Reputation:

You are using the wrong (in this case invalid) selector. It should just be

#comments {
  height: 20px;
}

For information, the syntax you used to trying to select an element with a tag name of divm (no such thing) that has a class name = comments

What you may have been thinking is select input with id = comments inside div with class = divm in which case it should have been .divm #comments (note the space) however it always more performant to select elements with id (they - or at least should be - unique)

Upvotes: 1

nettux
nettux

Reputation: 5406

You can use # for element IDs. . is for classes. Your new style sheet would be as follows:

.divm
{ 
     width: 50%;

} 
.centerdiv
{ 
    margin: 50px auto;

}
#comments
{
    height: 20px;
    width: 20px;
}

Note: IDs must pertain to only one element so if you want to have multiple comments fields your original css would be correct (apart from the missing . before divm.comments) but you'd have to set comments as the class in php.

Upvotes: 0

Related Questions