This is a migrated thread and some comments may be shown as answers.

ListView text alignment error

2 Answers 132 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Shawn
Top achievements
Rank 2
Shawn asked on 20 Oct 2012, 06:08 PM
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

http://jsfiddle.net/7WVqL/170/

And the source is below

<!DOCTYPE html>

<html>

    <head>

        <title></title>

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

        <meta charset="utf-8">

    </head>

    <body>

        <!--  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>

                <li style="height:40px">

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

                </li>

            </ul>

            <!--  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>

                <li style="height:40px">

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

                </li>

            </ul>

        </div>

        <!--  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>

        </div>

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

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

        </script>

        

        <!--  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>

            </header>

            <p>TabStrip</p>

            <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>

                </div>

            </div>

        </div>

        <!--  Styles specific to page -->

        <style scoped>

            .listvalue

            {

                float: left;

                font-size: medium;

                line-height: .5em;

            }

        </style>

    </body>

</html>


2 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 23 Oct 2012, 07:58 AM
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!
0
Shawn
Top achievements
Rank 2
answered on 23 Oct 2012, 01:25 PM
many thanks
Tags
ListView (Mobile)
Asked by
Shawn
Top achievements
Rank 2
Answers by
Kamen Bundev
Telerik team
Shawn
Top achievements
Rank 2
Share this question
or