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

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

DateInput

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

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

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.