Hi Eric,

I'm not entirely sure what you mean here, do you mean that when you open cometchat in your profile page the styling is broken? If yes, I've tried access your profile page with opened cometchat it seems to display correctly: http://take.ms/7FESo

Good evening,
It works because I disabled both modules which made it not work anymore since I used anwesome font as recommended by Mark.
(In a previous ticket)
Best regards.
Eric

Ah I see, May I know the both module that you've created? so I can temporary enable it for troubleshoot?

Hello,
Of course, these are: esmyroupes(groups) and esmyroupes(pages).

If you need to login as a user of the site:
Username: moderateur
Password: Numeric1

Best regards.
Eric

Hi Eric,

It seems the user given above was not working
However I've tried use the existing user given above 'eric'
The step that I've tried here is:
1. Enable the module esmyroupes(groups) and assign it to be display in profil page
2. I've access the profil page and open the cometchat as well
3. It seems the modul render the fontawesome correctly without broken the layout http://take.ms/4UP21
Perhaps, I've replicate this issue wrongly, can you give us the proper step to replicate this with some of screenshots might help a lot

Hello,
The problem occurs when we want to view a member's profile from a click on the link in the cometchat discussion window.
And when the modules are activated
Best regards.
Eric

Hi Eric,

It seems have css conflict with the core css in:
.../components/com_easysocial/themes/wireframe/styles/style.min.css
for those code:

#es .es-profile-header__hd,#es .es-profile-header__bd,#es .es-profile-header__ft {

position:relative;

font-size:13px;

}



#es .es-profile-header__bd {

margin-left:132px;

min-height:40px;

display:flex;

padding:16px;

}



#es .es-profile-header__avatar-wrap {

background:rgba(0,0,0,0.1);

position:absolute;

bottom:-56px;

left:16px;

z-index:2;

padding:0;

}



#es .es-profile-header__avatar-wrap>a {

border:4px solid #fff;

display:block;

width:112px;

height:112px;

}



#es .es-profile-header__cover {

background-size:cover;

background-position:50% 50%;

background-color:#fff;

min-height:80px;

max-height:200px;

-webkit-transition:all .5s ease;

-o-transition:all .5s ease;

transition:all .5s ease;

}



#es .es-profile-header__ft b,#es .es-profile-header__title>a {

color:#333;

}

Can you recheck your module css if there redundant css classname used?

Hello,
Thanks for your help.

I do not have a redundant class,

Best regards.
Eric

Here is the content of my CSS file:

.height-module{
height:365px;
/*overflow-y: auto;*/
}
.liens-url{
display:inline-block;
float:left;
Font-size:11px;
padding: 0px 1.5px;
}
.block-lien{
display:inline-block;
float:left;
}
.liens-sup{
float:left;
color:#365899;
font-size:14px;
font-weight: bold;
text-align:left;
cursor:pointer;
text-decoration:none;
margin:0px 20px 5px 20px;
}
.liens-sup-detail{
color:#90949c;
font-size:12px;
text-align:left;
margin:0px 20px 0px 21px;
width:100%;
}
.blocs{
display:inline-block;
float:left;
font-size:11px;
text-align:center;
padding:3% 0% 3% 0%;
border:solid 1px #d2d2d2;
width:28%;margin-bottom:5px;
vertical-align:middle;
}
.evenement{
width:96%;
padding:0% 2% 0% 2%;
margin-top: 10px;
float:left;
border-top:solid 1px #d2d2d2;
}
.titre-evenement{
padding:0% 2% 0% 2%;
font-size:12px;
font-weight:700;
color:#90949c;
}
.bouton{
background-color: #dff0d8;
border-color: #d6e9c6;
color: #468847;
padding: 5px 10px;
}
.icone{
float:left;
width:20%;
margin-top:10px;
padding-left:20px;
font-size:25px
}
.redactionnel{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin:10px 0px 10px 5px;
font-size: 11px;
color:#000;
}
@media (max-width:1200px)
{
.height-module{
/*height:100%;*/
}
.liens-url{
Font-size:11px;
color: #90949c;
padding: 5px 5px;
}
.block-lien{
/*display:inline-block;
float:left;*/
display:inline-block;
float:left;
}
.blocs{
/*display:inline-block;
float:left;*/
font-size:11px;
text-align:center;
padding:2% 0% 2% 0%;
border:solid 1px #d2d2d2;
width:28%;
margin-bottom:5px;
vertical-align:middle;
}
}

Hi Eric,

After spend a lot of time on this it seems like the page was render .../components/com_easysocial/themes/wireframe/styles/style.min.css
where you are using horizon theme which mean it not suppose render the wireframe theme.
And I realize in your default.php in the module it was using the css script.
http://take.ms/JU14r
I've remove it and it was render correctly without any issue now.

By the way, as our support was not cover on customization, perhaps, can you submit the similar ticket under tutorial category.

Thank you very much Fadhli.

You really are a great team, all.

You are most welcome Eric