Custom pop ups with bootstrap

474
3
06-29-2018 08:22 AM
DavidMcDermott1
New Contributor III

Hi Geonet'ers,

I am trying to configure my popups with custom HTML/CSS using bootstrap. The main reason is to drive the pop-up style from the map attributes and to look cool. I have already written the HTML/CSS but when I add it to the popup in AGOL it strips the style and script tags. I am not familiar with Web AppBuilder (Developers Edition) or the anatomy of the apps but I know this type  of customisation should occur here. Can anyone help? Is this possible? If so, where do I configure it?

Thanks,

David

0 Kudos
3 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

David,

   Script and Style tags are not part of the supported tags for popup content when using AGOL and it will be stripped as you have seen. In WAB I am not sure how well Bootstrap plays with WAB. WAB has it's own large set of CSS rules and responsive design that I believe bootstrap will interfere with.

0 Kudos
DavidMcDermott1
New Contributor III

Hi Robert Scheitlin, GISP‌. Thank you for your response. Is there any method to add custom css to pop-ups. I am particularly interested in data-driven styling which would require me to include style tags. Is there a way around this?

Thanks.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

David,

   If you are using WAB Developer edition then you can pretty much do anything you want. You would just listen for the this.map.infoWindow show method and get the popup dom object and add dom class(es) directly to the dom node.

0 Kudos