how to hide map-info line at bottom of screen

[MichaelLev]

I am new to EXB (Develope Edition).

The map-info line at bottom of screen occupies "precious" space...

It actually contains 2 parts - long part of general info, and short part - "Powered by Esri"

I need to hide the whole info-line so I can put my customised coordinate widgets at bottom of screen.

(replacing the long info by my coordinate widget and displaying only "Powered by Esri" is also an option).

I have not succeeded to locate the "info-line" widget in order to remove it.

Maybe adding "display: none" is practical, but I don't know how to do it.

[JeffreyThompson2 · Accepted solution]

Be aware that removing the attribution line will in almost all cases violate the terms of service.

With that said, this bit of css appears to work.

.exbmap-ui-group-attributionGroup {
  display: none;
}

[abureaux]

I am seconding this. While technically possible, I would not recommend doing so.

Essentially, it's like stealing.

[JustinOBrien_SSP · Accepted solution]

Piggybacking off of @JeffreyThompson2, you could also use that css selector  to move the attribution div to wherever you want within its containing html element or the screen space.

[MichaelLev]

@JeffreyThompson2 If I want to try, I don't know WHERE to do this, and HOW, because implementing css in react is so different than in regular js...

What I want is to put coordinates widget at bottom, so it's not disturbed. Maybe displaying "Powered by Esri" alone, at right or left corner, or play with z-index. But' as I said, I don't know where and how to do such things. 

[JeffreyThompson2 · Accepted solution]

Here are a few ways to add css in Experience Builder.

1. One of the things that makes React such a popular front-end framework is that every component can import it's own css. Used correctly this feature can make for some very well-designed applications. If you create a file called widget.css in the same runtime folder with the widget.tsx, adding the line import './widget.css' to the top of widget.tsx will import your css file.
2. The most Experience Builder way of adding css would be to create a theme with a style.scss file. This is a good way to create universal css for all components in your application. https://developers.arcgis.com/experience-builder/guide/theme-development/
3. You could also create a css widget that has no other function than to import a css file as above and use its own css to hide the css widget. This would create a universal css file without the need to alter the overall theme. 

[MichaelLev]

@JeffreyThompson2 Thank you! I'll try the ways you presented. Meanwhile I searched for "bottom-line1" in whole client, and changed marginBottom to -17px. I did it in pc-layout-json.ts but I had to do the same also in the 2 js files. I still do not understand why those 2 js files are not automatically built from ts and tsx files...  

( I used "blank page" and no template when creating the exb app)