Latest Contributions by KlaraSchmitt

I'm going to summarize my earlier response, just so folks have context, in case anyone else runs into this problem and then I'll elaborate on how to get your image and text to line up vertically. -- In our earlier conversation, we talked about how to simplify your code to find out what CSS element was causing the text to cut off and I recommended removing all the positioning attributes, as doing anything with top, bottom, left, right and absolute or fixed positioning is risky when you're a beginner and don't fully understand what the code is doing. I also recommended opening up Chrome Dev tools via right-click on an element > Inspect and then turning on and off the checkboxes. I also suggested wrapping any CSS you embed via <style> tags in a unique classname that could be set in Row Settings under CSS Class, so as to be less likely to interfere with the CSS classnames Hub uses to make our software. For a more detailed reply with pictures on how to do that, see my response here: https://community.esri.com/t5/arcgis-hub-questions/how-to-get-all-cards-in-a-text-box-to-dynamically/m-p/1292528/highlight/true#M5678  Right click website element, select inspect from dropdown menu, and then within CSS properties start turning off attributes until the problem is identified -- Moving on - the reason that your elements do not automatically line up vertically is because reflow is not automatic with custom HTML and CSS. The Layout Editor uses Bootstrap 3, which you can read a little bit more about it on the post I've linked above, but essentially because you are lining up multiple elements inside a Text Card rather than using individual cards, you will need to duplicate the grid inside the Text Card. You can wrap your image and text-container elements in <div> elements and apply Bootstrap 3 classes to them to indicate breakpoints, like this: <div class="col-xs-12 col-sm-4"> <div class="image-container"></div> </div> <div class="col-xs-12 col-sm-4"> <div class="text-container"></div> </div> Your other alternative is to write media queries that would remove the width calculations at a specific device sizes: https://web.dev/learn/design/media-queries#adjust_styles_based_on_viewport_size @media (max-width: 560px) {  .image-container { width: 100%; } .text-container { width: 100%; } } ^ This indicates that for screen sizes no bigger than 560px, overwrite previous CSS rules. Media queries written like this should be placed below the rest of your CSS, so that the "cascade" applies correctly. (I also can't promise the code above will work - I'm writing it off the top of my head so you get an idea of how overwrites work for media queries, but it may require tweaking.) ... View more

@DarrenLloyd__DOIT  Are you familiar with our Accessibility resource page? It links to a number of blog posts about accessibility and our products: https://www.esri.com/en-us/accessibility/resources Or if you're looking for more documentation on what is possible within the Calcite Design System, this is the documentation for that: https://developers.arcgis.com/calcite-design-system/components/  ... View more

Hello, The calcite-accordion-item is part of Esri's Calcite Design system, which is designed to be highly configurable, so that any Esri application can use it. As you note, the heading role and level HTML attributes are already supported by calcite-accordion-item, but because the component is intended to be flexible, it is not always presumed that accordion headers will be headings. (For instance, Hub uses accordions on our search filters and we were told during an accessibility audit that those should not be headings and we have subsequently updated.) I understand it may be a nuisance to have to apply the HTML attributes individually to each of your accordions within your Hub Site or Hub Page, but even if we added the role="heading" to the default accordion item, levels would still have to be set individually, since we cannot know where in the site/page heading hierarchy a customer has placed their accordions. So at the moment, the calcite-accordion-item in Hub uses the default configuration set by the design system. But it sounds like you have a solution that works for you, even if it requires a tad bit more configuration than you'd like.   ... View more

@GeneH_Chesco  You can add fonts to the Hub site theme by going to the site editor, then selecting theme, and then scrolling down past the list of colors where we have two fields for setting base font and heading font. Select the gear icon and this will launch a model where you can add your Google fonts.   ... View more

Hello @MathieuVillemont, You can use select any of the calcite components, including the calcite icons, in Hub via our Text Card. You just have to switch to Edit in HTML first and then you can paste in the component code. Edit 02/26/24: It turns out I was incorrect when I stated that any of the calcite components could be used. For a list of supported components see: https://doc.arcgis.com/en/hub/sites/add-text-and-images.htm#ESRI_SECTION1_3E6FBF82D17C476D9A7AA6F432E38CAA in Hub documentation or https://enterprise.arcgis.com/en/sites/latest/sites/add-text-and-images.htm#ESRI_SECTION1_3E6FBF82D17C476D9A7AA6F432E38CAA in Enterprise Sites documentation. ... View more

Hello, We've been looking into this and while initially I could reproduce on an Android tablet, my version of Chrome was two years out-of-date and updating to the latest version fixed it. If you are still having this issue, could you please let us know the model and screen resolution of the tablet you are using as well as the version numbers for Safari and Chrome? ... View more

If you're doing this in the Header CSS box then you don't need the <style></style> tags I reference above. If you're doing this in a Text Card on the site or page that displays below the header then you can put <style></style> tags in the HTML box, which signals to the browser that you're using embedded CSS. You'd then put your CSS rules between those style tags. ... View more

You should be able to use #navbar {position:fixed; top: 25px;} within your <style></style> to achieve a sticky effect. While there is a Boostrap class that does this, I would be wary of using it as people who've tried it in our application have found it often ends up affecting their ability to edit anything inside the layout editor because we also use the same class to position our edit navbar and there's a bit of conflict between the two. The top property is adjustable. I simply chose that number because it leaves space for the global navbar (22px) if you have that enabled. ... View more