Having trouble getting one of the latest samples in the JS API to work, Responsive apps using CSS | ArcGIS API for JavaScript 4.6
Everything works if I open it on a desktop and then shrink the window down but if I open it on mobile or even simulate mobile with the dev tools it doesn't seem to honor the breakpoint. Any ideas?
Scott,
The difference I see is that the sample checks the apps size at load:
<SPAN class="comment token">// Load</SPAN> isResponsiveSize <SPAN class="operator token">=</SPAN> view<SPAN class="punctuation token">.</SPAN>widthBreakpoint <SPAN class="operator token">===</SPAN> <SPAN class="string token">"xsmall"</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">updateView</SPAN><SPAN class="punctuation token">(</SPAN>isResponsiveSize<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
and you are just assuming that the app is at a desktop break point by doing:
<SPAN class="comment token">// Add items to user interface</SPAN> view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>anchor<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"bottom-left"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>searchWidget<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"top-right"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>locateBtn<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"top-left"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>legend<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"bottom-right"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
You need to use the Advanced editor and the "Syntax Highlighter" when pasting code.
Sorry the formatting is so bad on that. I looked at previous posts which said to just copy and paste but that didn't seem to work.
Yeah you're right. Must be something odd in my code. Here's what I have.
// Desktop var legend = new Legend({ view: view, container: document.createElement("div") });
// Mobile var expandLegend = new Expand({ view: view, content: new Legend({ view: view, container: document.createElement("div") }) });
//Map Constraints view.constraints = { rotationEnabled: false };
// Breakpoints view.watch("widthBreakpoint", function(breakpoint) { switch (breakpoint) { case "xsmall": updateView(true); break; case "small": case "medium": case "large": case "xlarge": updateView(false); break; default: } });
function updateView(isMobile) { setLegendMobile(isMobile); }
function setLegendMobile(isMobile) { var toAdd = isMobile ? expandLegend : legend; var toRemove = isMobile ? legend : expandLegend;
view.ui.remove(toRemove); view.ui.add(toAdd, "bottom-right"); } // Add items to user interface view.ui.add(anchor, "bottom-left"); view.ui.add(searchWidget, "top-right"); view.ui.add(locateBtn, "top-left"); view.ui.add(legend, "bottom-right");
Strange, I can not duplicate what you are seeing using the latest version of chrome and the sample live site (not the sandbox).
https://developers.arcgis.com/javascript/latest/sample-code/view-breakpoints-css/live/index.html
Signed in members can post, follow updates, and more. New here? Register a free account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
