CSS problems with rtl language pages (Arabic)

[ajbroadbent]

In Arabic (a right to left language), the table of contents and body are stacked top and bottom instead of the table of contents being on the right and the body on the left. It looks like a left margin has been left on the pre-1 class div (column-17) when those should have been switched to a right margin for the rtl languages.

Also, it looks like the figcaption elements have a right border in Arabic that I don't think should be there.

[paulcpederson]

@ajbroadbent try adding either post-0 or rtl-post-0 to the column with the pre-1 (documented in the pre and post documentation). That will tell the grid system to clear the pre-1 properly.

As per the figcaption, all figcaption elements have the border. If it doesn't appear on left-to-right but it does on right-to-left my guess is that you are overriding the style with a selector that is specific enough to override the plain old figcaption but not specific enough to override html[dir="rtl"] figcaption.

A couple of solutions come to mind, the easiest being simply removing the border for figcaption elements. It honestly feels a bit opinionated and heavy-handed now that I'm looking at it again.

[ajbroadbent]

You're right. On closer inspection, the border is being hidden in custom CSS.

As for the margin, though, that's coming directly from Calcite. I suppose we can add rtl-post-0 as a workaround, but what should the proper functionality be in this case? It seems like it would be better to make the change in the CSS so that we don't have to hunt down any potential use of pre-1 to add a workaround to. In other parts of the Calcite CSS, pre-1 is getting switched to margin-right instead of margin-left. The issue is just that the margin-left is being left in in a couple of places, so it's adding a margin to both sides instead of just one.

[paulcpederson]

@ajbroadbent oh really? Hmm. ok that's not what I thought was happening, let me look into this.

[paulcpederson]

Also created an issue to change the figcaption styles: #732

[ajbroadbent]

Thanks!

[ajbroadbent]

I have a couple more to add to this.

.sdk-home-banner .search-bar is currently floated right, but doesn't switch to left in rtl languages.

The search icon is set to right: 0, but doesn't switch to left: 0.
.top-nav .search-bar .search-submit, .sub-nav .search-bar .search-submit, .wf-nav .search-bar .search-submit

[ajbroadbent]

[paulcpederson]

@ajbroadbent did you already fix these? Here's what I see:

Also you should put an icon-ui-flush on that icon-ui-search to get rid of the extra padding on the icon.

[ajbroadbent]

I put in a temporary fix in the documentation specific CSS, since we need to push this live soon, but it's not an ideal fix. You can see the search icon on the right-hand side at http://docdev.arcgis.com/ar/arcgis-online/.

[ajbroadbent]

Thanks for the icon-ui-flush tip!

[paulcpederson]

@ajbroadbent Now that I'm looking at it, I think you could do that search input + icon layout with an input group component:

<div class="input-group">
  <input class="input-group-input" type="search" placeholder="بحث تعليمات ArcGIS Online">
  <span class="input-group-button">
    <button class="icon-ui-search icon-ui-flush" type="submit"></button>
  </span>
</div>

[ajbroadbent]

That is a great idea and would solve some other issues I'm having. Thank you! My one question is this: When I add that to the page, there's a margin on top of the search input, and it's making the button appear off-center. It looks like margin is getting set to 0.3875rem 0 0 0 for all input types, including input[type='search']. Any suggestions? I tried adding leader-0 to the input element, but it didn't get rid of the margin. Any suggestions there?

[paulcpederson]

when I use the code above I don't get the top margin on the input. The input-group-input class should take care of that for you:

Do you have that class and it's still not working?

[ajbroadbent]

Nope, I was missing that. Thanks!

[ajbroadbent]

That input-group looks so much better than what I was trying to do before. Thank you!