AnsweredAssumed Answered

Styling Attribute Inspector in Bootstrap

Question asked by wpgis5673 on Jan 4, 2016
Latest reply on Jan 4, 2016 by wpgis5673

I am attempting to include the AttributeInspector widget in a Bootstrap app but can't seem to get it to style as expected. Date picker does not appear in a popup, drop downs do not work and the associated fields display as three stacked text boxes, etc.

 

I know I should not use Claro in combination. Tyring it causes the display to change and improve a bit but still not good and not what should be done in any case.

 

Any guidance for a Bootstrap newbie?

 

<Head> listed below. Thanks.

 

Keith

 

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!--    <meta name="description" content="">

    <meta name="author" content="">

    <!-- Safari iOS - apps only -->

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!-- Chrome for Android - NEW! -->

    <meta name="mobile-web-app-capable" content="yes">

    <link rel="apple-touch-icon" href="images/brand.png">

    <link rel="shortcut icon" href="images/favicon.ico">

    <title>Bootstrap Map JS - Get Started</title>

    <!-- Bootstrap core CSS -->

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">    

    <!-- Custom styles for this template -->

    <!-- <link href="css/style.css" rel="stylesheet">-->

    <!-- Bootstrap-map-js -->

    <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">

    <link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">

    <!--<link rel="stylesheet" href="https://js.arcgis.com/3.15/dijit/themes/claro/claro.css">-->

    <style type="text/css">

      #mapDiv {

        min-height: 100%;

        max-height: 100%;

      }

      #search {

         display: block;

      }

    </style>

  </head>

Outcomes