<div rv-data-cart-update-id="item.id" rv-data-cart-update="item.quantity | minus 1" style="position: absolute; top: -2px; right: 4px; cursor: pointer;" data-cart-update-id="12541069361194" data-cart-update="3">
<img src="//cdn.shopify.com/s/files/1/2556/0186/files/180424_cross_10x10.png?7401277007178548701" alt="">
</div>
I have a thumbnail displaying the quatity of a products, and when the cross is pressed it should remove one item only, and display 3 (data-cart-update="3") but it removes all bar one.
You are perhaps rendering your code incorrectly in your question, although who knows with SO. If you were thinking this code made sense, it does not. Try using Liquid in your code.
Your line: rv-data-cart-update="item.quantity | minus 1"
Try: rv-data-cart-update="{{item.quantity | minus 1}}"
Related
As the title says I'm trying to use "text-align: center;", but it isn't working on a specific block of text. It works on others, so I'm confused about that. I'm a complete noob lol (have been learning HTML and CSS for about 5 days), and decided to use my knowledge to get an easy 100 on the project. Bear with me, please. It's that's causing the issue.
CSS:
p4 {
text-align: center;
}
HTML:
<p4>
Over here, we have an economy consisting<br> of mostly fishing, shipbuilding, wheat<br> growing, and fur trapping. There are<br> many different economic opportunities.
</p4>
(Sorry, I didn't know what to really put, so you should probably check out the complete code, it's near the bottom: https://codepen.io/fishstick_god_/pen/ZEWjLyX)
text-align: center aligns the text to the center of the element, in your case the p4 element isn't the full width of the page so its only centering to the width of the content. Easy fix is to add display: block to your p4
p4 isn't a valid HTML tag, so the browser isn't clear how to display it. You should just use p as the tag for all instances of paragraphs. If you want to style one of those paragraphs specifically and differently from the other paragraphs, then also include a class attribute with the tag, like this in the HTML:
<p class="special">
Then, in the CSS, you create a class selector, like this
.special { text-align: center; }
You can place that same HTML class on any text-containing tag (like p, h1, li, etc.) and it will center those.
Note that you can't text-align: center; any tags that don't have a default display of block, like an a tag or an img tag. Also, you can't center structural tags (like div, header, nav, etc.) with text-align: center; because, well, they aren't text. There are other choices you can make in the CSS to center those.
text-align works on so-called block level elements. Like div or p. See, e.g., https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
p4 does not qualify. Try plain p:
<p style='text-align: center'>Hello World!</p>
I have a card component that I would like to show in rows and columns, I haven't been able to figure it out, I would want to do it without using any dependencies if possible. I want a simple grid like 4 or 5 per row and adding a new row when necessary.
These components are to display the categories created by the user, the amount will change because on this page is where the user can create more, update them or delete the categories.
Right now I'm displaying them simply like this but they're all just one on top of the other
<div v-for="(category, index) in categories" :key="index">
<category_component :category="category" v-on:delete="confirmDelete" v-on:edit="editItem"/>
</div>
Is there a simple way to display them a certain number per row dynamically?
Edit:
I added some flex parameters as suggested like this
<div class="category-container">
<div v-for="(category, index) in categories" :key="index">
<category_component :category="category"
v-on:delete="confirmDelete" v-on:edit="editItem"/>
</div>
</div>
.category-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
Now it is displaying in rows but is there a way to limit the amount per row? It's displaying 6 but they are really pushed together and then the row below they are far apart. Ignore the new button.
i have unknown number of card i want to ngfor on them and display every two card in one row
<mat-card class="example-card">
<mat-card-header>
<div mat-card-avatar class="example-header-image"></div>
<mat-card-title>{{user.firstName}}</mat-card-title>
<mat-card-subtitle>{{user.lastName}}</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p>
The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
bred for hunting.
</p>
</mat-card-content>
<mat-card-actions>
</mat-card-actions>
</mat-card>
i'm using angular 5 and material design 6
is there anyway to do that ?
Spent hours on this... turned out to be trivial: simply add float:left to your class CSS. In my case it looked like this:
.example-card {
max-width: 300px;
margin-bottom: 50px;
float: left;
}
Try adding display: inline-block !important to your .example-card class.
I am using bootstrap in a fairly straightforward way, and I have a color specified in my row divs, e.g. which colors the entire row with the danger color, but on the desktop, I am only populating about 6 col-md's worth of data, and the extra color extending past where the actual data is displayed, looks funny.
On mobiles its fine, because the actual data is taking up the full row.
So, I want to be able to apply the background color to only col-md-8 of my rows when the web page is displayed on a desktop.
I tried adding the background to the individual cells, but since each of the cells is not a uniform height that didn't work either.
I tried specifying the row as being only col-md-8, but then that affects the size of all the other columns.
Do I just have to accept that I will have to change the md column sizes to take into account that they are now in a col-md-8 row?
Is there an easy to accomplish what I want?
Here is a sample of the code:
<div class="container">
<div class="row bg-danger">
<div class="col-md-3">.col-md-1</div>
<div class="col-md-2">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
There are only 7 columns of data, but the danger background is on the whole row.
Ah, now I see what you are after. Just take the target row and make it display:table; then you can get the equal height columns with display:table-cell;
jsFiddle here
.row {
display: table;
}
.row > div {
float: none;
display: table-cell;
}
Note: You can put this inside a media query if you only want the effect to happen at a certain screen size. (see this fiddle)
You could use your own CSS classes, to accomplish what you need.
Also, you could add the col-lg-6 class to the row.
Post your HTML code, otherwise it's really hard to help
(Related to other post with minor refinements and perhaps slightly different use case then that one?).
This took hours to narrow down what specifically in my page's HTML/CSS combination was causing IE9 to crash with the
"Internet Explorer has stopped working" error (if I choose to debug, the specific error was "Unhandled exception at 0x602508cb in iexplore.exe: 0xC0000005: Access violation reading location 0x00000018." IE 8 did not crash. I narrowed it down to the following:
To reproduce, create an HTML page with this (seemingly) simple table:
<table>
<tr>
<td colspan="2">
TEST ROW
</td>
</tr>
<tr class="tr1" id="tr1">
<td class="blank">
test
</td>
<td>
test
</td>
</tr>
</table>
Add this CSS:
<style>
.tr1 td, th
{
border: 1px solid Black;
}
td.blank
{
border:0 !important;
}
table
{
border-collapse: collapse;
}
</style>
Add this button (or any other mechanism) to hide the second row:
<input type="button" onclick="document.getElementById('tr1').style.display='none';"
value="Hide Table Row" />
If you click the button, you will reliably reproduce the IE9 bug.
Anyway, I wanted to post this bug because I could not find a single posting that matched the error code "Unhandled exception at 0x602508cb in iexplore.exe: 0xC0000005: Access violation reading location 0x00000018." and hope this helps the next guy.
Does anyone else have any workarounds they want to contribute? Have you come accross this bug? Anyone in the IE 10/Windows preview group know if IE 10 has same issue?. If not, would you mind filing this as a bug?
Here are some workarounds - all of them work but might not be appropriate for your situation:
remove !important from blank 0 border (I could not use this solution because I truly needed no border - it was important - pun intended ;) )
OR make border 1px solid White instead of border 0 (this is solution I used and in a way makes sense that borders should not go from 1px to 0px and is probably the root of the bug in IE9 I'd guess?)
OR get rid of border-collapse: collapse; (I couldn't use this because I wanted them collapsed)
OR get rid of colspan (I couldn't because I needed it)
OR take up knitting instead of writing Software for constantly changing browsers (again, I couldn't because I don't like knitting;) )
Thanks #AdamE... your workarounds were a big help.
I am in the same position: I need to hide a row on a table with collapsed borders and the occasional colspan (....and I don't like knitting either :)
I used an equivalent of Xrumet's answer to temporarily apply your/his workaround:
$myTable.css("borderCollapse", "separate");
$myRow.hide();
$myTable.css("borderCollapse", "");
Does the job.