Custom pop ups with bootstrap

[DavidMcDermott1]

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

[RobertScheitlin__GISP]

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.

[DavidMcDermott1]

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.

[RobertScheitlin__GISP]

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.