Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Line-height as custom property not adding "px" to value #64

Closed
jamesmosier opened this issue Apr 10, 2015 · 1 comment
Closed

Line-height as custom property not adding "px" to value #64

jamesmosier opened this issue Apr 10, 2015 · 1 comment

Comments

@jamesmosier
Copy link

Note: After I finished writing the post below, I remembered that line-height is not always neccassarily a px value. It could be a multitude of different values. Either way, I'll still ask the question why is the px missing from a custom property of line-height and whether or not the plugin knows this. I searched the code for the word line-height and didn't find it, so I'm guessing it does not explicitly know to add px or not to line-height.


I saw there were a few other line-height related issues that were opened/closed, but none of them answered my question specifically, although they eluded to it. Anyway, when using line-height as my custom option in the plugin, it does not apply px to the inline style. My code looks like this:

$('.product-tile').matchHeight();

$.fn.matchHeight._afterUpdate = function(event, groups) {       
    $('.product-tile').matchHeight({
        property: 'line-height'
    });
}

What I'm trying to do is set both the height and line-height of a div. My div ends up looking like this <div class="product-tile" style="height: 200px; line-height: 200"></div>.

Is this a limitation of the plugin? Or a possible bug? I saw a workaround in another issue is to just manually loop through the items and apply the property to them with jQuery's .css() method. This way is of course valid, I just wasn't sure if there was a limitation or bug in particular that prevents line-height from working.

For now I am doing this hack in the plugin code, around line 251:

if (opts.property == 'line-height') {
    $that.css(opts.property, (targetHeight - verticalPadding) + 'px');
} else {
    $that.css(opts.property, targetHeight - verticalPadding);
}
@jamesmosier jamesmosier changed the title Line-height as custom property not working Line-height as custom property not adding "px" to value Apr 10, 2015
@liabru
Copy link
Owner

liabru commented Apr 14, 2015

I need to test a little more, but I think you are right. My guess is that since the unit is not specified, jQuery will fallback to a default unit which for 'line-height' seems to be unit-less.

As a side note, if you're looking to do vertical alignment then check out issue #53.
I think I'll try get this one fixed either way though.

@liabru liabru closed this as completed in d8cc365 May 14, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants