nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

First attempt at bootstrap w/ sidebar

TracySchloss

I am attempting to make a very simple bootstrap style of my map. I'm using some of the samples from the bootstrap-map on github. I'd like to be able to have a sidebar on the right when the screen is desktop or tablet size, but collapse it down to a button at the top when there isn't room. When you click the button, I want a panel of what was in the sidebar to be available. I'm having a hard time grasping the concept of the nav-bar and how to use toggle and/or collapse. Maybe the combination I've come up with is nonsensical.

Since my current code has dojo TitlePane's, which can be collapsed, I added an accordion to manage the content of the side bar that gives a similar flavor to my current maps.

Here's a fiddle of what I'm trying to do. It still contains remnants of the original code I started from (the responsive citizen demo on github). It's styled enough to collapse the sidebar, although that is coming from the column classes and nothing to do with getting it hooked up to a button in the top.

http://jsfiddle.net/schlot/o6dsnedc/1/

Trouver plus de publications taguées avec

Accepted answers

TomWayson

Tracy

What you are trying to do makes sense, and it looks like you're almost there.

I've created a fork of your fiddle that pretty much works, but may need some style fixes:

Bootstrap Map w Panel - JSFiddle

The main thing you were missing was a click handler for the #sideBarToggleButton, which I copied from these lines in the source repo:

responsive-citizens/main.js at 22abca16a8d98eb3afe02d17fff6659cdd9e7338 · tomwayson/responsive-citizens · GitHub

All comments

Reynaldde_Castro

What if I want to use the basemap that my webmap is using? I can't seem find the property to turn that off. I am using a Bing basemap and would like to keep it. I can't find the property to use the Bing basemap from my webmap. Thanks.

TomWayson

Glad you figured it out - you probably learned more by doing it on your own.

Sorry, I don't know that basemap gallery example off hand, both of the apps I've posted use a bootstrap drop down to enable basemap switching - not the basemap gallery. If it really was a dijit tooltip then you may need to add a dijit theme to the page (yuk!) in order to see it. However, to me it looks like our default Basemap widget just uses the thumbnail image title attribute to show the title, which should work fine regardless of your UI library (Bootstrap, Dijit, whatever). See:

http://developers.arcgis.com/javascript/samples/widget_basemap/

TracySchloss

I managed to unsubscribe myself to all threads when I thought I could opt out individually. I guess I'd better look at that more closely. I just now saw your reply, 3 days later. I could have saved myself some effort, but I guess that's how you learn.

I eventually discovered this on my own by looking at your main.js code a little more closely. Since I wasn't doing anything with the modals or the the complaints, I commented out too much, including the query related to the sidebar.

Thank you so much for your example. I'm finally on my way to having a decent look responsive design that I can wrap my head around. I find most examples either to be too simplistic (Hello World ...) or too complicated for me to grasp. Bridging that gap for a cartographer who needs to be a programmer isn't easy.

Now I'm trying to track down a bootstrap example I saw that included the basemapgallery widget, with a tooltip of the name that appeared as a rollover. Using that widget with the bootstrap styling seems to only give you the thumbnails and no text. I can't remember where I saw it, or even if it was called tip or tooltip. Was that something you've posted? I've looked through as many bootstrap-map examples in the past two weeks that I could lay my hands on, but I didn't get them all bookmarked.

TomWayson

Tracy

What you are trying to do makes sense, and it looks like you're almost there.

I've created a fork of your fiddle that pretty much works, but may need some style fixes:

Bootstrap Map w Panel - JSFiddle

The main thing you were missing was a click handler for the #sideBarToggleButton, which I copied from these lines in the source repo:

responsive-citizens/main.js at 22abca16a8d98eb3afe02d17fff6659cdd9e7338 · tomwayson/responsive-citizens · GitHub

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Toutes les communautés
Publications récentes
Contenu suivi
Aide communautaire

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.