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

k-textbox truncating characters, tried css options to no avail

3 Answers 272 Views
Window
This is a migrated thread and some comments may be shown as answers.
robert
Top achievements
Rank 1
robert asked on 25 Jul 2018, 02:28 PM
Hello, i've tried the various css changes i've listed further below to try an get the more of the text values to show in a read only textbox and there appears to be plenty of space left, but its not being used by the textbox, please see attachement for the screen shot, so is there a way to make the textbox show about 30% more of the value on the screen, thanks very much!

 

 <td width="9%" class="lbl-text">Position:</td>
                <td width="16%">
                    <input class="k-textbox.large" type="text" disabled="disabled" style="border:none" data-bind="value:
                     bipVm.positionEmp" />
                </td>
                 
                <td width="9%" class="lbl-text">Description:</td>
                <td width="16%">
                    <input class="k-textbox.large" type="text" disabled="disabled" style="border:none" data-bind="value:
                     bipVm.description" />
                </td>
                 
                <td width="9%" class="lbl-text">Division:</td>
                <td width="16%">
                    <input class="k-textbox.large" type="text" disabled="disabled" style="border:none" data-bind="value:
                     bipVm.divisionNameEmp" />
                </td>
                 
                <td width="9%" class="lbl-text">Agency:</td>
                <td width="16%">
                    <input class="k-textbox.large" type="text" disabled="disabled" style="border:none" data-bind="value:
                     bipVm.agencyNameEmp" />
                </td>
 
 
/*.k-textbox,*/
 
.k-textbox {
overflow: hidden;
white-space: nowrap;
}
.k-textbox.medium{
    width: 200px !important;
}
.k-textbox .large {
    width: 320px !important;
}
.wide-full {
    width: 100%;
}

3 Answers, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 27 Jul 2018, 10:46 AM
Hi Robert,

As the Window is marked as a product of this thread, I guess that the textboxes are nested in Window. For this reason I have prepared a Dojo example which contains a Window. I used the provided snippet for the content of the Window. As the class of the textboxes contains '.' the following selector could be used: [class~="k-textbox.large"] for styling the textboxes. Selecting a class containing '.' is discussed in the following thread in StackOverflow
Here is a Dojo example, where the width of the textboxes is set to 300px. Also I added a red border, just for testing purpose.
I hope this helps.

Regards,
Neli
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 27 Jul 2018, 05:35 PM
Thank you very much Neli, I will give this a try!
0
robert
Top achievements
Rank 1
answered on 28 Jul 2018, 01:54 PM
Hi Neli thanks very much for the code it worked great, have a good one!
Tags
Window
Asked by
robert
Top achievements
Rank 1
Answers by
Neli
Telerik team
robert
Top achievements
Rank 1
Share this question
or