OSM contributors attribution and the default controls inside the OpenLayers map are not proper as per the OpenLayers examples

Question

i am implementing an OpenLayers map inside an Ionic application for iOS. However the OpenStreetMap contributors attribution is not coming in the proper way. It is coming in the middle of the screen. Also the controls are not properly visible. Is there anything i am missing? I am implementing the map using the code below

html

 <div id="map" class="map"> </div>

  loadMap() {


    const view = new View({
      center: fromLonLat([this.homeCoords.lon, this.homeCoords.lat]),
      zoom: 5
    })

    this.map = new Map({
      target: 'map',
      controls: defaultControls({ attributionOptions: { collapsible: true }}).extend([ 
        new ZoomSlider(), 
        new Zoom()]),
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: view
    })

  }

Answer 1

thanks for the comment from @til_b. I fixed the issue by importing

@import "../node_modules/ol/ol.css"; 

in global.scss file in the ionic project.