Line height issue

[mark-buhagiar]

Hiya, lines seem to be overlapping in the example. I've had the same thing happen to me :( Any help?

My code (i am using bootstrap)

<div class="col-xs-10 col-xs-offset-1 col-md-4 col-md-offset-4">
            <button class="col-xs-12 object-button"><span data-fittext >Create Object</span></button>                       
        </div>

I would also prefer to not have a span inside the button, but not having the span there didn't work at all.

<div class="col-xs-10 col-xs-offset-1 col-md-4 col-md-offset-4">
            <button data-fittext class="col-xs-12 object-button">Create Object</button>                     
        </div>

Relevant CSS

.object-button{
    height: 150px;
}

.other-object-button,
.object-button{
    /*font-size: 2vw;*/
    font-weight: 300;
    text-align: center;
    color: #ffffff;
    background-color: #1b39a8;
    border: 0px ;
    width:100%;
    display:inline-block;   
    /*border: 2px solid #0F358B;*/
}

[patrickmarabeas]

Check the line-height being applied to the element. The demo is using 0.5em for that example. I have not tried this in the context of a button. If you could make a working demo showing your issue in http://codepen.io/ I'd be happy to assist further.

[mark-buhagiar]

Thanks for getting back to me. Since then, i've navigated away from buttons (this project is something i'm doing for fun so i'm just experimenting). This codepen explains my new issue. Pen Note, how object.tags (desc1,desc2) are scaling, but everything else (ex. obj and create object) aren't. In fact, in my project, not even the object.tags scale! I'm sure i'm doing something wrong, but i can't put my finger on it. Any help would be greatly appreciated. Thanks

[patrickmarabeas]

You are setting the width of the element (text) to 100%, i.e. the result is correct as far as FitText is concerned.

.mgp-button-create,
.mgp-button-title{
     ...
     width: 100%; /* remove this OR use fittext on a child element */
     ...
}

[mark-buhagiar]

You sir, are obviously very right! Thanks for that. However, and I apologize if this is another snafu on my behalf, but either removing the width, or adding fittext in a child element, resulted in a height issue, and the top and bottom parts of the text are being truncated. Would you be kind enough to point me in the right direction again? Thanks.

[patrickmarabeas]

overflow: hidden; is doing the cropping.

In terms of setting heights, line-heights, etc for elements - use em as it needs to be relational to the dynamic font size.

[jpyams]

@patrickmarabeas I'm experiencing the line-height issue @delta25 first had; which element were you referring to when you recommended checking the line-height on the element? I tried adjusting the line-height attribute on my text, but ng-FitText is setting its own line-height directly.

If you could direct me to that demo you mentioned, that would be great, too!