Dimension Filter - Dynamic popup size?

Question

Hi,
I have a small problem.
One of my dimension filters have a hierarchy dimension assigned. Depending on the expansion of the preferred hierarchy selection, the user cannot see the whole text.
I know that I can change the size of the Dimension Filter with the settings Popup Width and Popup Height, but is it somehow possible to change the size dynamically depending on the expansion of the hierarchy?
Br
Max Rosén

Answer 1

Hi Max,
As far as I know there is really no such setting in Design Studio that would enable that.
There is also no way how to achieve this with the available scripting methods, if there would be something it would be in theory something like this:
In the OnChange Event of the table cell width where the hierarchy is or based upon the expand level state of the hierarchy in the filterpanel, adjust the width of the filterpanel and the width of the table cell where the hierarchy is.
There should be a solution to do this via javascript, but for that you would need to use the sdk to include some custom javascript code into your bi app.
Normally your requirement can be achieved with/through css, there is a method/way that causes the width of the parent container to expand/adjust automatically when the width of the child element changes. But the problem/difficulty here is, that the filterpanel is created with a lot of absolutely positioned divs (containers) here and there and thus several stacking contexts are created and thus a change in one stacking context has no effect on an element which is in a different stacking context - a change in the width of the table cells where the hierarchy is placed has no effect on some other higher/previously positioned parent container elements because they are in different stacking contexts and when a container's width isn't adjusted too, the inner child element has no way to expand and still be/remain visually nice as a whole.
Anyway, so far I didn't help you much, so here is something you could use to make the text visible/readable without expanding the width:
/* Make Long Text (in Hierarchy) in Dimension Filter Visible (Break Into a New Line) */
#sap-ui-static .sapzenfilterpanel-PopupContainerDialog div.sapUiTableCnt div.sapUiTableCCnt table.sapUiTableCtrl tr.sapUiTableTr > td:nth-child(1),
#sap-ui-static .sapzenfilterpanel-PopupContainerDialog div.sapUiTableCnt div.sapUiTableCCnt table.sapUiTableCtrl tr.sapUiTableTr > td:nth-child(1) span.sapzenfilterpanel-SelectionTableText {
  white-space: normal;
  /* Optional setting: break to newline anywhere in a word */
  /*word-wrap: break-word;*/
(Note: you can simplify/adjust the selectors, this is not the only way how the selectors must look like, it is just an example, but working example...)
A side note when using the setting: "Member Display: Text and Key"
The Dimension filter has 3 columns: 1. Text , 2. Key , 3. Check(boxes)
where the first 2 columns for text and key are the same width. But usually the key is shorter than the text and doesn't need so much space, so you could adjust the width proportions of these first 2 columns so that the text has more width than the column containing the keys:
/* Make Text Column Wider and Key Column Narrower */
div.sapUiTableCnt div.sapUiTableColHdrCnt div.sapUiTableColHdr > div:nth-child(1) {width: 207px !important; /* Default Popup width: 350px > 147px , 147+60=207 */}
div.sapUiTableCnt div.sapUiTableColHdrCnt div.sapUiTableColHdr > div:nth-child(2) {width: 87px !important; /* Default Popup width: 350px > 147px , 147-60=87 */}
div.sapUiTableCnt div.sapUiTableCCnt table.sapUiTableCtrl tr.sapUiTableCtrlCol > th:nth-child(1) {width: 207px !important; /* Default Popup width: 350px > 147px , 147+60=207 */}
div.sapUiTableCnt div.sapUiTableCCnt table.sapUiTableCtrl tr.sapUiTableCtrlCol > th:nth-child(2) {width: 87px !important; /* Default Popup width: 350px > 147px , 147-60=87 */}
Regards
David