Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

element breaks styling behavior: can't be positioned with margin: auto #309

Open
Morriz opened this issue Nov 26, 2024 · 1 comment
Open

element breaks styling behavior: can't be positioned with margin: auto #309

Morriz opened this issue Nov 26, 2024 · 1 comment
Assignees
@OvidijusParsiunas
Labels
advice Information how to use/implement the component

Comments

@Morriz
Copy link

Morriz commented Nov 26, 2024

Hi, I created a demo page for you to see this:

<!DOCTYPE html>
<html>

<head>
    <script type="module" src="https://unpkg.com/[email protected]/dist/deepChat.bundle.js"></script>
    <title>Chat</title>
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: "Inter", sans-serif, "Avenir", "Helvetica", "Arial";
        }
    </style>
</head>

<body>
    <deep-chat style="border: 2px solid red; width: 400px; height: 200px; margin: auto;" demo="true"></deep-chat>
    <div style="border: 2px solid red; width: 400px; height: 200px; margin: auto;">I am in the middle</div>
</body>

</html>
@OvidijusParsiunas
Copy link
Owner

Hi @Morriz.
By default Deep Chat element uses the display: table-cell to position itself within the browser window as previously other display properties were causing position and dimension issues for some users. Hence table-cell was the only property that worked by default for most cases. However, to fix your issue all you need to do is set style to display: block as follows:

<deep-chat style="border: 2px solid red; width: 400px; height: 200px; margin: auto; display: block;" demo="true"></deep-chat>

Nevertheless, the issue above can be easily overcome by just simply wrapping the deep-chat element inside an element that has the desired positioning, as follows:

<div style="border: 2px solid red; width: 400px; height: 200px; margin: auto">
  <deep-chat style="border: 2px solid red; width: 400px; height: 200px; margin: auto" demo="true"></deep-chat>
</div>

To note, in your example margin: auto displays the second div in the screen center because it is using text. If you replace the text with a div it will be set in the middle top of the screen. E.g:

<div style="border: 2px solid red; width: 400px; height: 200px; margin: auto">
  <div>I am in the middle</div>
</div>

Hence, once you use any of the solutions above, the middle top position is the expected css outcome.

@OvidijusParsiunas OvidijusParsiunas self-assigned this Nov 28, 2024
@OvidijusParsiunas OvidijusParsiunas added the advice Information how to use/implement the component label Nov 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@OvidijusParsiunas OvidijusParsiunas

Labels
advice Information how to use/implement the component
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Morriz @OvidijusParsiunas