{"id":2612382,"date":"2024-12-05T05:00:35","date_gmt":"2024-12-05T13:00:35","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=2612382"},"modified":"2024-12-23T14:12:10","modified_gmt":"2024-12-23T22:12:10","slug":"spruce-up-your-pop-ups-with-css","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/spruce-up-your-pop-ups-with-css","title":{"rendered":"Spruce up your pop-ups with CSS"},"author":58731,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[22941],"tags":[29081,777522,34561,366492,776962],"industry":[],"product":[36551],"class_list":["post-2612382","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-css","tag-flexbox","tag-grid","tag-pop-up","tag-whats-new-november-2024","product-arcgis-online"],"acf":{"authors":[{"ID":58731,"user_firstname":"Lauren","user_lastname":"Ballantyne","nickname":"Lauren Ballantyne","user_nicename":"lballantyne","display_name":"Lauren Ballantyne","user_email":"lballantyne@esri.com","user_url":"","user_registered":"2020-06-30 19:39:04","user_description":"Lauren Ballantyne is a Product Engineer on the ArcGIS Online team and has a background in environmental science and conservation ecology. Her feature areas include Map Viewer, Arcade, and hosted feature layer views. Lauren is passionate about developing intuitive tools that help create engaging, informative, and data-rich web maps.","user_avatar":""}],"short_description":"Elevate your pop-ups with flexbox and grid CSS","flexible_content":[{"acf_fc_layout":"content","content":"

My colleague, Bern Szukalski, says it well in his <\/span>Pop-ups: the essentials<\/span><\/b><\/a> blog: \u201c<\/span>Authoring web maps is easy, although authoring a truly great map requires a bit of additional thought and tradecraft<\/span><\/i>\u201d. Customized pop-ups are one of the key pieces to creating great maps. Planning the layout of your pop-up, including the type of content to use is half the battle. For many, a text element is all that\u2019s needed to build an informative and visually appealing pop-up. You can summarize attributes and key information in a blurb, table, list, or a combination of those. This can be accomplished with the rich text editor in Map Viewer, but often refinement requires working with Hypertext Markup Language (HTML).\u00a0<\/span>\u00a0<\/span><\/p>\n

HTML is the language used to define the content, structure, and design of web content. Because HTML is such an important tool for creating great content, the development team is always looking to expand ArcGIS Online\u2019s list of supported HTML<\/a> to make it easier to achieve your design goals. In the November 2024 update, we made some exciting additions, specifically support for <\/span>flexbox<\/span><\/a> and <\/span>grid<\/span><\/a>.\u00a0<\/span><\/p>\n

What are flexbox and grid CSS?<\/h2>\n

When talking about the look of web content, Cascading Style Sheet (CSS) is often brought up. Flexbox and grid are both CSS layout systems<\/span>. <\/span>They\u2019re<\/span> essential building blocks for modern web <\/span>page<\/span>s because t<\/span>hey make it easier to create responsive, flexible, and complex layouts<\/span>.<\/span> This makes <\/span>flexbox and grid<\/span>\u00a0a powerful tool for building <\/span>e<\/span>laborate<\/span> pop-ups that work everywhere in the ArcGIS ecosystem. Before divi<\/span>ng into <\/span>how to<\/span> leverag<\/span>e<\/span> flexbox and grid in<\/span> your<\/span> pop-ups,<\/span> let\u2019<\/span>s<\/span> review each layout system and their key concepts.<\/span><\/span>\u00a0<\/span><\/p>\n

Flexbox<\/h3>\n

Flexbox is a one-dimensional layout system. By one-dimensional, I mean that you can create either a column or row layout. In the diagram below, <\/span>you\u2019ll<\/span> see a container with items inside. A flexbox container is defined by setting the display property to <\/span><\/span>f<\/span>lex<\/span><\/span><\/em>. The content within a flex container become flex items. The orientation of the flex items is <\/span>determined<\/span> by the <\/span><\/span>flex-direction<\/span><\/span> property, which can either be <\/span><\/span>column <\/span><\/span><\/em>or <\/span><\/span>row<\/span><\/span><\/em>. An important concept relating to flex direction are axes. There are two axes, a main <\/span>axis<\/span> and a cross axis. For example, when the flex direction is set to column, the main axis is vertical, and the cross axis is horizontal. Axes are important to consider when setting the alignment of your content.<\/span><\/span>\u00a0<\/span><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2612152,"id":2612152,"title":"Flexbox diagram - background","filename":"Flexbox-diagram-background.png","filesize":153433,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/Flexbox-diagram-background.png","link":"https:\/\/www.esri.com\/arcgis-blog\/flexbox-diagram-background","alt":"Labelled flexbox diagram.","author":"58731","description":"","caption":"","name":"flexbox-diagram-background","status":"inherit","uploaded_to":0,"date":"2024-12-04 16:46:44","modified":"2024-12-04 16:52:18","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":3799,"height":2178,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/Flexbox-diagram-background-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/Flexbox-diagram-background.png","medium-width":455,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/Flexbox-diagram-background.png","medium_large-width":768,"medium_large-height":440,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/Flexbox-diagram-background.png","large-width":1884,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/Flexbox-diagram-background-1536x881.png","1536x1536-width":1536,"1536x1536-height":881,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/Flexbox-diagram-background-2048x1174.png","2048x2048-width":2048,"2048x2048-height":1174,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/Flexbox-diagram-background-811x465.png","card_image-width":811,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/Flexbox-diagram-background-1884x1080.png","wide_image-width":1884,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/Flexbox-diagram-background.png"},{"acf_fc_layout":"content","content":"

Grid<\/h3>\n

Grid is a two-dimensional layout system that allows you to work with columns and rows together. This makes it easy to create complex but manageable layouts. Grids are made up of a container and items where items act like cells in a table. However, grid layouts should not be confused with tables. Tables are used to display tabular data whereas grid CSS is a system used to design the layout of HTML elements in a container. A container could represent an entire web page.<\/span>\u00a0<\/span><\/p>\n

The grid container is defined by setting the display property to <\/span>grid<\/span><\/i>. The number and width of columns and rows within the grid are defined using the <\/span>grid-template-columns<\/span><\/i> and <\/span>grid-template-rows<\/span><\/i> properties. The property values are a space-separated list with each value defining the width of the respective column\/row. The number of values dictates the number of columns\/rows.<\/span><\/p>\n

Let\u2019s apply these grid concepts in a simple example. Say you want to build a grid in your pop-up with 2 columns and you have 3 items to include in the grid. In your scenario you want the columns to be 200 pixels wide. The HTML and pop-up would look something like this:<\/span>\u00a0<\/span><\/p>\n"},{"acf_fc_layout":"content","content":"

\r\n<div<\/span> style<\/span>="display: grid; grid-template-columns: 200px 200px; grid-template-rows: auto; gap: 5px;"<\/span>><\/span>\r\n\t<div<\/span> style<\/span>="border-style: solid;"<\/span>><\/span>Item 1<\/div<\/span>><\/span>\r\n\t<div<\/span> style<\/span>="border-style: solid;"<\/span>><\/span>Item 2<\/div<\/span>><\/span>\r\n\t<div<\/span> style<\/span>="border-style: solid;"<\/span>><\/span>Item 3<\/div<\/span>><\/span>\r\n<\/div<\/span>><\/span>\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"image","image":{"ID":2640422,"id":2640422,"title":"Simple grid example","filename":"Simple-grid-example-2.jpg","filesize":12856,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/Simple-grid-example-2.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/spruce-up-your-pop-ups-with-css\/simple-grid-example-3","alt":"Grid CSS displayed in pop-up","author":"58731","description":"","caption":"","name":"simple-grid-example-3","status":"inherit","uploaded_to":2612382,"date":"2024-12-23 22:11:08","modified":"2024-12-23 22:11:38","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":458,"height":161,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/Simple-grid-example-2-213x161.jpg","thumbnail-width":213,"thumbnail-height":161,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/Simple-grid-example-2.jpg","medium-width":458,"medium-height":161,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/Simple-grid-example-2.jpg","medium_large-width":458,"medium_large-height":161,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/Simple-grid-example-2.jpg","large-width":458,"large-height":161,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/Simple-grid-example-2.jpg","1536x1536-width":458,"1536x1536-height":161,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/Simple-grid-example-2.jpg","2048x2048-width":458,"2048x2048-height":161,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/Simple-grid-example-2.jpg","card_image-width":458,"card_image-height":161,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/Simple-grid-example-2.jpg","wide_image-width":458,"wide_image-height":161}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/Simple-grid-example-2.jpg"},{"acf_fc_layout":"content","content":"
Flexbox vs. grid<\/h3>\n
At this point you might be wondering when to use flexbox over grid and vice versa. The simplest answer is to use flexbox if you want to create a single dimension layout. These could be things like headers, footers, lists, or to simply arrange multiple items inline. Alternatively, use grid if you want to create complex, grid-like layouts where you have complete control over column and row properties and item placement.<\/span><\/span><\/p>\n
CSS properties<\/h2>\n
ArcGIS Online supports<\/span> inline CSS. <\/span>This means that CSS<\/span> properties<\/span> are<\/span> set in the style attribute of a<\/span>n<\/span> HTML tag<\/span>. <\/span>The<\/span> following <\/span>list outlines the <\/span>CSS properties <\/span>available for <\/span>controlling the look of your<\/span> flexbox and grid <\/span>layout<\/span>s<\/span>.<\/span><\/span><\/p>\n