0

and greetings. I'm trying to get converse to work in embedded mode, so there is a 'full screen' version that doesn't take up the entire page. I'm having issues, where the converse control box grows outside of the area I've assigned, but there is no scroll bar to view it.

Examples of what the page looks like

I've tried a lot of things, setting dimensions, width and height, changing dimensions, and it doesn't fix the issue. I was wondering if someone could tell me what I'm doing wrong. The webpage code is listed below.

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    

    <!-- Custom fonts for this template-->
    <link href="/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

    <!-- Custom styles for this template-->
    <link href="/css/sb-admin-2.min.css" rel="stylesheet">
    <link href="/css/PEC_global.css" rel="stylesheet">



    <link rel="stylesheet" type="text/css" media="screen" href="https://cdn.conversejs.org/9.0.0/dist/converse.css">
    <script src="https://cdn.conversejs.org/9.0.0/dist/converse.js" charset="utf-8"></script>

    <!--script src="/vendor/converse/dist/converse.js"></script-->
    <script src="/vendor/jquery/jquery.min.js"></script>
    <script src="https://cdn.conversejs.org/3rdparty/libsignal-protocol.min.js"></script>

    <style>
        .converse-container {
            height: 80vh;
        }
    </style>


</head>

<body id="page-top">

    <!-- Page Wrapper -->
    <div id="wrapper" style="height:100vh;">

        <!-- Sidebar -->
        <?php require($_SERVER["DOCUMENT_ROOT"] . '/navBar.php'); ?>

        <!-- Content Wrapper -->
        <div id="content-wrapper" class="d-flex flex-column">


            <div class="row">
                <div class="col-9">
                    <div class="converse-container">
                        <converse-root></converse-root>
                    </div>
                </div>

            </div>

            <!-- /.container-fluid -->

        </div>
        <!-- End of Main Content -->

        <!-- Footer -->
        <!-- End of Footer -->

    </div>
    <!-- End of Content Wrapper -->


    <!-- Scroll to Top Button-->
    <a class="scroll-to-top rounded" href="#page-top">
        <i class="fas fa-angle-up"></i>
    </a>

    <!-- Logout Modal-->


    <!-- Bootstrap core JavaScript-->
    <script src="/vendor/jquery/jquery.min.js"></script>
    <script src="/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Core plugin JavaScript-->
    <script src="/vendor/jquery-easing/jquery.easing.min.js"></script>

    <!-- Custom scripts for all pages-->
    <script src="/js/sb-admin-2.min.js"></script>

    <!-- custom JS for PEC -->
    <script src="/js/PEC.js"></script>

</body>


<script>
    var tabulatorTable = null;
    $(document).ready(function() {
        converse.initialize({
            default_domain: "XXXXXXX",
            bosh_service_url: 'XXXXXXXXX', 
            view_mode: 'embedded',
            message_archiving: 'always',
            auto_login: true,
            auto_reconnect: true,
            credentials_url: 'XXXXXX',
            clear_cache_on_logout: true,
            notify_all_room_messages: true,
            play_sounds: true,
            allow_contact_removal: false,
            //allow_logout: false,
            allow_muc_invitations: false,
            allow_registration: false,
            allow_contact_requests: false,
            send_chat_state_notifications: false,
            //blacklisted_plugins: ['converse-fullscreen'],
        });


    });
</script>
Gfellha
  • 89
  • 5
  • Its pitty we cannot see where it overflows. Is it width? Yes? If so, maybe the reason is that width isnt set..? – Lucie Jan 23 '22 at 02:43
  • It's width is set by the col-9. Odly, where its overflowing is up/down, which is why it not producing a scrollbar, is the issue. – Gfellha Jan 25 '22 at 00:05
  • But how could we know, that its defined by col-9, when you dont show us css code? When I copy your post, I cannot see anything. Just my console got red-sign crazy. – Lucie Jan 25 '22 at 00:16

0 Answers0