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.
Post Reply
foreli
Posts: 3
Joined: 19 Jul 2021, 12:09

19 Jul 2021, 13:31

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

siris
Posts: 322
Joined: 29 Jul 2019, 13:57

19 Jul 2021, 19:33

Hi,

We are planning remaster version of Icarus. We will update the Icarus Template in the next months.

Best Regards,

foreli
Posts: 3
Joined: 19 Jul 2021, 12:09

20 Jul 2021, 08:07

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

siris
Posts: 322
Joined: 29 Jul 2019, 13:57

22 Jul 2021, 22:56

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,

foreli
Posts: 3
Joined: 19 Jul 2021, 12:09

23 Jul 2021, 11:50

Thanks a lot!

siris
Posts: 322
Joined: 29 Jul 2019, 13:57

23 Jul 2021, 22:21

You are welcome!

Best Regards,

Post Reply

Return to “Icarus”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests