? How to see text in a textbox that is too wide for the textbox width, using one's cursor or other ways

3 posts, 0 answers
  1. robert
    robert avatar
    25 posts
    Member since:
    May 2009

    Posted 14 Aug 2018 Link to this post

    Hello, I'm wondering if there is a CSS attribute that will allow one to put the cursor on the textbox and navigate to the end of the text, so one can see the whole text value?

    I tried the text-overflow: ellipisis below, but that didn't seem to take and i've attached a zip file with a snap shot of the textboxes, so any pointers would be greatly appreciated! thank you!

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

        <div class="bip-container">
            <table class="bip-table" cellpadding="0" cellspacing="0">
    ……………………………………………
    ……………………………………………………….
    ……………………………………………………………………………
                    <td width="9%" class="lbl-text">Last Name:</td>
                    <td width="16%">
                        <input class="k-textbox.large" type="text"         disabled="disabled" style="width:100%" data-bind="value: bipVm.lastName" />
                    </td>

                    <td width="9%" class="lbl-text">First Name:</td>
                    <td width="16%">
                        <input class="k-textbox.large" type="text"         disabled="disabled" style="width:100%" data-bind="value: bipVm.firstName" />
                    </td>
    ………………………..……………………………………………
    ……………………………………………………….….
    ……………………………………

    <style>
        [class~="k-textbox.large"]
        {
            width: 300px;
            border: none;
            font-family: 'Segoe UI', Tahoma, Verdana, sans-serif;
            font-size: 11px;

            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

    </style>

     locdir


  2.
  3. Attila Antal
    Admin
    Attila Antal avatar
    350 posts

    Posted 16 Aug 2018 Link to this post

    Hi Robert,

    If my understanding is correct, you would like to put a cursor on a disabled textbox and navigate till the end of the text by using the left / right arrow keys of the keyboard? By design the only way you could put a curson on an input element, if it is enabled. (see the following Dojo Sample for different textboxes).

    If you want to enable a textbox by clicking on it, you could use the readonly property of the input, and then subscribe it to the focus and focusout events which can be used to toggle the readonly property. (see Dojo Sample). 
    <input class="k-textbox readonly" type="text" value='"Lorem ipsum dolor sit amet, consectetur adipiscing elit..."' readonly />

    <script>
       $('.k-textbox.readonly').on('focus focusout', function(e){
        e.target.readOnly = !e.target.readOnly;
      });
    </script>

    Kind regards,
    Attila Antal
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. robert
    robert avatar
    25 posts
    Member since:
    May 2009

    Posted 16 Aug 2018 in reply to Attila Antal Link to this post

    great thanks Attila will give this a try!

Back to Top