Change CSS of an embedded widget

Question

I have embedded a TradingView Widget . I wanted to remove or hide the header area of that widget where TradingView icon and text are displayed.

I have used display: none !important on the specific class. But it doesn't resolve this.

Here is my JSFiddle Link: JSFiddle Link

Here is the embedding part:

              <!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
  <div class="tradingview-widget-container__widget"></div>
  <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js" async>
  {
  "showChart": true,
  "locale": "en",
  "largeChartUrl": "",
  "width": "400",
  "height": "660",
  "plotLineColorGrowing": "rgba(60, 188, 152, 1)",
  "plotLineColorFalling": "rgba(255, 74, 104, 1)",
  "gridLineColor": "rgba(233, 233, 234, 1)",
  "scaleFontColor": "rgba(218, 221, 224, 1)",
  "belowLineFillColorGrowing": "rgba(60, 188, 152, 0.05)",
  "belowLineFillColorFalling": "rgba(255, 74, 104, 0.05)",
  "symbolActiveColor": "rgba(242, 250, 254, 1)",
  "tabs": [
    {
      "title": "Indices",
      "symbols": [
        {
          "s": "INDEX:SPX",
          "d": "S&P 500"
        },
        {
          "s": "INDEX:IUXX",
          "d": "Nasdaq 100"
        },
        {
          "s": "INDEX:DOWI",
          "d": "Dow 30"
        },
        {
          "s": "INDEX:NKY",
          "d": "Nikkei 225"
        },
        {
          "s": "NASDAQ:AAPL",
          "d": "Apple"
        },
        {
          "s": "NASDAQ:GOOG",
          "d": "Google"
        },
        {
          "s": "MIL:FB",
          "d": "Facebook"
        }
      ],
      "originalTitle": "Indices"
    },
    {
      "title": "Commodities",
      "symbols": [
        {
          "s": "CME_MINI:ES1!",
          "d": "E-Mini S&P"
        },
        {
          "s": "CME:E61!",
          "d": "Euro"
        },
        {
          "s": "COMEX:GC1!",
          "d": "Gold"
        },
        {
          "s": "NYMEX:CL1!",
          "d": "Crude Oil"
        },
        {
          "s": "NYMEX:NG1!",
          "d": "Natural Gas"
        },
        {
          "s": "CBOT:ZC1!",
          "d": "Corn"
        }
      ],
      "originalTitle": "Commodities"
    },
    {
      "title": "Bonds",
      "symbols": [
        {
          "s": "CME:GE1!",
          "d": "Eurodollar"
        },
        {
          "s": "CBOT:ZB1!",
          "d": "T-Bond"
        },
        {
          "s": "CBOT:UD1!",
          "d": "Ultra T-Bond"
        },
        {
          "s": "EUREX:GG1!",
          "d": "Euro Bund"
        },
        {
          "s": "EUREX:II1!",
          "d": "Euro BTP"
        },
        {
          "s": "EUREX:HR1!",
          "d": "Euro BOBL"
        }
      ],
      "originalTitle": "Bonds"
    },
    {
      "title": "Forex",
      "symbols": [
        {
          "s": "FX:EURUSD"
        },
        {
          "s": "FX:GBPUSD"
        },
        {
          "s": "FX:USDJPY"
        },
        {
          "s": "FX:USDCHF"
        },
        {
          "s": "FX:AUDUSD"
        },
        {
          "s": "FX:USDCAD"
        }
      ],
      "originalTitle": "Forex"
    }
  ]
}
  </script>
</div>
<!-- TradingView Widget END -->

How can i hide or remove that header area ?

Possible duplicate of [How to apply CSS to iframe?](https://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe) — Nico Haase, Mar 27 '18 at 07:12
@NicoHaase I can't find solution from your given link. My iframe is not in the same page. It is coming from another source i.e. ` — Nazem Mahmud, Mar 27 '18 at 08:32
Are you sure? In the given fiddle, the rendered iFrame is included in your base context. For CSS, it should behave in the same way — Nico Haase, Mar 27 '18 at 09:52
Yes, i have tried. Can you find out any solution by editing in my fiddle? @NicoHaase — Nazem Mahmud, Mar 27 '18 at 11:01
Have you read the linked answer? CORS needs to be enabled by the provider of that iFrame. And if that is not enabled, there might be a good reason for it ;) This exposes huge security vulnerabilities for the embedded page — Nico Haase, Mar 27 '18 at 11:04
Yes, i have read. So, that means there is no way i can hide this header section by custom css or jquery ? :( @NicoHaase — Nazem Mahmud, Mar 27 '18 at 11:57
I don't think so, but you could just ask the provider of that stock API — Nico Haase, Mar 27 '18 at 13:00

score 1 · Accepted Answer · answered Mar 27 '18 at 18:23

Some one gave me a solution and it works .

CSS:

.tradingview-widget-container {
  position: relative;
}
.tradingview-widget-container:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 34px;
  background-color: #fff;
}

New JSFiddle Link: JSFiddle

Change CSS of an embedded widget

1 Answers1