Column Width issue about styled-bootstrap-grid HOT 19 CLOSED

Thanks a lot @peterlazzarino for your help on this.

from styled-bootstrap-grid.

are you injecting the BaseCSS as outlined in the readme? Ive had this happen when I forget to add that component.

from styled-bootstrap-grid.

Also make sure your Cols are wrapped in a Row!

from styled-bootstrap-grid.

from styled-bootstrap-grid.

@asadmehmoodsatti can you please link to a repo where you can reproduce this issue so I can see the code?

from styled-bootstrap-grid.

Hi ,

I m attaching screen short.

Here is the code .

from styled-bootstrap-grid.

@asadmehmoodsatti the code is printed as some text here. Can you please paste your JSX / the contents of your render function so this can be checked? Thanks

from styled-bootstrap-grid.

import React, { Component } from "react";
import { Container, Row, Col } from "styled-bootstrap-grid";
import { GridThemeProvider } from "styled-bootstrap-grid";
import { ThemeProvider } from "styled-components";

const gridTheme = {
breakpoints: {
// defaults below
xl: 1200,
lg: 992,
md: 768,
sm: 576,
xs: 575
// or you can use aliases
// giant: 1200,
// desktop: 992,
// tablet: 768,
// phone: 576,
// smaller: 575,
},
row: {
padding: 15 // default 15
},
col: {
padding: 11 // default 15
},
container: {
padding: 0, // default 15
maxWidth: {
// defaults below
xl: 1140,
lg: 960,
md: 720,
sm: 540,
xs: 540
// or you can use aliases
// giant: 1140,
// desktop: 960,
// tablet: 720,
// phone: 540,
// smaller: 540,
}
}
};
const styledTheme = {
mainColor: "purple"
};
class App extends Component {
render() {
return (

      </div>
    </GridThemeProvider>
  </ThemeProvider>
);

from styled-bootstrap-grid.

@asadmehmoodsatti That doesn't look like valid JSX, there is a closing div tag with no opening tag and there are no Col components. Can you make sure this is all pasted in and correctly formatted and / or add this as a github repo or gist?

from styled-bootstrap-grid.

Hi ,

I followed the exact code from your git repo. Here is the screen short .

from styled-bootstrap-grid.

Hi,

Can you run the same git rep code on your end share screen short?

from styled-bootstrap-grid.

@asadmehmoodsatti that code doesn't include the required BaseCSS, are you importing that somewhere else?

from styled-bootstrap-grid.

Hi ,
no i m not using BaseCSS in my code.

from styled-bootstrap-grid.

Ok, please see this part of the README for instructions on using BaseCSS, it will fix your problem https://github.com/dragma/styled-bootstrap-grid#prerequisites

from styled-bootstrap-grid.

Hi,
Thanks. Issue resolved. I want to know 1 more thing. I import this on component level. Can't We use it globally?

Thanks for the help.

from styled-bootstrap-grid.

Hi,
I noticed 1 more thing.
I can see the issue between xl and lg. on my normal desktop if i increase the value of xl then my Column width get increase instead lg.

from styled-bootstrap-grid.

@asadmehmoodsatti you can add it to your root component if you want it to apply to your whole app.

For your second comment not sure what you mean, if you are having an issue please add a link to somewhere it can be reproduced

from styled-bootstrap-grid.

Hi ,
Yes. Now point 1 is clear .

Right now i can't host it somewhere. But if you think that is the only way then i see where i can host it.

But i share you my code with its result. So you can see what i m talking.

Above code produce below screen short for normal desktop scree. Basically i m confuse in xl and lg.

from styled-bootstrap-grid.

@asadmehmoodsatti I still cannot see formatted code there and won't be able to see if this is a bug unless there is code that can show an issue and have it reproduced

from styled-bootstrap-grid.