This topic contains 3 replies, has 3 voices, and was last updated by Jai Jai 2 months, 4 weeks ago.

Creative Portlet text title box is broke


  • riterix
    Participant

    Posts: 29
    Member Reply #17597

    Hi Keentheme,

    I found my self in a situation where I have to use a Creative Portlets, but ran into issues. I wantes to extend the portlet title box, in order for the text ot fit inside. but with no luck.

    I want to achieve this :
    https://ibb.co/jWw65d

    Here’s my html file :
    https://nofile.io/f/fScT45eEgfv/vehicule-form.html

    If the file wont donload, or lik expired here the second Creative portlet html source :

    —————————————————————- Source start—

    
    <!--begin::Portlet-->
    <div class="m-portlet m-portlet--creative m-portlet--bordered-semi m-portlet--rounded">
    <div class="m-portlet__head">
    <div class="m-portlet__head-caption">
    <div class="m-portlet__head-title">
    <span class="m-portlet__head-icon m--hide">
    <i class="flaticon-statistics"></i>
    </span>
    <h3 class="m-portlet__head-text">
    Expired
    </h3>
    <h2 class="m-portlet__head-label m-portlet__head-label--primary">
    <span><i class="flaticon-statistics"></i>
    Contrôle Technique
    </span>
    </h2>
    </div>
    </div>
    <div class="m-portlet__head-tools">
    <ul class="m-portlet__nav">
    <li class="m-portlet__nav-item">
    
    <i class="la la-cloud-upload"></i>
    
    
    <li class="m-portlet__nav-item">
    
    <i class="la la-cog"></i>
    
    
    <li class="m-portlet__nav-item">
    
    <i class="la la-share-alt-square"></i>
    
    
    
    </div>
    </div>
    <div class="m-portlet__body">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.
    </div>
    </div>
    <!--end::Portlet-->
    
    

    ————————————————————— End source—–

    Is there a way to extend that box, I know that there a option tag or a span class to do that.

    For the .html file that I gave you, execute it inside the default Metronic html root folder, where index.html is to have an idea about the html result.

    Thankyou Keenthemes

    Attachments:
    You must be logged in to view attached files.
    Sean
    Sean
    Keymaster

    Posts: 4522
    Support Staff Reply #17632

    Hi,

    The creative portlet title is absolute positioned and it can not auto adjust its width according to the text lenght. If you have to use longer text you can use one of the following workarounds:

    1) Set fixed width to the title style=”width: 200px”

    2) Or set style=”white-space: nowrap;” to the title to avoid the text line break.

    Thanks.


    riterix
    Participant

    Posts: 29
    Member Reply #17637

    Thank’s Sean, I got an answer from Keenthemes comments section on themeforest.net. And it’s working like a charm, I did chose the second solution, the first one didn’t work.

     

    Thank you

    Jai
    Jai
    Keymaster

    Posts: 2627
    Support Staff Reply #17660

    Thanks @riterix. All the best for your projects 🙂

You must be logged in to reply to this topic.