I am using react-bootstrap to displaying grid layout. However both row and col displaying grids and borders. No one of css functions work. What is the reason of that?
Here it is my react page.
return (
<Container fluid>
<Row>
<div className="image-container">
<img src={gameDetails.background_image} class="img-fluid" />
</div>
</Row>
<Row>
<Col>
<ListGroup>
<ListGroup.Item>
<span
style={{
fontFamily: "Staatliches",
fontSize: "20px",
}}
>
Name:
</span>{" "}
{gameDetails.name}
</ListGroup.Item>
</ListGroup>
</Col>
<ListGroup>
<ListGroup.Item>
<span
style={{
fontFamily: "Staatliches",
fontSize: "20px",
}}
>
Release Date:
</span>{" "}
{gameDetails.released}
</ListGroup.Item>
</ListGroup>
<Col></Col>
</Row>
</Container>
);
}
export default GameDesc;
I have tried to use CSS functions such as border: no but it did not work.
The border styling applies to the <ListGroup.Item> element. Add border: "none" to that.
Related
my code is this
<Container style={{ position: 'absolute', bottom: '0px', width: '100%', left: 0, right: 0}} fluid>
<Row >
<Col className={sizeWidth < 650 ? "d-flex justify-content-center" : "d-flex justify-content-end"}>
<ButtonAnterior tabIndex={-1} onClick={() => setCurrentTab('Produto')} text={"anterior"} />
</Col>
<Col className={sizeWidth < 650 ? "d-flex justify-content-center" : "d-flex justify-content-end"}>
<ButtonProximo onClick={() => setCurrentTab('Pontos')} text={"proximo"} />
</Col>
</Row>
</Container>
the result looks like this
I need to put both with flex-end, the styles that were added in the container are necessary because the buttons are centered for smartphone
Everyone is overusing Grid. It's not needed. What happening here is, that by using Row/Col the width is divided by half and every button is positioned at the end of it.
Instead just use the Stack component (=flexbox):
https://react-bootstrap.github.io/layout/stack/
<Stack direction="horizontal" gap={2} className="justify-content-end">...
I've juste created a card group on my homepage but I can't center my component CardGroup (see enclosure).
This is the sm-mode. But in lg mode I want my cards to be next to each other. In both cases, it should be centered. I tried to add a margin on the CardGroup or a display (flex, wrap) .. Nothing worked ^^ Any ideas? Thanks!
there is no CSS on both of them :)
HOME
// import react-Bootstrap's component(s)
import {
CardGroup,
Row,
Col,
} from 'react-bootstrap';
import SearchBar from 'src/components/SearchBar';
import EventCard from '../EventCard';
const Home = () => (
<div>
<SearchBar />
<div className="list">
<Row sm={1} md={2} className="g-4">
<Col className="card-columns">
<CardGroup>
<EventCard />
<EventCard />
<EventCard />
</CardGroup>
</Col>
</Row>
</div>
</div>
);
export default Home;
EVENT CARD
import './eventCard.scss';
import {
Card,
Button,
} from 'react-bootstrap';
const EventCard = () => (
<Card style={{ width: '18rem' }}>
<Card.Img variant="top" src="holder.js/100px180" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
);
export default EventCard;
try this
.list {
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
flex-wrap: wrap;
}
check the dom elements whether these properties are applied else try to add !important since some bootstrap's class override yours.
refer: https://codesandbox.io/s/gallant-haze-6hxg1s?file=/src/App.js
I am building a website for the first time. I have a basic question regarding how the pages appear on different devices.
I have a row of three , which each contain an image, e.g.:
<div class="img_box"><img src="1.png" class="prod_img" border=0 height = 343 width = 298/>
<div class="img_box"><img src="2.png" class="prod_img" border=0 height = 343 width = 298/>
<div class="img_box"><img src="3.png" class="prod_img" border=0 height = 343 width = 298/>
As you can see, the three images are each 298px wide. When I view on my laptop, all three fit on one row. When I look on other machines, sometimes the third image is on a new row.
This makes sense to me, as I guess that the screen resolution on the other machines is lower or something.
My question: what is the correct way to ensure that all three images remain in one row when viewed on a computer? I understand that each image would probably have to be on a row of its own when viewed on a cellphone. There must be a standard way to deal with this. Do I give the width of the objects in % instead of pixels?
Any help is appreciated.
This is happening because you're using images of fixed size rather than using a percentage which allows them to resize allowed by the CSS and the device used to view the web page.
Currently your images width total is 896px and this excludes any padding that you may have added in the CSS. Therefore devices or windows smaller than this number will result in multiple line breaks. To overcome the issue as previous mentioned you want to use percentages.
Below is an example demonstrating how you can adopt width in precentage instead of width in pixels.
/* CSS */
.image-container {
width: 100%;
padding: 0;
margin: 0 auto;
}
.image-container img {
padding: 4px;
width: 100%;
float: right;
}
.image-container.two img {
width: 50%;
}
.image-container.three img {
width: 33.33%;
}
.image-container.four img {
width: 25%;
}
<!-- HTML -->
<!-- 1 image -->
<div class="image-container">
<img src="1.png" alt="Image Description 1">
</div>
<!-- 2 images -->
<div class="image-container two">
<img src="1.png" alt="Image Description 1">
<img src="2.png" alt="Image Description 2">
</div>
<!-- 3 images -->
<div class="image-container three">
<img src="1.png" alt="Image Description 1">
<img src="2.png" alt="Image Description 2">
<img src="3.png" alt="Image Description 3">
</div>
<!-- 4 images -->
<div class="image-container four">
<img src="1.png" alt="Image Description 1">
<img src="2.png" alt="Image Description 2">
<img src="3.png" alt="Image Description 3">
<img src="4.png" alt="Image Description 4">
</div>
How can I add md-icon elements next to inputs like in angular material 1 and this screenshot from google contacts:
Google contacts edit form
I know I can use mdPrefix but I like this style better.
Code example:
<md-input-container>
<md-icon mdPrefix>star</md-icon>
<input placeholder="Test" mdInput />
</md-input-container>
The icon inside the input field and I'd like it to be next to it:
Using some css tricks, I was able make something close to the the provided screenshot.
css to position icons:
/deep/ .mat-icon {
color: grey;
width: 24px;
margin: 20px 40px 0 0;
}
html:
<div style="display: flex">
<md-icon >email</md-icon>
<md-input-container >
<input mdInput placeholder="Email">
</md-input-container>
</div>
Code example
There is a tag in 150x130:
.listings ul li a.thumb{
float:left;
width:150px;
height:130px;
border:#ededed 3px solid;
}
When I save an image I check the image's width and height. with==150 or height==130. And in view:
<a href="#" class="thumb">
if ( checking with is full )
{
<img src="#Url.Content( Path.Combine( "~/Uploads/Products/", #item.ImagePath ) )" style = "width: 150px;" alt="" />
}
if ( checking height is full )
{
<img src="#Url.Content( Path.Combine( "~/Uploads/Products/", #item.ImagePath ) )" style = "height: 130px;" alt="" />
}
</a>
There are images in this <a> tag in different sizes. For example, 100x130, 70x130, 150x140, 150x80 etc. But one of sizes of image equals to one of sizes of a tag. (150 or 130). Square images are not a problem, but different sized images seem to go in bottom or top, right or left side in the <a> tag.
How can place all size images center of the tag?
First, you need to convert the <a> to a block element with display:block.
Second, I would set your thumbnail as a background image instead and use background-position: center center which would cente rit vertically and horizontally
<a href="#" class="thumb"
style="background-image: url('#Url.Content( Path.Combine( "~/Uploads/Products/", #item.ImagePath ) )')"> </a>
Maybe add display: block; to both a and img and then add margin: 0px auto; to your img.
There are differences between HTML 4.01 and HTML5 in the tag.
The layout attributes: align, border, hspace, and vspace were deprecated in HTML 4.01, and are not supported in HTML5!
You have to wrap your tag in an other one and make your CSS do the align like this exemple:
<!DOCTYPE html>
<html>
<body>
<article style="text-align:center">
<img src="img/test.png" alt="test" />
</article>
</body>
</html>