Im trying to add a ripple effect to a card using angular material. The ripple effect works the way it supposed except that it expands the hight of the card when the effect is active.
How can I stop the card from expanding?
<mat-card mat-ripple>
<mat-card-content>This is content</mat-card-content>
</mat-card>
Stackblitz that demonstrates the behaviour
Add a class (i.e. last-child) to the last child of your mat-card (in your case mat-card-content) and define the following style:
.mat-card .last-child {
margin-bottom: 0;
}
The problem is that matRipple adds an zero-height element to the mat-card while Angular Material only removes the margin-bottom from the last child.
If you add the footer element (with or without content) you won't need additional CSS and this will lock the height when activating the ripple effect.
<mat-card mat-ripple>
<mat-card-content>This is content</mat-card-content>
<mat-card-footer></mat-card-footer>
</mat-card>
should be as easy as adding matRipple to the mat-card
<mat-card class="action-card" matRipple>
<mat-card-title>
{{content}}
</mat-card-title>
<mat-card-content>
desc
</mat-card-content>
</mat-card>
make sure you inject the MatRippleModule into your module.ts though, that threw me off for a while
Use a div -Tag inside of mat-card -Tag. This Fix my issue.
Related
I'm having trouble trying to use the Vue.Draggable library. I would like to use a component inside my draggable while keeping the transition-group. It's working without the transition group but whenever Im adding the transition-group tag with the animation name its not working anymore. My components elements are not showing up and I'm having this error :
TypeError: Cannot set properties of null (setting '__draggable_context')
Here is my code :
<draggable :list="teams" item-key="idteam" tag="transition-group" :component-data="{name:'fade'}>
<template #item="{ element, index }">
<my-team :id="element.idteam" :name="element.teamName" :index="index">
</my-team
></template>
</draggable>
Any idea how could I make all work together ?
Thanks for your help
You need to add :animation="200"; only adding tag="transition-group" is not enough.
I have a b-table with centered column headers. The headers are centered when I run locally at http://localhost..., but not in deployment. Why might this be?
I have tried two approaches to centering the headers.
I have added the text-center prop to the b-table component like this...
<b-table
striped
hover
show-empty
sort-icon-left
:items="items"
:fields="fields"
class="text-center"
>
</b-table>
I have included this style rule in my custom scss file, which I import into the app at App.vue
table {
text-align: center;
}
Both approaches work just fine locally, but when I deploy the column headers are aligned right.
Here is a sceenshot from my elements tab in the browser inspection tool.
And the styles tab makes it clear that a text-align: right rule in the tag selector overrides the text-align:center rule in the tag selector.
text-align is an inherited property.
Which means that, when resolving this property for an element, the browser looks for any rules targeting that element first. The element in question is a <th>.
If the browser finds any such rules, it applies the one with the highest selector specificity or the last one from rules with equal specificity.
If no such rules exist, then it inherits the value from the closest parent which has a text-align specified value.
If no ancestor has a text-align value, it defaults to start, which means left for documents with direction="ltr" and right for documents with direction="rtl".
So, basically, the CSS applied to one of the ancestors by Bootstrap:
.text-center {
text-align: center !important;
}
...gets overridden by the following rule applied on the actual element:
th { text-align: right }
regardless of the specificity of the parent rule (because it doesn't target the element directly).
To override the th rule you could use:
table.text-center * {
text-align: center
}
... because table.text-center * has a higher specificity than th and they both target the element (the <th>).
Obviously, if you only want to apply the centering to <th> elements, you should replace * with th in the above selector.
To answer your question on why would it work on local and not on remote: your remote has additional CSS (in app.ee70fc50.css), which resolves text-align value for <th> elements, therefore the parent value is ignored (while on local the parent value is inherited, because you don't apply CSS to <th>s).
We are running Vue 2.x with vuetify and trying to figure out how to set some conditional, custom styling for unchecked checkboxes on a table for viewing/creating/updating user permissions. The roles are defined something like this:
Role A View and Role B Edit are being added. The gray boxes are permissions that have not changed. This is working as desired.
The issue is that I can't figure out how to assign color/style/class to the unchecked boxes so that we can mark revoked permissions with an empty red checkbox so that if manage were unchecked the last row would look like:
We are using but have also tried css overrides on . We have tried using css classes, :color, :fill, :style but nothing is working to get the box outline red.
This is what we currently have and is working for the checked boxes:
<template v-slot:item.view.id="{ item }">
<v-simple-checkbox
v-if="item.view.id"
v-model="item.view.active"
:disabled="!edit"
:color="getCheckboxColorForRole(item.view)"
#click="updateRolesRow(item, 'view')"
>
</v-simple-checkbox>
</template>
where getCheckboxColorForRole compares the initial vs current state and returns the appropriate color to display.
What am I missing here?
can you please provide some code? basically this is style binding
per #Anatoly I looked into the scoped css again and was able to get it to work. But then made it a global css rule so that I can use the scss var for the color and apply this on other pages. This is what I ended up with:
<template v-slot:item.view.id="{ item }">
<v-checkbox
v-if="item.view.id"
v-model="item.view.active"
:disabled="!edit"
:color="getCheckboxColorForRole(item.view)"
:class="[{'group-role-checkbox-original-checked': item.view.originalActive}]"
:ripple="false"
#click="updateRolesRow(item, 'view')"
>
</v-checkbox>
Had to switch it to <v-checkbox> since the simple checkbox wasn't allowing me to add classes. Then I checked/unchecked a few times and noticed that the only change is that the gray--text class is removed when unchecked. So then I added this css rule:
.group-role-checkbox-original-checked i:not(.gray--text) {
color: $anchor-color !important;
}
If anyone knows of a better way to do this I would love to know.
I am new to div stylesheet and i only discovered how to use :
margin-top/left/right/bottom.
What is the position used for ?
What is left/right/top/bottom attrib used for?
What is display used for?
Is there any other attrib which i need to take note of/usage for positioning my div ?
Regards
http://www.w3schools.com/css/pr_class_position.asp
http://www.w3schools.com/css/pr_pos_left.asp
http://www.w3schools.com/css/pr_class_display.asp
http://www.w3schools.com/css/css_positioning.asp
margin is in relation to the closest container while left/right... is in relation to the entire page.
Display determines if the object is visible/hidden or how the element behaves. Like display: inline means the elements will display on the same horizontal plane if possible.
From CSS's trick image wipe >>> http://css-tricks.com/webkit-image-wipes/
I have tried the technique above but with no success only when I use :
<div><span id="image"></span></div>
instead of
<div><img src="" /></div>
Has anyone ever tried this before? Is there a workaround?
Thanks for the help.
Your span tag is not closed. You've written </span instead of </span>
Edit
check this
http://jsfiddle.net/sandeep/jqacs/5/
i am use color instead of image because they are not working but it's doesn't matter.
Changes
i remove position:absolute & z-index from span id's tunnel_mask1 & tunnel1 .So, in span i given display:block .
Note: if it necessary to give position:absolute to your span id then give animation properties in #tunnel1 instead of div:nthchild(2)*