I am trying to make a GridLayout with a label and 5 images. The 5 images should have (approx) the same size as the label. My code (currently):
<GridLayout columns="*,*,*,*,*,*" rows="*,*">
<Label col="0" row="0" class="segment-rating-label" [text]="'RATING_AVG'|translate">
</Label>
<!-- The images are starting here -->
<Image src="{{ avg_rating_imageurls[0] }}" col="1" row="0" class="star-image" (onTap)="logTap()">
</Image>
<Image src="{{ avg_rating_imageurls[1] }}" col="2" row="0" class="star-image">
</Image>
<Image src="{{ avg_rating_imageurls[2] }}" col="3" row="0" class="star-image">
</Image>
<Image src="{{ avg_rating_imageurls[3] }}" col="4" row="0" class="star-image">
</Image>
<Image src="{{ avg_rating_imageurls[4] }}" col="5" row="0" class="star-image">
</Image>
<!-- and end here -->
<Label col="0" row="1" class="text-details segment-content" [text]="'RATING_USER'|translate">
</Label>
<!-- and here is another stack of images -->
<Image src="{{ user_rating_imageurls[0] }}" col="1" row="1" class="star-image" (onTap)="rateFromUser('1')">
</Image>
<Image src="{{ user_rating_imageurls[1] }}" col="2" row="1" class="star-image" (onTap)="rateFromUser('2')">
</Image>
<Image src="{{ user_rating_imageurls[2] }}" col="3" row="1" class="star-image" (onTap)="rateFromUser('3')">
</Image>
<Image src="{{ user_rating_imageurls[3] }}" col="4" row="1" class="star-image" (onTap)="rateFromUser('4')">
</Image>
<Image src="{{ user_rating_imageurls[4] }}" col="5" row="1" class="star-image" (onTap)="rateFromUser('5')">
</Image>
<!-- ending here -->
</GridLayout>
My css classes for these:
.star-image {
width: 20;
margin: 10;
}
.segment-rating-label {
min-width: 100;
margin-left: 10;
margin-right: 20;
}
Sadly the GridLayout has for every column the same size. How can I influence these?
Change *,*,*,*,*,* to *5,*,*,*,*,* and see the magic happen!
Those stars have a relative size, compared to other stars - so *5 means "take up 5 times the space of a regular *".
Related
I'm designing a product detail page with React and Material UI. I tried to make the page responsive. But the description section keeps overlapping over the image until the screen is reduced to the mobile size. The content gets stacked at that point, but the images and text are not adjusting to the screen size.
I feel like it's something wrong with the image styling. How do I get the images to be responsive?
Here's my code
styling section
const useStyles = makeStyles((theme) => ({
content: {
flexGrow: 1,
padding: theme.spacing(3),
},
toolbar: {
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
padding: theme.spacing(0, 1),
// necessary for content to be below app bar
...theme.mixins.toolbar,
},
}));
function
export default function ProductDetails() {
const classes = useStyles();
return (
<main className={classes.content}>
<div className={classes.toolbar} />
<Grid container spacing={3}> {/* image and description container */}
<Grid item xs={12} sm={6}> {/* image container */}
<Grid> {/* preview image */}
<img src="luxury-watch.jpg" width="600" id="preview" alt="" />
</Grid>
<Grid> {/* sub images */}
<img src="luxury-watch.jpg" width="140" id="img1" alt="" />
<img src="luxury-watch.jpg" width="140" id="img2" alt="" />
<img src="luxury-watch.jpg" width="140" id="img3" alt="" />
<img src="luxury-watch.jpg" width="140" id="img4" alt="" />
</Grid>
</Grid>
<Grid item xs={12} sm={6}> {/* description container */}
<div>
<h1>ROLEX</h1>
<p> .... </p>
<h2><span><sup>$</sup></span>1250</h2>
<Button variant="contained" color="secondary">ADD TO CART</Button>
</div>
</Grid>
</Grid>
</main>
);
}
I think you've missed a few props on your Grid elements. Try this:
export default function ProductDetails() {
const classes = useStyles();
return (
<main className={classes.content}>
<div className={classes.toolbar} />
<Grid container spacing={3}> {/* image and description container */}
<Grid item container xs={12} sm={6}> {/* image container */}
<Grid item> {/* preview image */}
<img src="luxury-watch.jpg" width="600" id="preview" alt="" />
</Grid>
<Grid item> {/* sub images */}
<img src="luxury-watch.jpg" width="140" id="img1" alt="" />
<img src="luxury-watch.jpg" width="140" id="img2" alt="" />
<img src="luxury-watch.jpg" width="140" id="img3" alt="" />
<img src="luxury-watch.jpg" width="140" id="img4" alt="" />
</Grid>
</Grid>
<Grid item container xs={12} sm={6}> {/* description container */}
<div>
<h1>ROLEX</h1>
<p> .... </p>
<h2><span><sup>$</sup></span>1250</h2>
<Button variant="contained" color="secondary">ADD TO CART</Button>
</div>
</Grid>
</Grid>
</main>
);
}
You can't apply xs attribute if your Grid items isn't a container and you console should be warning you about that too
You can use material ui breakpoints for responsiveness
const useStyles = makeStyles((theme) => ({
content: {
flexGrow: 1,
padding: theme.spacing(3),
},
toolbar: {
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
padding: theme.spacing(0, 1),
// necessary for content to be below app bar
...theme.mixins.toolbar,
[theme.breakpoints.down('lg')]:{
width:'60%',
},
[theme.breakpoints.up('lg')]:{
width:'60%',
}
}
}));
I am trying to set equal height for every single item in the list. Here as you can see in the picture some channels have companion channels(e.g CNN & HLN, BNN & CP24), they are having a different height setting as compared to the channels without any companion channels. How do I make it the same height? The second thing I am trying is to not have any channels get in the line of the alphabets(e.g the Cottage Life channel gets more to the left which gets in the line of the alphabets). Also how do I put a space between rows, I tried putting in which didn't work(e.g after the A head and its channels row i need to put a blank space).
<div class="container col-lg-8" style="float:Left">
<ul class="w3-ul w3-card-4" *ngFor="let head of channelDisplayHeads" style="clear:both">
<h1 align="center" style="background-color:#0083BC;">
<font color="white">{{ head }}</font>
</h1>
<ul *ngFor="let channel of channelList">
<li class="list-group-item logoDisplay" *ngIf="channel.channel.substr(0, 1) === head">
<div *ngIf="channel.compChannel.compChannelLogo.length !== 0; else noCompChannel">
<img class="img-rounded" src="{{ channel.logo }}" alt="{{ channel.channel }}">
<img class="img-rounded" src="{{ channel.compChannel.compChannelLogo }}" alt="{{ channel.channel.compChannelName }}">
</div>
<ng-template #noCompChannel>
<img class="img-rounded" src="{{ channel.logo }}" alt="{{ channel.channel }}">
</ng-template>
<br>
<span class="w3-left">
<mark>
<font size="1">{{ channel.cbsCode }}</font>
</mark>
</span>
<span class="w3-right">
<font size="2">{{ channel.pickCode }}</font>
</span>
</li>
</ul>
</ul>
</div>
I am trying to group some img's with a border.
As you see in the picture below the BNN & CP24 are combo channels and I used div element to create that border. The only issue I have here is when I use div element it changes the size of the combo channels. Here the BNN & CP24 combo channel is slightly taller than the individual channels. I dont have any CSS attached to the div element. Code with the div element below.
<div *ngIf="channel.compChannel[0].compChannelLogo.length !== 0; else noCompChannel">
<img class="img-rounded" src="{{ channel.logo }}" alt="{{ channel.channel }}" width="100" height="100">
<img class="img-rounded" src="{{ channel.compChannel[0].compChannelLogo }}" alt="{{ channel.compChannel[0].compChannelName }}"
width="100" height="100">
</div>
<div #noCompChannel>
<img class="img-rounded" src="{{ channel.logo }}" alt="{{ channel.channel }}" width="100" height="100">
</div>
But when i use ng-container I get actual size but I am not able to create a border on the combo channels. code with ng-container below.
<ng-container *ngIf="channel.compChannel[0].compChannelLogo.length !== 0; else noCompChannel">
<img class="img-rounded" src="{{ channel.logo }}" alt="{{ channel.channel }}" width="100" height="100">
<img class="img-rounded" src="{{ channel.compChannel[0].compChannelLogo }}" alt="{{ channel.compChannel[0].compChannelName }}"
width="100" height="100">
</ng-container>
<ng-template #noCompChannel>
<img class="img-rounded" src="{{ channel.logo }}" alt="{{ channel.channel }}" width="100" height="100">
</ng-template>
I tried to use a Button with some Images next to it. All these should be within one row in a GridLayout. My html:
<GridLayout colums="4*,*,*,*,*,*" rows="*">
<Button text="send rating" (onTap)="rateIt()" col="0" row="0" class="send-rating-button"></Button>
<Image src="{{ user_rating_imageurls[0] }}" col="1" row="0" class="star-image" (onTap)="rateFromUser('1')"></Image>
<Image src="{{ user_rating_imageurls[1] }}" col="2" row="0" class="star-image" (onTap)="rateFromUser('2')"></Image>
<Image src="{{ user_rating_imageurls[2] }}" col="3" row="0" class="star-image" (onTap)="rateFromUser('3')"></Image>
<Image src="{{ user_rating_imageurls[3] }}" col="4" row="0" class="star-image" (onTap)="rateFromUser('4')"></Image>
<Image src="{{ user_rating_imageurls[4] }}" col="5" row="0" class="star-image" (onTap)="rateFromUser('5')"></Image>
</GridLayout>
Sadly it is placing the Button over the complete row and the images. Did I miss something when defining the rows/columns?
The Button and Image css:
.star-image {
width: 30;
margin: 10;
}
.send-rating-button {
margin-left: 30;
margin-right: 10;
background-color: yellow;
border-color:black;
border-width: 1;
max-width: 100;
}
Edit: I should perhaps clarify what he does. Instead of inserting each element into one cell of the GridLayout, all of the elements are shown in the center of the line above each other.
Edit2: I have no idea why it did not work before. The working code.
<GridLayout columns="*4,*,*,*,*,*" rows="*">
<Button col="0" row="0" [text]="'RATING_AVG'|translate" class="send-rating-button" (onTap)="rateIt()"></Button>
<Image src="{{ user_rating_imageurls[0] }}" col="1" row="0" class="star-image" (onTap)="rateFromUser('1')"></Image>
<Image src="{{ user_rating_imageurls[1] }}" col="2" row="0" class="star-image" (onTap)="rateFromUser('2')"></Image>
<Image src="{{ user_rating_imageurls[2] }}" col="3" row="0" class="star-image" (onTap)="rateFromUser('3')"></Image>
<Image src="{{ user_rating_imageurls[3] }}" col="4" row="0" class="star-image" (onTap)="rateFromUser('4')"></Image>
<Image src="{{ user_rating_imageurls[4] }}" col="5" row="0" class="star-image" (onTap)="rateFromUser('5')"></Image>
</GridLayout>
As Marek mentioned in his comment the issue is because you are setting the first column to have a width of 4 DP (device independent pixels) due to syntax error. You can either assign greater DP value for your first row or assign relative width using 4* (means this column will be 4 times wider than column set with *)
<GridLayout colums="4*,*,*,*,*,*" rows="*">
I tried around a bit and I have no idea why the "new" code works and the older did not. I posted the working code as update into the question.
i was looking to find out how i can add a different image when i hover over a particular image in Shopify. I currently have the following code in my theme.liquid file, but i am not sure how i can add some mouseover code to show a different image.
<div class="site-header__phone">
{{ 'phone-icon.png' | asset_url | img_tag }}
</div>
Mostafa,
The following is what i have wrote as it is a hover on an icon that i am adding and not a product, but the page shows " /> " /> which is incorrect..
<div class="site-header__phone">
<a href="tel:123456789">
<img class="phone" src="{{ 'phone-icon.png' | asset_url | img_tag }}" />
<img class="phone_hover" src="{{ 'phone-icon-h.png' | asset_url | img_tag }}" />
</a>
</div>
and the css being:
.site-header__phone {
margin-top:6px;
margin-left:15px;
}
.site-header__phone a img.phone_hover { display: none; }
.site-header__phone a:hover img.phone { display: none; }
.site-header__phone a:hover img.phone_hover { display: block; }
any ideas where i have gone wrong?
try this hope it will work for you. Give the Html part like this
<div class="image">
<a href="{{ url }}">
<img class="first" src="{{ product.images[0] | product_img_url: 'large' }}" alt="{{ product.title | escape }}" />
<img class="second" src="{{ product.images[1] | product_img_url: 'large' }}" alt="{{ product.title | escape }}" />
</a>
</div>
And styles.css stylesheet like this
.product .image a img.second { display: none; }
.product .image a:hover img.first { display: none; }
.product .image a:hover img.second { display: block; }