0

Currently, I have a sidebar with text. How do I collapse it to a button when the screen size is below a certain pixel width? Here's the app on Code Pen: Click for App.

This sample code does what I would like to do, but rather with a side bar. Sample Code

I plugged this in to the JS, but nothing happened:

if (newVal === "large"){
 // clear the view's default UI components if
 // app is used on a mobile device
 view.ui.components = [];
}
});

I plugged this in to the CSS to see if I can get the sidebar to go away when the screen is less than 992 pixels, but nothing happened. I'm not sure if you can even call the sidebar element?

.esri-view-width-less-than-large .sidebar {
    display: none;
}

I figured I'd try because it does work with the zoom button:

.esri-view-width-less-than-large .esri-zoom .esri-widget--button {
    display: none;
}

Here's an older thread that collapses a sidebar into a button. But I'm not using Bootstrap, or even sure if I should. Bootstrap app

1 Answer 1

2

You have some issues to resolve in order to achieve what you want.

The first thing is that sidebar is not using the ui provide by the library, you are positioning it by yourself. So, if you want to hide it, you also need to do it by yourself.

Using the widthBreakpoint of the view, you could do something like this,

view.watch("widthBreakpoint", function(newVal){
  console.log(newVal);
  if (newVal === "xsmall"){
    document.getElementById('sidebar').style.display = 'none';
  }
  else {
    document.getElementById('sidebar').style.display = 'block';
  }
});

That will hide sidebar when the width of the view is less than xsmall and show it in other case (btw, I think it is actually a side panel not side bar ;) ).

3
  • Thanks! That hid the sidebar. But, I still would like to know how I can have the sidebar text in a widget/button when the sidebar is hidden?
    – Pfalbaum
    Commented Jul 20, 2020 at 3:09
  • You want a button to open the sidebar that appears when sidebar hides?
    – cabesuon
    Commented Jul 20, 2020 at 5:45
  • Yes, exactly. I posted the sample code to illustrate what I'd like to do with the sidebar.
    – Pfalbaum
    Commented Jul 20, 2020 at 14:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.