Latest Contributions by KlaraSchmitt

‎05-16-2022

Hello @JustinGleeson1, Hub uses the Bootstrap 3 framework, which relies on a 12 column grid. Assuming you are using a single Text Card and each card is wrapped in the Bootstrap grid classes you have above, you may want to look at adding a col-md-offset-1 https://getbootstrap.com/docs/3.4/css/#grid-offsetting on your first card since you essentially have two extra columns leftover in your set of five cards.

‎05-02-2022

Hello @CIDAdmin, Regarding question #1, given you are already using our card code snippet, I will assume that you are at least moderately comfortable in the HTML editor of the Text Card. It is possible to move all three cards into the same Text Card to avoid the scenario you are describing, but you will need to add some of the grid classes to handle reflow in the layout. You will need to add a wrapper div around each .calcite-web card that represents the sizes you want the card to take based on device size. <div class="col-xs-12 col-sm-6 col-md-4"> <div class="calcite-web"> ... </div> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="calcite-web"> ... </div> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="calcite-web"> ... </div> </div> Hub is based on a 12-column grid in Bootstrap 3, so the number of columns in a row need to equal 12, but a row's width changes (this is called a breakpoint) based on the device that is rendering your site. My example above roughly translates to "On mobile devices, this card should be 12 columns wide (100% of the available width). On tablets in portrait orientation, this card should be 6 columns wide (50% of the width). On tablets in landscape orientation AND anything larger, this card should be 4 columns wide (~30% of the width)." You may find the examples on the Bootstrap documentation helpful: https://getbootstrap.com/docs/3.4/css/#grid-example-mixed In regards to Question #2, this is actually much more challenging to do with the Bootstrap grid if you want it handled dynamically. It is possible using CSS flexbox, but you would need to setup your own grid structure (and ignore everything I just wrote about Bootstrap's columns.) The reason we don't set height in that code snippet is because as soon as the card starts to resize to handle different devices, it often increases in height and a fixed height would cut off part of the card's contents. You could use custom css to set a min-height on the .calcite-web class, but I would definitely recommend adding a unique class to the row first, just so you don't impact anything else. .custom-row-class .calcite-web { min-height: 468px; /*or the height of your tallest card in the row */ }

‎04-08-2022

Hello @DavidMaggio, I'm sorry you're experiencing this. It is definitely a bug and not something you would not be able to fix yourself. This bug has already been reported, so I'll make a note of your issue on it. Thank you, Klara

‎04-01-2022

Hello @PLadd, Yes, it does also apply to Enterprise Sites and sure, I'll try to provide a simple example of how this could work. Here is a row in my site. It has an Image Card and a Text Card. I've given it a unique row class of forest. Now that I have a unique row class, I can open up a Text Card anywhere on the page and add CSS that utilizes that class to target the elements within the row. To write out what I have in the code screenshot above, I have embedded styles that specify my row and then the elements within my row that I want to spruce up with additional CSS. <style> .forest h2 {font-size: 30px; font-weight: bold; margin-bottom: 30px;} .forest p {font-size: 18px; margin-bottom: 20px;} .forest .image-card {border: 3px solid white; margin-left: 10px;} </style> If you were to inspect the code of the Image Card, you would see it has a class .image-card. That is an example of one of our component classes and one you don't want to straight up target without a unique row wrapping class.

‎04-01-2022

@PLadd, You will not be able to edit the full CSS of Hub Sites or Pages directly as we do not support a global stylesheet (so if you were looking for it, that's why you can't find it.) This is intentional. In the past, we have allowed modification at the site level and unfortunately, what happened was people would do things like use absolute positioning or !important to modify our app's layout. Then when we released new features, we'd break their layouts and they'd be unhappy about that. Since we cannot predict what people will do with CSS and Javascript, we no longer allow that level of control. CSS is scoped to embedded styles within a site, page, or site header. You can modify your site and page layouts individually. You simply have to do that within embedded <style></style> tags that you can set in a Text Card. You can open the Text Card's HTML editor by clicking the </> Edit in HTML button at the bottom of the card. We also are working on embeddable cards, which will allow you to repeat certain cards across multiple pages. Additionally, when you are doing CSS and HTML in the Text Card, I do not recommend targeting our card class names as you may run into the same issue mentioned above where we update a card and unintentionally affect any additional styling hooked to the same class. Your best solution to avoid that scenario and avoid use of !important is to make a unique classes on the rows containing the cards you want to modify, so that you get a narrower set of selectors, such as .special-row-class .existing-card-class. You can find this field under Row Settings > Appearance > Row CSS Class. With a unique row class, you could also change the row height in your Text Card. And the non-CSS solution would be to use our Spacer Card to add a specific height amount of white space to your row card. The Spacer Card also allows you to hide that extra white space in mobile, when the layout switches to a single column. Hope that helps!

