Page 1 of 1
cascadeSelect component wrong css at icarus-layout-2.0.1
Posted: 19 Jul 2021, 13:31
by foreli
Hello everyone,
My primefaces version is 10.0.0 and i am using icarus-layout-2.0.1. The cascadeSelect component is new to primefaces 10.0.0 and i guess icarus 2.0.1 does not support it yet. Component inherits no correct skinning from the blue icarus theme and it is almost impossible to see the selectItems. I tried to use the default themes (saga, arya, vela etc) and it works fine, so i guess it is icarus' problem. Is there a way to fix this? Am i missing something?
Thanks in advance
Re: cascadeSelect component wrong css at icarus-layout-2.0.1
Posted: 19 Jul 2021, 19:33
by siris
Hi,
We are planning remaster version of Icarus. We will update the Icarus Template in the next months.
Best Regards,
Re: cascadeSelect component wrong css at icarus-layout-2.0.1
Posted: 20 Jul 2021, 08:07
by foreli
Hi siris,
Is there any possibility to get a fix just for the cascadeSelect skinning? Or any other suggestion to make it work? Client requested this component for production environment and he is using the icarus layout.
Thanks
Re: cascadeSelect component wrong css at icarus-layout-2.0.1
Posted: 22 Jul 2021, 22:56
by siris
Hi,
I can't offer you a workaround for the icarus theme. However, if there is an emergency, you can copy the cascadeselect styles in the theme.css file of the free saga theme and paste them at the end of the theme.css file of the icarus theme you are using. There is no other solution, unfortunately.
Code: Select all
body .ui-cascadeselect {
background: #ffffff;
border: 1px solid #ced4da;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 4px; }
body .ui-cascadeselect:not(.ui-state-disabled):hover {
border-color: #2196F3; }
body .ui-cascadeselect:not(.ui-state-disabled).ui-state-focus {
border-color: #2196F3;
outline: 0 none;
box-shadow: 0 0 0 0.2em #a6d5fa; }
body .ui-cascadeselect .ui-cascadeselect-label {
background: transparent;
border: 0 none;
padding: 0.5rem 0.5rem; }
body .ui-cascadeselect .ui-cascadeselect-label.ui-placeholder {
color: #6c757d; }
body .ui-cascadeselect .ui-cascadeselect-label:enabled:focus {
outline: 0 none;
box-shadow: none; }
body .ui-cascadeselect .ui-cascadeselect-trigger {
background: transparent;
color: #6c757d;
width: 2.357rem;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px; }
body .ui-cascadeselect-panel {
background: #ffffff;
border: 0 none;
border-radius: 4px;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); }
body .ui-cascadeselect-panel .ui-cascadeselect-items {
padding: 0.5rem 0; }
body .ui-cascadeselect-panel .ui-cascadeselect-items .ui-cascadeselect-item {
margin: 0;
border: 0 none;
color: #495057;
background: transparent;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 0; }
body .ui-cascadeselect-panel .ui-cascadeselect-items .ui-cascadeselect-item .ui-cascadeselect-item-content {
padding: 0.5rem 1rem; }
body .ui-cascadeselect-panel .ui-cascadeselect-items .ui-cascadeselect-item .ui-cascadeselect-item-content:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2em #a6d5fa; }
body .ui-cascadeselect-panel .ui-cascadeselect-items .ui-cascadeselect-item.ui-state-highlight {
color: #495057;
background: #E3F2FD; }
body .ui-cascadeselect-panel .ui-cascadeselect-items .ui-cascadeselect-item:not(.ui-state-highlight):not(.ui-state-disabled):hover {
color: #495057;
background: #e9ecef; }
body .ui-cascadeselect-panel .ui-cascadeselect-items .ui-cascadeselect-item .ui-cascadeselect-group-icon {
font-size: 1rem; }
body .ui-input-filled .ui-cascadeselect {
background: #f8f9fa; }
body .ui-input-filled .ui-cascadeselect:not(.ui-state-disabled):hover {
background-color: #f8f9fa; }
body .ui-input-filled .ui-cascadeselect:not(.ui-state-disabled).p-focus {
background-color: #f8f9fa; }
Best Regards,
Re: cascadeSelect component wrong css at icarus-layout-2.0.1
Posted: 23 Jul 2021, 11:50
by foreli
Thanks a lot!
Re: cascadeSelect component wrong css at icarus-layout-2.0.1
Posted: 23 Jul 2021, 22:21
by siris
You are welcome!
Best Regards,