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

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

    Posted 25 Jul 2018 Link to this post

    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%;
    }
  2. Neli
    Admin
    Neli avatar
    292 posts

    Posted 27 Jul 2018 Link to this post

    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.
  3. robert
    robert avatar
    25 posts
    Member since:
    May 2009

    Posted 27 Jul 2018 in reply to Neli Link to this post

    Thank you very much Neli, I will give this a try!
  4. robert
    robert avatar
    25 posts
    Member since:
    May 2009

    Posted 28 Jul 2018 in reply to robert Link to this post

    Hi Neli thanks very much for the code it worked great, have a good one!
Back to Top