How do I remove the white spaces around my dashboard header on reactjs


Tags: javascript,css,css3,reactjs,redux

Problem :

How do I remove the white spaces around my dashboard header on reactjs

Anyone can help first time doing react and css. not sure what is need to make this work.

The full source code is here. Header.js

import React, { Component, PropTypes } from 'react'

class Header extends Component {
  render() {
    const { todos, actions } = this.props
    return (
      <div style = {divStyle}>
        <h1>
            Dashboard
        </h1>
      </div>
    )
  }
}

var divStyle = {
  background: "black",
  textAlign: "center",
  color: "white"
}

export default Header

App.js

import React, { Component, PropTypes } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as TodoActions from '../actions/todos'
import Header from '../components/Header'

class App extends Component {
  render() {
    const { todos, actions } = this.props
    return (
      <div style = {divStyle}>
        <Header/>
      </div>
    )
  }
}

var divStyle = {
  margin: 0,
  padding: 0
}

App.propTypes = {
  todos: PropTypes.array.isRequired,
  actions: PropTypes.object.isRequired
}

function mapStateToProps(state) {
  return {
    todos: state.todos
  }
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(TodoActions, dispatch)
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App)

enter image description here



Solution :

Got it!

var divStyle = {
  position: "absolute",
  top: 0,
  right: 0,
  bottom: 0,
  left: 0,
  margin: 0,
  padding: 0
}

    CSS Howto..

    How do I stop the text from moving when hovered? (background-image is involved)

    How do I replicate this website in terms of responsiveness using only css?

    How to prevent randomly positioned images from overlapping using Angular

    How to prevent an element to get pushed down by window resize?

    How to get css value of an element inside array?

    How to create a set of css rules for safari

    How can I eliminate all space between block divs?

    resize/expanding slideshow (inside a div) overtakes content that follows below

    How to create custom buttons with arrows for twitter bootstrap?

    how to scroll down|up animatedly in jquery css?

    How should I escape image URLs for CSS?

    How do I prevent sliced images in the CSS background from sitting on each other?

    How to take a div that is off screen and translate it to the middle of the screen using translateX()

    How to change CSS of website if accessed through a mobile browser [closed]

    How to change CSS with jQuery change and this

    Why don’t my box borders surround the floats inside them without this CSS fix? (And how does the fix work?)

    How to make div block fixed as window size changes?

    How to change floating div's width to fill all the space they occupy?

    How to add vertical and horizontal separators between inline elements in CSS?

    How to change position of Semantic UI sidebar for different screen sizes?

    “Best fit” font size - how do I measure a sentence width?

    How to create rounded corners on DIV's with CSS and ASP.NET MVC 3

    How do I fix this simple CSS floating issue in IE?

    How to use relative referencing in CSS files

    How to create this material design background (see image below) with CSS?

    CSS: How to center text vertically and horizontally over an image

    While scrolling, The current div goes up, and another div under it (under the first div background) shows

    How to apply CSS style when ID is taken?

    How to add physics to CSS animations?

    CSS hover - How do I get it to change two nested divs