Hide the tab navigator appearing in dynamic layout
I am using dynamic container on tab group layout which opens dynamic tab. By putting dynamic container, tab navigator icon starts appearing on right corner on tab layout to navigate the tabs.
1) Is there any way to hide this tab navigation arrow?
2) On generated dynamic tab, tab name displays X button on mouse hover on tab name. Can we make X button display always rather than mouse hover?
I have attached screenshots for both points issues. Please suggest.
***Edited by Moderator Marissa to update SR Details***
Accepted Solution
Morgan Stanley
US
Thanks Rachit after including the css in application skin it is not affecting the designer studio tabs behavior. It is working fine for both changes in application.
One more query - the dynamic tab displays case icon then pyID and close(X) button. Can we remove the image icon and add space between pyID, X button on dynamic tab?
Pegasystems Inc.
US
Hi Ram,
I added the below css and could see the X button is coming up permanently and not only on hover.
<style>
.tab-li .iconCloseSmall, .iconCloseSmall:before{
opacity :1 !important;
}
</style>
Will try to check about the other issue.
Regards,
Morgan Stanley
US
Thanks Rachit, this is working in application but it is affecting the designer studio tabs as well. Can we make this change application specific?
Please suggest.
Pegasystems Inc.
US
Can you try to create a CSS file(that contains this code) and include these Application skin and check the behaviour.
Pegasystems Inc.
US
Hi Ram,
You can use the below CSS to hide the tab navigation arrow. But it will be reflected throughout the application which means nowhere in the application you will see the tab navigation arrow. The reason being everything seems to be final here. We cannot apply any custom class where we can apply CSS & the classes/id which is used in navigation arrow is used at multiple places throughout the application.
<style>
ol[title="Currently open"]{
display:none !important;
}
</style>
Hope this answers the thread. Please mark it as answered/helpful in case if it does.
Morgan Stanley
US
Thanks Rachit, this is working in application but it is affecting the designer studio tabs as well. Can we make this change application specific?
Please suggest.
Pegasystems Inc.
US
Can you try to create a CSS file(that contains this code) and include these Application skin and check the behaviour .
Accepted Solution
Morgan Stanley
US
Thanks Rachit after including the css in application skin it is not affecting the designer studio tabs behavior. It is working fine for both changes in application.
One more query - the dynamic tab displays case icon then pyID and close(X) button. Can we remove the image icon and add space between pyID, X button on dynamic tab?
Updated: 16 Oct 2018 12:18 EDT
Pegasystems Inc.
US
Please try with the below local change.
<style>
img[src="images/pyCase.gif"]{
display:none !important;
}
.iconCloseSmall{
margin-left:20px !important;
}
</style>
Here, i have given margin-left:20px; . You can decrease it as per your requirement. Also, this margin will also effect other tabs as well. It will increase width for other tabs as well.
Please let me know in case of any concerns.