Columns in a row wrap even though xs={..} add up to 12. This happens in all screen sizes. I have checked the following questions and bug reports but they havent helped:
SO Question: Bootstrap xs columns wrap
Gatsby Github Issue: https://github.com/gatsbyjs/gatsby/issues/17914
The workaround in the issue did not help me.
Versions:
"gatsby": "^2.18.5",
"react-bootstrap": "^1.0.0-beta.16"
"bootstrap": "^4.4.1"
"react": "^16.12.0",
Code Snippet:
<React.Fragment>
<Container>
<Row>
{
tech["name"].map(db => {
let icon = svgs[toLower(db)];
return(
<Col xs={colSize}>
<Container>
<Row>
<Col xs={4} style={{"maxHeight": "100px", "maxWidth": "100px"}}>
<img src={icon} alt={db}/>
</Col>
<Col xs={8}>
<h5>{db}</h5>
</Col>
</Row>
</Container>
</Col>
)
})
}
</Row>
</Container>
</React.Fragment>
Generated HTML:
The 4th column (SQL Server) wraps around
The elements are rendered correctly after a reload
Website Link: https://tokern.io/cheat_sheet/
You're adding padding to the box and using the default box-sizing mode. To see why this is problematic, review the box-sizing documentation on MDN or this article on box-sizing on CSS Tricks.
To resolve the issue, add box-sizing: border-box to the .col declaration.
Related
I am building a time block with all the hours of the day the container only takes up 75vh and is set to scroll on overflow. I am trying to have the page load and scroll to the current time within my time block but I am having trouble figuring how to scroll within the div instead of the whole page. This works when I have the container set to 100vh but the overflow: scroll is creating a real issue for me. I see lots of answers for this issue in Angular an jQuery. But I am trying to do this in reactjs, and Im not sure how to target the scroll bar within my div.
onLoad I am calling this function:
const scrollToTime = () => {
const currentHour = moment().hour().toString()
const currentTimeEl = document.getElementById(currentHour)
window.scrollTo({
top: currentTimeEl.offsetTop,
behavior: "smooth"
})
}
I've thought of using Element.scrollTo() but this does not work.
This is a short snippet of what my container looks like:
<div className="dayView">
<hr className="day-divider1" />
<div className='dayView-timeSlot' id="12">
<Row className="time-row" >
<Col md="1" className="time-label">12:00 AM</Col>
<Col md="1" className="trash"><Trash /></Col>
<Col md="8" className="appointment-slot">
{" "}
</Col>
</Row>
</div>
<hr className="day-divider-dashed" />
<div className='dayView-timeSlot' id="12">
<Row className="time-row">
<Col md="1" className="time-label">12:30 AM</Col>
<Col md="1" className="trash"><Trash /></Col>
<Col md="8" className="appointment-slot">
{" "}
</Col>
</Row>
</div>
<hr className="day-divider1" />
...
</div>
.dayView{
height: 75vh;
overflow: scroll;
}
Is there a way to target the scroll within my dayView container?
I'm having a rather stubborn DatePicker that I can't seem to get to behave.
I'm using react-datepicker's DatePicker component.
I have a table, where each row has a DatePicker. Opening the calendar view of the date picker seems to not clear the edge of the table:
I have tried setting style={{zIndex: "9999 !important"}} on the table to no avail.
This appears to be the only solution anyone ever recommends.
The bit of code using the DatePicker component looks like this:
<Row>
<Col>
<DatePicker
onChange={onChangeCallback(user.id)}
autoComplete="off"
shouldCloseOnSelect={false}
dateFormat="dd-MM-yyyy"
selected={date}
placeholderText="Vælg Dato..."
clearButtonTitle="Ryd"
isClearable
/>
</Col>
<Col>
<Calendar
color="#ff7e01"
className="align-middle"
size={18}
/>
</Col>
</Row>
with Row and Col imported from reactstrap.
Interestingly, the DatePicker acts correctly when not using Row and Col, so something in there must be causing this interference.
Any clues?
I know you've already tried the position: fixed option, but as ccallendar alludes to, the library #popperjs/core used by datepicker-react has changed since then, more specifically:
"7. Change positionFixed
In Popper 2, this is now the strategy option:
createPopper(reference, popper, {
strategy: 'fixed',
});
"
-- https://popper.js.org/docs/v2/migration-guide/#7-change-positionfixed
Applying that to your question, then this should work:
<Row>
<Col>
<DatePicker
onChange={onChangeCallback(user.id)}
autoComplete="off"
shouldCloseOnSelect={false}
dateFormat="dd-MM-yyyy"
selected={date}
placeholderText="Vælg Dato..."
clearButtonTitle="Ryd"
isClearable
popperProps={{ strategy: "fixed" }}
/>
</Col>
<Col>
<Calendar
color="#ff7e01"
className="align-middle"
size={18}
/>
</Col>
</Row>
I just found out about react suite and it's really good but I can't figure out this error that says component is not exported from rsuite per example 'Attempted import error: 'Card' is not exported from 'rsuite'.' and this is happening very often like where is the component if not from rsuite and the docs for it are really bad it doesn't help much
import "./App.css";
import "rsuite/dist/styles/rsuite-default.css";
import { Row, Col, Card } from "rsuite";
const styles = {
padding: 20,
textAlign: "center",
};
function App() {
return (
<div className='App' style={styles}>
<Row>
<Col md={6} sm={12}>
<Card />
</Col>
<Col md={6} sm={12}>
<Card />
</Col>
<Col md={6} sm={12}>
<Card />
</Col>
<Col md={6} sm={12}>
<Card />
</Col>
</Row>
</div>
);
}
export default App;
I can't find out why this is happening, tried looking up youtube, google or anything but it seems like the community for it is not that big I don't understand and I've had this with a lot of other components. Any help would be appreciated I really wanna use this library it looks really good
There is no Card component in the rsuite library, but you can implement it by combining Panel components.
https://rsuitejs.com/components/panel
In addition, the import of components is explained at the beginning of each component's documentation.
I am having an issue with Gatsby bootstrap or react-bootstrap (not sure yet, most likely it is bootstrap). Everything looks great when I build and serve gatsby website, it has all bootstrap classes and nice grid ( 2 columns, one is md="8" another is md="4"). But once I reload the page and when I inspect the code in the Chrome browser, bootstrap classes disappear.
Code in Gatsby page (added className just to make sure that it is not coming after reaload):
{window.innerWidth > 992 ? (
<Col md="8">
<NameAndHealine />
<ListingText />
</Col>
<Col md="4">
<PricingSidebBar />
</Col>
) : (
<Col xs="12">
<NameAndHealine />
</Col>
<Col xs="12">
<PricingSidebBar />
</Col>
<Col xs="12" className="mt-5">
<ListingText />
</Col>
)
Code example before page reload:
<div class="col-md-8">...</div>
<div class="col-md-4">...</div>
Code example after page reload:
<div class="col-12">...</div>
<div class="col-12">...</div>
Steps what I tried to solve the problem:
Import bootstrap.css and bootstrap.js inside gatsby-browser.js
Add extra className with bootstrap classes to make sure it is not coming after page reload.
EDIT:
I found the issue, it is with window.innerWidth as I was ordering components depending on it. I changed it to multiple rows and set display classes for different screens. After page reload Gatsby doesn't take classes when it is inside if (window.innerWidth > 992) (why?). If someone knows the answer please let me know, thanks.
EDIT 2
Added extra code above
I can't get bootstrap classes to work with react-bootstrap
I tried using bootstrap classes specifically flex properties in react-bootstrap but it doesn't seem to work. But on the docs it shows an example of them using it "https://react-bootstrap.netlify.com/layout/grid/", also the docs seem pretty vague so I went to bootstrap's docs but no avail there either.
I noticed when I change how many Col's (like this col md={4}) I want a specific col element to take up the positioning of this button changes even though it supposed to be in the center why is that ? Here is a example of my code
import React from 'react';
import'./Welcome.css';
import { Button, Container, Col, Row } from 'react-bootstrap';
class Welcome extends React.Component {
render() {
return(
<div className="welcome">
<Container>
<Row className="justify-content-center">
<Col>
<Button variant="primary" size="lg">Large button</Button>
</Col>
</Row>
</Container>
</div>
);
}
}
export default Welcome;
I'm fairly new to react as well, more so to react-bootstrap but I am very familiar with bootstrap, this has me ready to just use CSS grid or flex and not use bootstrap's grid lol. So if anyone can help me out that would be great and much appreciated.
Try This.
<Container>
<Row>
<Col md={{ order: 'last' }}>First, but last</Col>
<Col md>Second, but unordered</Col>
<Col md={{ order: 'first' }}>Third, but first</Col>
</Row>
</Container>