ListView text alignment error

3 posts, 0 answers
  1. Shawn
    Shawn avatar
    43 posts
    Member since:
    Dec 2011

    Posted 20 Oct 2012 Link to this post

    I am having problems with aligning an input to the left.

    Attached is the code.

    The buttons and other stuff is aligned OK, but for some reason I cannot get the inputs (event and screening) to align to the left.

    I have tired all of the styles but to no avail.

    Here is a jsfiddle link

    And the source is below

    <!DOCTYPE html>




            <meta name="validate" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

            <meta charset="utf-8">



            <!--  Validation Tab Page -->

            <div data-role="view" id="validatetab" data-title="Validate" data-layout="mobile-tabstrip">

                <!--  Venue selection -->

                <ul id="venue" data-role="listview" data-style="inset">

                    <li style="height:40px">

                        <a href="app/venue.html" class="button" id="venue-button" data-role="button" type="button">Select a Venue</a>


                    <li style="height:40px">

                        <input id="venuevalue" type="text" disabled="true" placeholder="Venue"></input>



                <!--  Screening selection -->

                <ul id="screening" data-role="listview" data-style="inset">

                    <li style="height:40px">

                        <a href="app/screening.html" class="button" id="screeninge-button" data-role="button" type="button">Select a Screening</a>


                    <li style="height:40px">

                        <input id="screeningvalue" type="text" disabled="true" placeholder="Screening"></input>




            <!--  Screening Info Tab Page -->

            <div data-role="view" id="infotab" data-title="Information" data-layout="mobile-tabstrip">

                <ul id="infolist" data-role="listview" data-style="inset"></ul>


            <script type="text/x-kendo-template" id="infotemplate">

                <p class="listvalue">#:infoName#</p>



            <!--  Tab Strip -->

            <div data-role="layout" data-id="mobile-tabstrip">

                <header data-role="header">

                    <div data-role="navbar">

                        <a class="nav-button" data-role="backbutton" data-align="left" href="app/logon.html">Logout</a>

                        <span data-role="view-title"></span>

                        <a data-role="button" type="button" data-align="right" data-icon="about" href="app/about.html"></a>




                <div data-role="footer">

                    <div data-role="tabstrip" id="tabstrip">

                        <a href="#validatetab" data-icon="toprated">Validate</a>

                        <a href="#infotab" data-icon="info">Information</a>




            <!--  Styles specific to page -->

            <style scoped>



                    float: left;

                    font-size: medium;

                    line-height: .5em;





  2. Kamen Bundev
    Kamen Bundev avatar
    1532 posts

    Posted 23 Oct 2012 Link to this post

    Hi Shawn,

    The specificity of the input positioning in Kendo UI Mobile is slightly higher due to all the :not() selectors that are used to avoid clashes with other elements (a glaring omission in CSS spec - :not() shouldn't have specificity). So, if you add an ID to the body and use it to boost the specificity of the selector, it will work (or you can just use !important). I updated the jsFiddle below:

    Kind regards,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Shawn
    Shawn avatar
    43 posts
    Member since:
    Dec 2011

    Posted 23 Oct 2012 Link to this post

    many thanks
Back to Top