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

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

2 Answers 242 Views
DateInput
This is a migrated thread and some comments may be shown as answers.
robert
Top achievements
Rank 1
robert asked on 14 Aug 2018, 05:16 PM

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 Answers, 1 is accepted

Sort by
0
Attila Antal
Telerik team
answered on 16 Aug 2018, 11:30 AM
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.
0
robert
Top achievements
Rank 1
answered on 16 Aug 2018, 03:10 PM

great thanks Attila will give this a try!

Tags
DateInput
Asked by
robert
Top achievements
Rank 1
Answers by
Attila Antal
Telerik team
robert
Top achievements
Rank 1
Share this question
or