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
Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
