Element size in Percentage

2 posts, 0 answers
  1. Manuel
    Manuel avatar
    1 posts
    Member since:
    Nov 2015

    Posted 25 Nov 2015 Link to this post

    Hello,

     I want to set the size of a div within my View to a certain percentage value via css. However, while this works in the Android-Simulator, on a device the height always resets to 0, so nothing is visible within the View-Element.

    My Code:

    CSS

    #logo{
        top:2%;
        position: absolute;
        width:100%;
        height:height: 38%;
        background-image: url("../media/img/logo.png");
        background-size:contain;
        background-position: 50% 50%;
        background-repeat: no-repeat;
    }
    #imageText{
        position: absolute;
        top:45%;
        left:3%;
        width:94%;
        height: 55%;
        text-align: center;
        font-size: 24pt;
        color:white;
        overflow: auto;
    }

    HTML:

     <div data-role="view" data-title="Home" data-layout="main" data-model="APP.models.home">
        <div id="logo"></div>
        <div id="imageText" data-bind="text:text"></div>
    </div>

  2. Tsvetina
    Admin
    Tsvetina avatar
    1876 posts

    Posted 30 Nov 2015 Link to this post

    Hello Manuel,

    This happens because there isn't a parent element to your element that has a fixed size. Height can be set in percentage only when there is a parent element with fixed size in the DOM. You can consider using a flexbox layout to arrange the elements in your view:
    A Complete Guide to Flexbox

    Regards,
    Tsvetina
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
Back to Top