Jump to content
iwato

Text Misalignment in a Flexbox Item

Recommended Posts

BACKGROUND:  Recently I designed a filler page that is called with AJAX.  When the AJAX call is made a css style sheet is called in addition to the filler.  For the most part the style-sheet appears to work.  Even the styling for the flex-box that is included in the filler works in part.  Simply, it appears to be breaking on inheritance, and I do not know how to override it.

The HTML

<div id='yp_container'>
    <div class='yp_item'>
        <div class='yp_param'>Visitor ID:</div>
        <div id='current_visitorId' class='yp_value'></div>
    </div><!-- end div.line_item -->
    <div class='yp_item'>
        <div class='yp_param'>IP Address:</div>
        <div id='current_visitIp' class='yp_value'></div>
    </div><!-- end div.line_item -->
    <div class='yp_item'>
        <div class='yp_param'>Total Visits:</div>
        <div id='current_totalVisits' class='yp_value'></div>
    </div><!-- end div.line_item -->
    <div class='yp_item'>
        <div class='yp_param'>City:</div>
        <div id='current_cities' class='yp_value'></div>
    </div><!-- end div.line_item -->
    <div class='yp_item'>
        <div class='yp_param'>Referral URL:</div>
        <div id='current_referral_url' class='yp_value'></div>
    </div><!-- end div.line_item -->
</div><!-- end div#yp_container -->

CSS Style-Sheet (Relevant Code Only)

/***************************************************
Visitor Info (Flexbox)
***************************************************/
#yp_container {
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	width:100%;
}

.yp_item {
	display: -webkit-flex;
	display: flex;
	flex-direction: row;
	justiy-content: space-between;
}

.yp_param { 
	text-align: -webkit-right;
	text-align: -moz-right;
	padding-right: 2em;
}

.yp_value { 
	text-align: -webkit-left;
	text-align: -moz-left;
}

 

You may observe the result by clicking on the words Your Profile under the sub-heading User Profile in the Grammar Captive navigation bar.

Roddy

Share this post


Link to post
Share on other sites

This problem has been resolved with the realization that I was viewing flexbox in MacOS 10.7.5 Firefox and Chrome environments.  Fortunately, I made good use of my frustration and made the CSS code more robust by "overspecifying" the various flex-items.

I do have another question about CSS, but unrelated to this one that I will post in a different entry.

Roddy

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...