The panel element is being encroached upon by a sidebar

I'm currently developing a basic chat application and I'm in need of a collapsible sidebar for users to select different chat rooms. Unfortunately, the current fixed sidebar is overlapping the panel element where the chat conversations are supposed to display.

.panel-body {
  height: 75vh;
  width: 75%;
  float: right;
}
body {
  overflow-x: hidden;
}
/* Toggle Styles */

#wrapper {
  padding-left: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
#wrapper.toggled {
  padding-left: 250px;
}
#sidebar-wrapper {
  z-index: 1000;
  position: absolute;
  float: left;
  left: 250px;
  width: 0;
  height: 100%;
  margin-left: -250px;
  overflow-y: auto;
  background: #000;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
  width: 250px;
}
#page-content-wrapper {
  width: 100%;
  position: absolute;
  padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
  position: absolute;
  margin-right: -250px;
}
/* Sidebar Styles */

.sidebar-nav {
  position: absolute;
  top: 0;
  width: 250px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sidebar-nav li {
  text-indent: 20px;
  line-height: 40px;
}
.sidebar-nav li a {
  display: block;
  text-decoration: none;
  color: #999999;
}
.sidebar-nav li a:hover {
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
  text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
  height: 65px;
  font-size: 18px;
  line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
  color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
  color: #fff;
  background: none;
}
@media(min-width:768px) {
  #wrapper {
    padding-left: 250px;
  }
  #wrapper.toggled {
    padding-left: 0;
  }
  #sidebar-wrapper {
    width: 250px;
  }
  #wrapper.toggled #sidebar-wrapper {
    width: 0;
  }
  #page-content-wrapper {
    padding: 20px;
    position: relative;
  }
  #wrapper.toggled #page-content-wrapper {
    position: relative;
    margin-right: 0;
  }
}
<html>

<head>
  <title>Chat</title>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="static/style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="static/scripts.js"></script>
</head>

<body>
  <div id="wrapper">

    <!-- Sidebar -->
    <div id="sidebar-wrapper">
      <ul class="sidebar-nav">
        <li class="sidebar-brand">
          <a href="#">
                        Start Bootstrap
                    </a>
        </li>
        <li>
          <a href="#">Dashboard</a>
        </li>
        <li>
          <a href="#">Shortcuts</a>
        </li>
        <li>
          <a href="#">Overview</a>
        </li>
        <li>
          <a href="#">Events</a>
        </li>
        <li>
          <a href="#">About</a>
        </li>
        <li>
          <a href="#">Services</a>
        </li>
        <li>
          <a href="#">Contact</a>
        </li>
      </ul>
    </div>



  </div>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="panel panel-primary">
          <div class="panel-body">

          </div>
        </div>
      </div>
    </div>
    <div class="panel-footer">
      <div class="input-group">
        <input id="btn-input" type="text" class="form-control input-sm chat_input" placeholder="Write your message here..." />
        <span class="input-group-btn">
                                <button class="btn btn-primary btn-sm" id="btn-chat">Send</button>
                                </span>
      </div>
    </div>
  </div>
</body>

</html>

Is there a way to adjust the width of the panel element based on whether the sidebar is collapsed or not? Any help would be greatly appreciated.

Answer №1

