CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
Dino
Dino

Reputation: 821

Resizable and Responsive Panel Layout?

Our team already develop a web page using custom div, css and Split.js the to produce the following layout. There are 3 panels in the layout with each panel can be resize (notice the gutters).

Three resizable panel

Problem is, when using mobile the layout is not responsive - and we still do a lot of r and d for this.

I'm looking for alternative, which is Bootstrap framework. But so far, still don't figure out how to do this. Is there something I miss, or bootstrap is not the right choice?

Upvotes: 4

Views: 4366

Answers (3)

Daniel Garmoshka
Daniel Garmoshka

Reputation: 6352

implementing of panels resizing on plain JS is pretty straightforward:

html:

<div id="panel1" style="height: 220px;"></div>
<div id="resizer"></div>
<div id="panel2" style="height: 220px;"></div>

js:

let resizing = false
var resizer = document.getElementById('resizer'),
  resizingPanel = document.getElementById('panel1')

resizer.addEventListener('mousedown', (e) => {
  resizing = true
  document.body.addEventListener('mousemove', resizingMove)
  document.body.addEventListener('mouseup', finishResizing)
})

function resizingMove(event) {
  if (resizing) {
    resizingPanel.style.height = event.clientY + "px"
  } else {
    finishResizing()
  }
}

const finishResizing = (e) => {
  resizing = false
  document.body.removeEventListener('mouseup', finishResizing)
  resizer.removeEventListener('mousemove', resizingMove)
}

css:

#resizer {
  background: #868686;
  height: 3px;
  cursor: row-resize;
  margin: 0 0 0 auto;
}

Upvotes: 0

tnhu
tnhu

Reputation: 1

I built a component for this purpose a while ago. The concept is to split any view (html element) into two, one has a fixed width/height and the other consumes the rest of the parent. If you put an optional divider in between the two views, you are able to drag and drop it to resize.

https://www.npmjs.com/package/split-view

Let me know if it works for your case.

Upvotes: -1

Flink
Flink

Reputation: 1006

I know this JQuery Resizable Plugin works for this purpose on mobile: https://github.com/RickStrahl/jquery-resizable

Upvotes: 0

Related Questions