Need to move icon from right to left in portal

suuriyas — Tue, 26 Aug 2025 09:58:04 GMT

HI Community,

I have a requirement, in portal at bottom right we have an icon's (as show in screenshot) where two are overlapping i need to move the pink one happy signal icon from right to left side of the page.

Please let me know where i need to modify

How can we do that.

Thanks in advance

Re: Need to move icon from right to left in portal

Ankur Bawiskar — Tue, 26 Aug 2025 10:11:35 GMT

@suuriyas

the top one is Virtual Agent one.

what's the bottom one?

Seems like it's a customized one.

Did you check the page css and try adjusting it?

If my response helped please mark it correct and close the thread so that it benefits future readers.

Re: Need to move icon from right to left in portal

suuriyas — Tue, 26 Aug 2025 12:30:05 GMT

HI @Ankur Bawiskar ,

Yes its a customised one.

The pink one is happy signal that's the one i wanted to move it to left side of the page and i checked the css of the widget.

* Animation variables */

$transition-base-time: 300ms;

$half: calc(#{$transition-base-time / 2});

$quarter: calc(#{$transition-base-time / 4});

$twice: calc(#{$transition-base-time * 2});

/* Define minimizing transition */

$transition-wrapper-minimize: max-height $transition-base-time ease-in-out,

max-width $transition-base-time ease-in-out $transition-base-time,

border-radius 100ms ease-in-out calc(#{$twice} + 50ms);

$transition-elements-minimize: max-height $transition-base-time ease-in-out,

opacity $transition-base-time ease-in-out,

max-width $transition-base-time ease-in-out $transition-base-time,

min-width $transition-base-time ease-in-out $transition-base-time;

$transition-text-minimize: opacity $transition-base-time ease-in-out,

padding $transition-base-time ease-in-out;

/* Define expanding transition */

$transition-wrapper-expand: border-radius 25ms ease-in-out,

max-width $transition-base-time ease-in-out,

max-height $transition-base-time ease-in-out $transition-base-time;

$transition-elements-expand: max-height $transition-base-time ease-in-out

$transition-base-time,

opacity $transition-base-time ease-in-out;

$transition-text-expand: opacity $transition-base-time ease-in-out

$transition-base-time,

padding $transition-base-time ease-in-out $transition-base-time;

/* Sizing and positioning variables */

$base-height: 56px;

$base-width: 56px;

$cta-max-width: 360px;

/* Theme variables */

/* Light - default */

$light-hover: rgba(255, 236, 241, 1);

$light-background: rgba(255, 255, 255, 1);

$light-font-colour: rgba(29, 37, 60, 1);

/* Dark */

$dark-hover: rgba(0, 0, 0, 1);

$dark-background: rgba(29, 37, 60, 1);

$dark-font-colour: rgba(255, 255, 255, 1);

.happy-portal-call-action {

display: flex;

visibility:hidden;

align-items: stretch;

overflow: hidden;

min-width: $base-width;

max-width: $base-width;

min-height: $base-height;

max-height: $base-height;

transition: $transition-wrapper-minimize;

box-shadow: 0px 0px 16px -4px rgba(0, 0, 0, 10%),

0px 24px 48px -8px rgba(0, 0, 0, 25%);

border-radius: 50%;

/* Default positioning */

position: fixed;

z-index: 9999; // making sure cta is on top of other elements on the page

// default positioning is on the left

flex-direction: row;

&.ng-hide {

opacity: 0;

}

&.ng-hide-add,

&.ng-hide-remove {

transition: all linear 0.2s;

}

&.top-left,

&.top-right,

&.bottom-right,

&.bottom-left {

visibility:visible;

}

&.top-left,

&.bottom-left {

left: 15px;

}

&.top-right,

&.bottom-right {

right: 15px;

}

&.bottom-left,

&.bottom-right {

bottom: 15px;

}

&.light {

background-color: $light-background;

color: $light-font-colour;

svg {

fill: $light-font-colour;

#logo-outline {

fill: #ffd8e4;

}

#logo-left-heart {

fill: #1d253c;

}

#logo-right-heart {

fill: #ff7ea5;

}

> .happy-hover {

background-color: $light-hover;

}

&.dark {

background-color: $dark-background;

color: $dark-font-colour;

svg {

fill: $dark-font-colour;

#logo-outline {

fill: #ffd8e4;

}

#logo-left-heart {

fill: #1d253c;

}

#logo-right-heart {

fill: #ff7ea5;

}

> .happy-hover {

background-color: $dark-hover;

}

> .happy-logo,

> .happy-text,

> .happy-dismiss {

display: flex;

flex-direction: row;

align-items: center;

justify-content: center;

transition: $transition-elements-minimize;

}

> .happy-logo {

min-width: $base-width;

max-width: $base-width;

min-height: $base-height;

max-height: $base-height;

}

> .happy-text {

max-height: 0;

opacity: 0;

> p {

margin: 0;

opacity: 0;

padding: 0;

transition: $transition-text-minimize;

font-family: "Circular Std Book", -apple-system, BlinkMacSystemFont,

"Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",

"Segoe UI Emoji", "Segoe UI Symbol";

font-style: normal;

font-weight: normal;

font-size: 15px;

line-height: 130%;

}

> .happy-dismiss {

max-height: 0;

opacity: 0;

min-width: 0; // min-width is needed for the transition animation

}

/* The expanded format for the call the action */

&.expand {

max-height: 100%;

border-radius: 16px;

max-width: $cta-max-width;

transition: $transition-wrapper-expand;

> .happy-logo,

> .happy-text,

> .happy-dismiss {

opacity: 1;

max-height: 100%;

transition: $transition-elements-expand;

}

> .happy-text {

overflow: hidden;

> p {

opacity: 1;

padding: 18px 12px 18px 0px;

transition: $transition-text-expand;

}

> .happy-dismiss {

min-width: $base-width;

max-width: $base-width;

overflow: hidden;

}

.happysignals-portal-experience-ineditor {

display: block !important;

height: 150px;

width: 100%;

text-align: center;

line-height: 150px;

font-size: 2em;

font-weight: bold;

background-color: $dark-background;

color: $dark-font-colour;

}

question Need to move icon from right to left in portal in ITOM forum

Need to move icon from right to left in portal

Re: Need to move icon from right to left in portal

Re: Need to move icon from right to left in portal