Want to customize your design for screens larger than 1024px? Check out these modified bootstrap classes:

    /* Custom breakpoints for screens larger than 1024px */
         @media (max-width: 1024px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
   .navbar-nav .open .dropdown-menu {
       position: static;
       float: none;
       width: auto;
       margin-top: 0;
       background-color: transparent;
       border: 0;
       -webkit-box-shadow: none;
       box-shadow: none;
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Fading away backdrop images for the header

I've created a header class in my CSS with the following styling- header { background-image: url('../img/header-bg.jpg'); background-repeat: none; background-attachment: scroll; background-position: center center; .backg ...

The daterangepicker reigns supreme above all other elements

Just a heads up, I am utilizing daterangepicker from this link: . Recently, I encountered an issue where the input field was overlapping with other elements like bootstrap Modals or menus. <div class="col-md-3 form-group"> <div class=&qu ...

Customizing table header sort icons in PrimeNG 15.4+: A step-by-step guide

The most recent update in PrimeNG brought about a change in the way sort icons are implemented. Previously, they used an i tag with CSS classes which could be customized easily using my company's icons: https://i.sstatic.net/f0Nrq.png However, the n ...

Having trouble retrieving POST data with NodeJS/Express and an HTML form?

I have encountered an issue in my application where I am unable to extract the posted data from req after performing an action pointing to a nodejs endpoint. Despite successfully executing the action, when attempting to access the posted data from req, I a ...

The functionality of if and else statements within local storage is not functioning as

I've been working on implementing a styleswitcher for my website. I successfully created a dropdown menu and saved it in localstorage. However, I'm facing an issue when trying to use the localstorage information to trigger an alert() through if a ...

You are unable to declare a variable within an AJAX function using jQuery

Struggling to update variables within the AJAX function? For example, if there is a variable declared outside like var myName = "My name is Kenny"; and inside the AJAX function you attempt myName.replace("Kenny", "Earl"); Upon running console.log(myNa ...

What is the reason behind the jquery ui slider outputting an object?

Whenever I try console.log($('#my_slider').slider('value')) The output always shows [object Object]. Can someone explain why the actual slider value is not being displayed as described in the documentation? ...

What is the process for retrieving tags and attributes from a website using nodejs?

In my project, I am looking to extract the metatag and specifically check for the presence of 'viewport' within the metadata using nodejs. Despite my efforts in searching, I have not been able to find a highly effective solution. Does anyone have ...

Hide the chosen option within the following select box using jQuery

How can I hide the selected option in the first select box in the second one using jQuery? Here is my HTML code. <div> <select class="fields-mapping"> <option>Option1</option> <option>Option2</option> <op ...

The customizing of font color with Fancytree's "extraClasses" feature is not being properly applied

In my web application, I have a tree that utilizes fancytree. Everything is functioning properly, except for the fact that I need to set the font color to red for certain nodes. I have implemented the use of extraClasses in my JSON, which is successfully a ...

Easy steps to eliminate background color from text

https://i.sstatic.net/mKmIW.png I have encountered an issue where a white background is covering the background image in my coding project. Despite trying to add background-color: transparent;, I wasn't able to remove the white background. How can I r ...

Different methods to disable scrolling when the mobile menu pops up

I have implemented a mobile menu option that appears when you click on the triple line logo, but unfortunately, users can still scroll while the menu is open. I've tried using position:fixed; but haven't been successful in preventing scrolling be ...

What is the best way to align a div right below an image that has been clicked on?

I am designing a website that features social media icons spread out horizontally across the page. When a user clicks on one of these icons, I envision a pop-up window appearing below it, displaying additional information. Here is a visual representation o ...

Attempting to modify the chosen indicator symbol in a multiselect dropdown using bootstrap-select

The current icon that I'm considering changing Perhaps to something similar in the same library but different Currently working on a multi-select dropdown using bootstrap-select and struggling with the checkmark design, although it is important to i ...

Perform a jQuery AJAX GET request while passing the current session information

Is it possible to retrieve the HTML content of another webpage using jQuery, particularly when that page is already signed in? In simpler terms, can we use $.get() to fetch a different page on the same website and transfer the PHP/Javascript cookies with ...

Using :nth-child on elements with the same class name does not produce the desired result

I attempted to utilize the :nth-child selector to target the first, third, and fifth elements with the class name "personal", but it did not work as expected. Is there an alternative method to specifically select these elements sharing the same class? I ha ...

Background gradients in versions of Internet Explorer 8 or earlier

For my website, I'd like to incorporate gradient backgrounds specifically for Internet Explorer. I am aware of a proprietary method for achieving this: filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#20799d', EndColorStr= ...

Exploring the power of searching JSON data using ReactJS

After reading through the "Thinking in React" blog, I'm inspired to create something similar. Instead of filtering an array table, I want it to display the row that matches the input value. I have attempted this and created a jsfiddle example here: j ...

Combine Angular variable in JavaScript function

I want to combine "proposal.id" in the initial parameter of the window.open function. Here is my current code snippet: <button ion-button color="light" onclick="window.open('https://mywebsite.com/offer?id={{ proposal.id }}', '_self' ...

modifying button depending on the state of bootstrap collapse

I'm currently utilizing Bootstrap in my project. Here is the snippet of HTML code I have: <div class="row"> <button id="dog-btn" data-toggle="collapse" data-target="#dog-section" onclick=" ...