CODEWITHSUNDEEP
cssyii
user2218845
user2218845

Reputation: 1121

Additional space in div using Yii widgets

There is the following PHP code:

<div class="row">
<div class="captcha">
<? $this->widget('CCaptcha', array('showRefreshButton'=>false)); ?>
</div><?php echo $form->textField($model, 'verifyCode', array('class'=>'resume-form-input')); ?>
<?php echo CHtml::submitButton('Done', array('class'=>'button-style')); ?>
</div>

As you can see, this "row" contains captcha widget, text field, submit button. But this code looks bad. If I format it in the following way:

<div class="row">
<div class="captcha">
<? $this->widget('CCaptcha', array('showRefreshButton'=>false)); ?>
</div>
<?php echo $form->textField($model, 'verifyCode', array('class'=>'resume-form-input')); ?>
<?php echo CHtml::submitButton('Done', array('class'=>'button-style')); ?>
</div>

I've got one additional space before text field. What's a problem?

Upvotes: 0

Views: 681

Answers (1)

Linus Caldwell
Linus Caldwell

Reputation: 11058

Without seeing the rendered output, I'd guess because input per default behave similar to display: inline or inline-block elements. That means that whitespaces like line breaks are rendered. Wrap it inside another <div/>:

<div class="row">
    <div class="captcha">
        <? $this->widget('CCaptcha', array('showRefreshButton'=>false)); ?>
    </div>
    <div>
        <?php echo $form->textField($model, 'verifyCode', array('class'=>'resume-form-input')); ?>
        <?php echo CHtml::submitButton('Done', array('class'=>'button-style')); ?>
    </div>
</div>

Without knowing how you want this to be displayed, it's hard to say, but it sounds like you would want to apply float: left to both inner <div/>s or at least the div.captcha:

.captcha {
    float: left;
}

Here is a demo. (I assume the rendered code looks something like that)

If you also want to get rid of the space between the text field and the button, give them a float: left too like in this Fiddle.

Upvotes: 1

Related Questions