‎03-30-2022

In the ArcGIS Enterprise Sites 11.0 release, we will be including a change that increases the base font text on all sites and pages from 14px (10pt) to 16px (12pt) and changes the root html font size from 10px (8pt) to 16px. Frequently Asked Questions Why is font size changing? ArcGIS Enterprise Sites recognizes the importance of making web content accessible to people with diverse abilities. While there isn’t an official WCAG standard for font size, 16px (12pt) font size is commonly used by most web browsers to improve the readability of web content. Why is Enterprise Sites changing font measurements? rem stands for “root em” and is considered a relative size text format; it is calculated based on a value set on the root html element. The benefit of using relative text size measurements is that it improves the ability to scale a site or page layout proportionately based on the root value, which in this case will be 16px. Where is base font text used? Your base font is any text that has been added to a site or page layout using the preformatted paragraph font size included in the text card or through HTML/CSS in the text card editor. Headings and other preformatted font styles included in the text card will not be impacted. How can you tell if a site uses rem values? You can check your site’s HTML before upgrading by opening the any of the HTML/CSS editors (text card, header, footer) and looking for the presence of rem measurements. Note: Site templates that include a timeline component have already been updated to account for the change. You do not need to take any action on the timeline component. How do you update a site? The upgrade will automatically update the base font size and root html font size to 16px. If you are already using rem and a root html value other than 16px, you may see some visual differences. How can you update your site’s rem values before the upgrade? The only way to prevent any visual changes ahead of the upgrade is to switch your rem units to pixels. You do not have to switch to pixels if your site already benefits from relative font sizing, but if you wait, you may need to modify your rem values after upgrading. How can you update your site’s rem values after the upgrade? The easiest way to update your rem values to be calculated based on the new root html value is to establish the equivalent pixel size of your existing rem values and then use a pixel-to-rem converter after the upgrade. Take the pixel value, open the converter, make sure base is set to 16, and generate your new rem value. Update your custom code with your new rem values. Will content shared on a layout or through a site’s search results be impacted? This update primarily affects the base font text of sites and pages and not items embedded on a site or page layout. You may also notice the font size increase slightly in the search results, content views, and site editor. Can I continue to use pixels in custom HTML/CSS? Absolutely! If you are currently using pixels, the rem update will not replace your code and you do not need to make any changes. You can safely continue to use pixel-based font sizes in your work.

‎03-15-2022

Hello @ChrisMalam, While I understand the need to have consistent looking web properties, we do not provide the ability to link to external packages or modify CSS at a global level due to issues in the past where other folks' stylesheets would collide with our own and break our product's layout. It looks like your component probably does require some CSS to render properly and that the package you're referencing is more like a standalone framework. Our framework for Hub is Bootstrap 3 and Calcite. In order to duplicate the styling attached to .uikit-callout .spf-callout, you'd want to inspect it on the Public Face site and then apply the associated attributes via embedded stylesheet on Hub with a Text Card. Embedded styles go between <style></style> tags. Looking at the Public Face source code for that callout, these are the styles you'd want to insert between style tags to get a comparably branded callout. (One thing to note, Hub applies font family by whatever is set in Theme > Base Font / Heading Font, so if you're trying to target fonts that do not naturally occur on the end user's laptop, you'll want to set the URL over there.)

‎03-08-2022

Hello, <center> is deprecated. Try wrapping your button in a <p> tag and then put the .text-center on the paragraph tag instead. <p class="text-center"><a href="#" class="btn btn-primary">Button Text</a></p>

‎03-04-2022

