search

advanced-chat / vue-advanced-chat

A beautiful chat rooms web component compatible with all Javascript frameworks
https://advanced-chat.github.io/vue-advanced-chat/
MIT License
1.72k stars 466 forks source link

Positioning Issue with .vac-room-header in vue-advanced-chat #523

Closed thierbig closed 6 months ago

thierbig commented 6 months ago

Describe the bug

When using vue-advanced-chat, the .vac-room-header is styled with position: absolute;, which interferes with the actual header in my application, causing layout issues.

Steps to reproduce

To help reproduce the issue, you can use the sandbox environment provided at https://github.com/advanced-chat/vue-advanced-chat-sandbox. Here are the steps:

  1. Set up a basic instance of vue-advanced-chat.
  2. Add a static header above the chat component in your application layout.
  3. Initialize the chat component with default settings.
  4. Observe that the .vac-room-header overlaps or incorrectly positions itself relative to the static page header.

Expected behavior

I expect that the .vac-room-header should not interfere with other elements outside of the chat component. Changing the CSS position property of .vac-room-header from absolute to fixed should resolve this issue, ensuring that it stays positioned correctly without affecting the layout of other page elements.

Screenshots

If applicable, add screenshots to help explain the problem. [Add screenshots here]

Device (please complete the following information)

Additional context

This styling issue may affect users who have other fixed or absolute elements in their applications. Adjusting the CSS directly within the component may help resolve this without forcing users to apply override styles externally.

aerovulpe commented 6 months ago

Hey @thierbig, thanks for opening this issue!

I merged your pull request. However, position: fixed also has issues.

It makes the room header width 100% of the viewport, overextending the element in some instances (including the project demo)

image

I think position: sticky might be a better solution. Can you try this with your project? If that works, create a follow-up pull request, and I can get that merged if it passes the demo virtual test.

thierbig commented 6 months ago

@aerovulpe

position: sticky is also problematic. The default will revert back to absolute :)

I went ahead and added parameters to fix the header styles instead: https://github.com/advanced-chat/vue-advanced-chat/pull/525

That way, we'll just have more customization on the styles for the header...

image

aerovulpe commented 6 months ago

Yeah, I like this solution better!

aerovulpe commented 6 months ago

@thierbig, version 2.1.0 has been released, incorporating your changes.

Thanks for your contributions!

thierbig commented 6 months ago

<3