On our forums we are using ModernBB. I want to add a left sticky sidebar 100% height 275px wide with a iframe in it on all pages. Widgets won't allow me to create a iframe at 100% height so is there a way to use javascript that will allow us to have this functionality?

What exactly are you wanting to add in this bar?

a titanembed which displays chat from discord

this is implemented with a widget on the site at this time. We would like to see it fit 100% height on the left.

We have this as a widget at this time. What i want to do is have it stuck to the left side of the screen below the header and sticky navbar. when a user scrolls no matter how big they have the screen it will stay static on the left side.

Have you tried the Discord Server widget in the AP?

ya we have tried that widget from the ap panel but it doesnt integrate live chat with discord authentication. on mobile we utilize the discord ap but on desktop we use titan.

issues resolved

we edited the html for the corresponding pages we want the side bar to be located on

Code:

<div class="wrapper">
    <div class="sidebar">
      sidebar code here
    </div>
    <div class="main">

websites html code

Code:

</div>
</div>

Added to the CSS style sheet:

Code:

/* Sticky sidebar */
.wrapper {
  display: flex;
  justify-content: space-between;
}

.main,
.sidebar {
  border: 0px solid black;
  padding: 0px;
  background-color: #fff;
}

.main {
  width: 90%;
  height: 100%;
}

.sidebar {
  width: 275px;
  height: 98vh;
}

body {
  background-color: #fff;
  font-family: sans-serif;
  padding: 0px;
}

.sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 30;
}

Results:

Thanks for posting the solution.

Problem solved & topic archived. Please read our forum rules:  ESF General Rules