SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Alignment-issues w Error beside Text-Area

    On one of my Forms, I have a field represented with a Text-Area control.

    When there is a data-entry issue, I display an Error to the right of this field.

    The problem is that it appears to be bottom-aligned, and so it looks awkward.

    Here is a screen-shot of this issue...

    Attachment 63414


    And here is my code...
    PHP Code:
        <label class="recipients" for="pmTo">To:</label>
        <!-- Sticky Field -->
        <?php
            
    echo '<textarea id="pmTo" name="pmTo" cols="33" rows="2">';
            echo (isset(
    $pmTo) ? str2htmlentities($pmTo) : '');
            echo 
    "</textarea>";

            if (!empty(
    $errors['pmTo'])){
                echo 
    '<span class="error">' $errors['pmTo'] . '</span>';
            }
        
    ?>
    Code CSS:
    /* Form Errors. */
    .error{
    	display: inline;
    	font-size: 0.8em;
    	font-weight: 500;
    	color: #F00;
    }


    Ideally, I would like the Error-Message to be Top-Aligned and adjust to the size of the Text-Area control if the User resizes things.

    Is that possible?

    Sincerely,


    Debbie

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Sigh. You've posted PHP in the CSS forum again. Would you like this thread moved to the PHP forum? CSS can't apply to PHP code, as we've mentioned before.

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Sigh. You've posted PHP in the CSS forum again. Would you like this thread moved to the PHP forum? CSS can't apply to PHP code, as we've mentioned before.
    Larger sigh.

    I guess you didn't look at my *tiny* code snippet, because if you did you'd see my PHP is simply echoing HTML...

    And since the problem I described pertains to HTML and CSS, this sure seems like a good place to be!

    Sincerely,


    Debbie

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Have you tried:
    Code:
    .error{vertical-align:top}
    It's hard to guess without the CSS for those existing elements but vertical-align controls the alignment of inline elements on the same line.

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    It's hard to guess without the CSS for those existing elements but vertical-align controls the alignment of inline elements on the same line.
    But I posted the CSS in my OP...


    Debbie

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    I guess you didn't look at my *tiny* code snippet
    You aren't very good at guessing. I guess your misconception is that we'll just visually pick through the irrelevant PHP, see the HTML, mentally add some content to it, guess at the other CSS that might apply, and then just be able to write out the necessary CSS for this situation. No. In most cases, we'll paste the HTML into a .html file, try some CSS, test it a few times until we've found the best solution, then post the solution.

    By posting the preprocessed code, you force us either to guess at the output HTML, or at least reconstruct it by stripping out all the PHP. Don't make it harder than necessary for people to help you out.

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You aren't very good at guessing. I guess your misconception is that we'll just visually pick through the irrelevant PHP, see the HTML, mentally add some content to it, guess at the other CSS that might apply, and then just be able to write out the necessary CSS for this situation. No. In most cases, we'll paste the HTML into a .html file, try some CSS, test it a few times until we've found the best solution, then post the solution.
    Ralph,

    Gee, sorry.

    Since it was only a few lines of PHP, I figured it was obvious to others what the HTML output would be...



    Quote Originally Posted by ralph.m View Post
    By posting the preprocessed code, you force us either to guess at the output HTML, or at least reconstruct it by stripping out all the PHP. Don't make it harder than necessary for people to help you out.
    Sorry.

    It's easy for me to look at code much more complex than that and just see the HTML.

    My bad!!


    Here from the source...

    HTML Code:
    <!-- PM To -->
    <label class="recipients" for="pmTo">To:</label>
    <!-- Sticky Field -->
    <textarea id="pmTo" name="pmTo" cols="33" rows="2">a;b;c;d;e;f</textarea><span class="error">No more than 5 Recipients per Message.</span>

    Code CSS:
    .error{
    	display: inline;
    	font-size: 0.8em;
    	font-weight: 500;
    	color: #F00;
    }


    Paul, I didn't try top alignment, because when I go into FireBug I see this...

    (screen-shot)
    Attachment 63416


    Based on looking at that, it seems like I need to do some magic to make the container of my <span> match the height of the TextArea which can be changed at any moment by the end user...

    I was also wondering if maybe my choice of...
    Code CSS:
    	display: inline;

    ...was a bad idea??

    Sincerely,


    Debbie

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    I didn't try top alignment
    It seems to do what you want, though. Here's what we have so far:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <style media="all">
    
    .error{
    	display: inline;
    	font-size: 0.8em;
    	font-weight: 500;
    	color: #F00;
    }
    
    .error{vertical-align:top}
    
    </style>
    </head>
    <body>
    
    <label class="recipients" for="pmTo">To:</label>
    <!-- Sticky Field -->
    <textarea id="pmTo" name="pmTo" cols="33" rows="2">a;b;c;d;e;f</textarea><span class="error">No more than 5 Recipients per Message.</span>
    
    </body>
    </html>
    This is a more useful way to present a CSS issue. If you run that code, you see we don't have the full picture, but you can see the effect of the vertical align.

  9. #9
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    It seems to do what you want, though.
    As usual, you and Paul make difficult things look easy!!

    I tried Paul's suggestion after my last response, and it seems to work. (Although I'm still confused what I was seeing in FireBug and the screenshot that I posted above...)

    Why did adding that one line changes this from this...
    Attachment 63417

    To this afterwards...
    Attachment 63418

    (I would expect to see the vertical alignment *inside* the blue containing box in FireBug to change, versus the entire blue containing box moving to the top of the TextArea to its left...)

    Anyways, thanks to both of you!!

    Sincerely,


    Debbie

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi Debbie,

    Quote Originally Posted by DoubleDee View Post
    But I posted the CSS in my OP...
    Debbie
    You posted the CSS for .error but that doesn't tell me what css has been applied to the label or the textarea.

    If your textarea has been set to display:block or float then the code I gave you will not work because vertical-align only applies to inline segments on the same line and not to block or floated boxes. That's why we usually like to see all the css applied to the elements in front of us. It's just that whatever method you use depends on what behaviour the elements already have applied as you can never treat one element in isolation as it is affected by what comes before and indeed sometimes by what follows.

    Default alignment for inline elements is usually baseline which is why the text sits at the bottom of the textarea. Changing the alignment to top will align the top edges of the line boxes as you wanted.

  11. #11
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You posted the CSS for .error but that doesn't tell me what css has been applied to the label or the textarea.

    If your textarea has been set to display:block or float then the code I gave you will not work because vertical-align only applies to inline segments on the same line and not to block or floated boxes. That's why we usually like to see all the css applied to the elements in front of us. It's just that whatever method you use depends on what behaviour the elements already have applied as you can never treat one element in isolation as it is affected by what comes before and indeed sometimes by what follows.
    Sorry about that.


    Quote Originally Posted by Paul O'B View Post
    Default alignment for inline elements is usually baseline which is why the text sits at the bottom of the textarea. Changing the alignment to top will align the top edges of the line boxes as you wanted.
    Okay.


    Debbie

  12. #12
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    I was also wondering if maybe my choice of... display: inline; ...was a bad idea??
    A <span> is an inline element by default, then it's not needed to give a span a {display: inline;}: superfluous but not harmful (unless somewhere else in the css the display of the span's in general is set in another way, what is not such a good idea).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •