<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:taxo="http://purl.org/rss/1.0/modules/taxonomy/" version="2.0">
  <channel>
    <title>topic Styling (css) my Webmap in ArcGIS JavaScript Maps SDK Questions</title>
    <link>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/styling-css-my-webmap/m-p/527610#M49200</link>
    <description>&lt;HTML&gt;&lt;HEAD&gt;&lt;/HEAD&gt;&lt;BODY&gt;&lt;P&gt;Hey Esri,&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;I'm finalizing&amp;nbsp;my project right now and decided to add some styling (css) to it&amp;nbsp;before I ship it. I'm looking to have the screen split in two, one side is the webmap and on the other side a drop down menu with the submit button (I dont think it should be to complicated).&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;&lt;IMG alt="" class="image-1 jive-image j-img-original" src="/legacyfs/online/366868_Screen Shot 2017-08-09 at 9.44.25 AM.png" style="width: 620px; height: 348px;" /&gt;&lt;/P&gt;&lt;P&gt;The only issue is, every time I give a z-index or put any float property to the drop down menu, the map blacks out.&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;&lt;IMG alt="" class="image-2 jive-image j-img-original" src="/legacyfs/online/366881_Screen Shot 2017-08-14 at 10.57.53 AM.png" style="width: 620px; height: 705px;" /&gt;&lt;/P&gt;&lt;P&gt;(as you can see the drop down menu moved up.&lt;/P&gt;&lt;P&gt;&amp;nbsp;in this example i also gave the webmap the following styling:&lt;/P&gt;&lt;P&gt;&amp;nbsp;&amp;nbsp;&lt;/P&gt;&lt;PRE class="lia-code-sample line-numbers language-none"&gt;&lt;CODE&gt;&amp;nbsp; #map_div {
&amp;nbsp;&amp;nbsp;&amp;nbsp; position: absolute;
&amp;nbsp;&amp;nbsp;&amp;nbsp; padding: 0;
&amp;nbsp;&amp;nbsp;&amp;nbsp; margin: 0;
&amp;nbsp;&amp;nbsp;&amp;nbsp; height: 100%;
&amp;nbsp;&amp;nbsp;&amp;nbsp; max-width: 50%;
&amp;nbsp;&amp;nbsp;&amp;nbsp; z-index: -1;
&amp;nbsp; }&lt;SPAN class="line-numbers-rows"&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;/SPAN&gt;&lt;/CODE&gt;&lt;/PRE&gt;&lt;P&gt;&amp;nbsp;I don't know if I'm doing something wrong or Esri did it on purpose.&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;Please let me know if you have any leads on the issue, i'll appreciate any help.&amp;nbsp;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;Thank you,&lt;/P&gt;&lt;P&gt;Anton.&lt;/P&gt;&lt;/BODY&gt;&lt;/HTML&gt;</description>
    <pubDate>Sat, 11 Dec 2021 22:58:53 GMT</pubDate>
    <dc:creator>AntonAntonenko</dc:creator>
    <dc:date>2021-12-11T22:58:53Z</dc:date>
    <item>
      <title>Styling (css) my Webmap</title>
      <link>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/styling-css-my-webmap/m-p/527610#M49200</link>
      <description>&lt;HTML&gt;&lt;HEAD&gt;&lt;/HEAD&gt;&lt;BODY&gt;&lt;P&gt;Hey Esri,&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;I'm finalizing&amp;nbsp;my project right now and decided to add some styling (css) to it&amp;nbsp;before I ship it. I'm looking to have the screen split in two, one side is the webmap and on the other side a drop down menu with the submit button (I dont think it should be to complicated).&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;&lt;IMG alt="" class="image-1 jive-image j-img-original" src="/legacyfs/online/366868_Screen Shot 2017-08-09 at 9.44.25 AM.png" style="width: 620px; height: 348px;" /&gt;&lt;/P&gt;&lt;P&gt;The only issue is, every time I give a z-index or put any float property to the drop down menu, the map blacks out.&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;&lt;IMG alt="" class="image-2 jive-image j-img-original" src="/legacyfs/online/366881_Screen Shot 2017-08-14 at 10.57.53 AM.png" style="width: 620px; height: 705px;" /&gt;&lt;/P&gt;&lt;P&gt;(as you can see the drop down menu moved up.&lt;/P&gt;&lt;P&gt;&amp;nbsp;in this example i also gave the webmap the following styling:&lt;/P&gt;&lt;P&gt;&amp;nbsp;&amp;nbsp;&lt;/P&gt;&lt;PRE class="lia-code-sample line-numbers language-none"&gt;&lt;CODE&gt;&amp;nbsp; #map_div {
&amp;nbsp;&amp;nbsp;&amp;nbsp; position: absolute;
&amp;nbsp;&amp;nbsp;&amp;nbsp; padding: 0;
&amp;nbsp;&amp;nbsp;&amp;nbsp; margin: 0;
&amp;nbsp;&amp;nbsp;&amp;nbsp; height: 100%;
&amp;nbsp;&amp;nbsp;&amp;nbsp; max-width: 50%;
&amp;nbsp;&amp;nbsp;&amp;nbsp; z-index: -1;
&amp;nbsp; }&lt;SPAN class="line-numbers-rows"&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;/SPAN&gt;&lt;/CODE&gt;&lt;/PRE&gt;&lt;P&gt;&amp;nbsp;I don't know if I'm doing something wrong or Esri did it on purpose.&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;Please let me know if you have any leads on the issue, i'll appreciate any help.&amp;nbsp;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;Thank you,&lt;/P&gt;&lt;P&gt;Anton.&lt;/P&gt;&lt;/BODY&gt;&lt;/HTML&gt;</description>
      <pubDate>Sat, 11 Dec 2021 22:58:53 GMT</pubDate>
      <guid>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/styling-css-my-webmap/m-p/527610#M49200</guid>
      <dc:creator>AntonAntonenko</dc:creator>
      <dc:date>2021-12-11T22:58:53Z</dc:date>
    </item>
  </channel>
</rss>

