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
cascadeSelect component wrong css at icarus-layout-2.0.1
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
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.
Best Regards,
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; }
-
- Information
-
Who is online
Users browsing this forum: No registered users and 1 guest