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

How to show ellipses or work wrag on long description in drop down list

9 Answers 1089 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Steven
Top achievements
Rank 1
Steven asked on 15 Jun 2020, 04:45 PM

I tried adding a class to the kendo-dropdownlist but it does not seem to do anything.

.hide-overflow {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 99%;
}

 

<kendo-dropdownlist [class]="'hide-overflow'".... 

 

What is best way to show ellipses or alternately do word wrap?

 

 

 

9 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 17 Jun 2020, 08:52 AM

Hi Steve,

The most straight-forward approach to achieve the desired behavior would be to overwrite the built-in styling of the inner DropDownList element, holding the value text, for example:

https://stackblitz.com/edit/angular-rrxn68?file=app/app.component.ts

Wrapping the longer texts will likely break the layout in an undesirable manner, but is also possible:

https://stackblitz.com/edit/angular-rrxn68-bzcwf8?file=app/app.component.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Steven
Top achievements
Rank 1
answered on 18 Jun 2020, 05:35 PM

 

I took the first approach and added styles to the component,,, but not working,, no effect at all actually...

 

 

 

    styles: [`
    .k-widget.k-dropdown .k-input {
      display: inline-block;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    `],

 

 

and inspect element:

 

.k-dropdown .k-dropdown-wrap .k-input, .k-dropdowntree .k-dropdown-wrap .k-input {
padding: 4px 8px;
width: 100%;
min-width: 0;
height: calc(8px + 1.4285714286em);
box-sizing: border-box;
border: 0;
outline: 0;
color: inherit;
background: none;
font: inherit;
flex: 1;
display: flex;
align-items: center;
overflow: hidden;
text-overflow: ellipsis;
}

0
Dimiter Topalov
Telerik team
answered on 19 Jun 2020, 08:12 AM

Hello Steven,

In order to penetrate the default Angular component styles encapsulation, the ViewEncapsulation should be set to None (like in the examples, linked in my previous response), or the custom styling needs to be provided at a global level:

https://angular.io/guide/component-styles#view-encapsulation

Let me know whether adjusting the ViewEncapsulation yields the desired result on your end too.

Regards,
Dimiter Topalov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Steven
Top achievements
Rank 1
answered on 19 Jun 2020, 01:07 PM

ViewEncapsulation throws errors:

WARNING in ./node_modules/@angular/compiler/src/core.js 10:24-31
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

WARNING in ./node_modules/@angular/compiler/src/selector.js 10:24-31
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

WARNING in ./node_modules/@angular/compiler/src/ml_parser/html_tags.js 10:24-31
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

WARNING in ./node_modules/@angular/compiler/src/ml_parser/tags.js 10:24-31
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
i ï½¢wdmï½£: Compiled with warnings.

 

 

and in the browser

 

Uncaught Error: Cannot find module 'tslib'
    at webpackEmptyContext (src sync:2)
    at core.js:19
    at core.js:10
    at Object../node_modules/@angular/compiler/src/core.js (core.js:16)
    at __webpack_require__ (bootstrap:84)
    at Module../src/app/controls/dropdown.component.ts (dropdown-multiselect.component.ts:18)
    at __webpack_require__ (bootstrap:84)
    at Module../src/app/shared.module.ts (wms.service.ts:246)
    at __webpack_require__ (bootstrap:84)
    at Module../src/app/app.module.ts (app.component.ts:24)

0
Steven
Top achievements
Rank 1
answered on 19 Jun 2020, 01:21 PM

Global setting did not work either.

 

 

The elements are wrapped in bootstrap 3 'input-group' which sets 'display: table' and when I change that to 'display: inline' it fixes the overflow,,, but then the input-group breaks! (the elements drop to the next line).

 

I tried all the permutations on 'display' and none work as needed to fix..

 

 

Any other suggestions?

0
Dimiter Topalov
Telerik team
answered on 23 Jun 2020, 07:12 AM

Hi Steven,

The described error does not seem related to Kendo UI for Angular. The most relevant online result I could find was related to Angular Elements:

https://fluin.io/blog/critical-dependency-cannot-be-statically-extracted

As for the elements being wrapped in a custom or third-party components, this seems something that is a subject to custom configuration and CSS beyond our control too.

I tried to replicate the problem by putting a DropDownList within a Bootstrap input-group, but it still is working as expected after overwriting its styling:

https://stackblitz.com/edit/angular-rrxn68-gdexmu?file=app/app.component.ts

Note that the width of the DropDownList needs to be set such that it does not go to the next line.

You can compare the example above to your implementation, and apply the necessary adjustments. As the issue does not seem related to Kendo UI for Angular, but rather to integration with third-party libraries and CSS, such scenarios are not supported out-of-the-box and custom implementations needed to accomplish them are considered developer effort outside of the scope of our support service. However, we are always doing our best to go the extra mile, and be of assistance whenever possible, so if the issue persists, please send us a similar isolated runnable project or modify the one above to better replicate the scenario, and we will try to provide a solution best suitable to the specific use case. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Steven
Top achievements
Rank 1
answered on 25 Jun 2020, 06:16 PM

*** DELETED AS REQUESTED BY THE AUTHOR ***

0
Dimiter Topalov
Telerik team
answered on 29 Jun 2020, 09:32 AM

Hi Steven,

Thank you for providing the means to observe the discussed problem.

The observed undesired behavior of the DropDownList overflowing from its wrapper seems to be caused by the input-group class that sets the display to table.

When the display of this element is changed to for example inline-flex, and its width is set (for example to 100%), the ellipsis of the inner DropDownList are displayed as expected when there is not enough space for the whole text:

 

I hope this can point you in the right direction, but as the issue seems to be related more to custom/third-party styling, and not as much to the built-in styling and functionality of the DropDownList component, the specific implementation for resolving it is considered a developer effort, and falls outside of the scope of our support service.

I will now delete your last reply as asked in its last sentence.

Regards,
Dimiter Topalov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Steven
Top achievements
Rank 1
answered on 29 Jun 2020, 05:16 PM

got it working with the following global css changes...

except ellipses.. if "white-space: nowrap" is used.. ellipses show,,, but then the control does not align on the right side..

Maybe you can suggest something? Thank you very much for your help!

.k-widget.k-dropdown .k-input {
  display: inline-block;
  white-space: normal;
}
.input-group {
  display: inline-flex;
  width: 100%;
}
.input-group-addon {
  width: unset;
}
.control-label {
  padding-bottom: 2px;
}
.form-control {
  height: 30px;
}

Tags
DropDownList
Asked by
Steven
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Steven
Top achievements
Rank 1
Share this question
or