Hello, You will see that display of printed HTML with the greater than and less than symbols when you are trying to use unsupported HTML tags in Hub. Unfortunately due to security risks, we do not allow <form> elements within Text Cards. For a list of supported tags, you can refer to this documentation page: https://doc.arcgis.com/en/hub/sites/add-text-and-images.htm#ESRI_SECTION1_15E3903373B04DF391D6DF5D15473B44 If the iframe is working for you, that may be your best bet for embedding the MailChimp form.

‎03-03-2022

All my quick solutions would result in unbalanced middle spacing. You could consider is placing resources in the same Text Card as the images. Then you could use display: flex; justify-content: space-between; to even out the spacing. However, the caveat with flexbox is that you'll probably want to use some media-queries with it so you can set flex-wrap: wrap at certain breakpoints to control how you want the layout handled on smaller devices. Another alternative if you want our grid to take care of the resizing and spacing would be to put each image in its own Text Card and perhaps add the class .pull-right to the a tag containing the end-most image.

‎03-03-2022

Do you have a url to the live view of your actual site? It'd be easier for me to determine the issue.

‎03-03-2022

Hmm. My next guess is that these are rendering as block-level elements, rather than inline as I would've expected on images. I missed the fact you had divs wrapped around the images. <div> elements are generally display:block by default. You could try pulling the div off and putting the .text-align class on the <a> element instead and if that doesn't work, try display: inline on the actual image styles. Updating Media

‎03-03-2022

Hello, The reason your images are stacked is because the cards in the layout editor span a 12-column grid system and it looks like your Text Card is maybe 4 columns wide. You can use the left arrow button that appears on hover to expand the width of the Text card until your images are side-by-side or you can change the width of the images by using an inline width attribute similar to how you have your height attribute. (You'll likely have to change your height value if you use a smaller width value though.)

‎03-01-2022

Hi @KevinKhosa, You don't have much CSS specified and it looks like you may be using Bootstrap classes. This is Hub's underlying framework, but you'd probably need to put these buttons into a .navbar to have different sized devices handled automatically. You might find one of these two samples helpful as a starting point for center-aligning navbar links: https://www.codeply.com/go/1lrdvNH9GI/bootstrap-3-center-navbar-brand-and-links https://codepen.io/davidcochran/pen/LYPrPr I'd definitely start by wrapping all your buttons in a uniquely-named container. This will help you if you need to write any custom media-queries around placement and sizing. I can give you a Bootstrap class that will help you center your row of dropdown buttons, but it won't automatically handle how this looks on different devices. You may need to research media-queries for that if you don't use the .navbar classes. But to just center the buttons, you can put .text-center on the container wrapping around the buttons. <div class="my-row-of-buttons text-center"> [all button code goes here] </div>

‎03-01-2022

Hello @EstellaSmith, The reason you are having problems and the dots don't show in the right place is because your custom CSS actually uses the same class names that our app relies on for fundamental styling. .container is a critical Bootstrap class that helps establish the whole site layout and the Bootstrap stylesheets are going to apply to your class regardless or whether you want them to or not. You can resolve this by simply changing your custom CSS and HTML from .container to something more unique such as .container-for-timeline. Also, you'll probably want to do that for your custom class .content as well. We use that in our alerts, so the light green background will start showing up in the alert popups unless you change it to something more unique.

Online Status	Offline
Date Last Visited	2 weeks ago

My Ideas

Latest Contributions by KlaraSchmitt

Re: Centering 5 Cards in a single Row in Hub

Re: How to get all cards in a text box to dynamically display on 3 by row

Re: HUB dataset filter text doesn't match theme color (cannot read text)

Re: Custom Header for Enterprise Site: Calcite Bootstrap

Re: Custom Header for Enterprise Site: Calcite Bootstrap

FAQ: Upcoming changes to base font size and rem units in ArcGIS Enterprise Sites

Re: Novice Question: Can I load external 'package' from provide style template for Hub content?

Re: How to center button in text box

Re: Adding a MailChimp embeded sign up to ArcHub page

Re: How to get image cards side by side in html

Re: How to get image cards side by side in html

Re: How to get image cards side by side in html

Re: How to get image cards side by side in html

Re: Button alignment

Re: Timeline text not lining up with verticle bar

Re: Dashboard selector color tied to element focus...

Automated accessibility scanning and the Shadow DO...

Re: WCAG AA accessible polygon colors

Re: Menu Button Text Disappeared

Re: Custom HTML/CSS header - Hide a menu link whic...