Hi, Dev Team!
I use Cards with "k-card-deck" class. How i can do stretched link in every "k-card" inside "k-card-deck"?
need something like that:
<div class="k-card-deck">
<div class="k-card">
</div>
<div class="k-card"></div>
</div>
Is it possible to put cards inside a div and to filter those cards based on the value it contains and well as sort the cards.?
Is there any demo available for that?
I am using the material theme and here is my adjusted kendo.common.css to get rid of border radius that used to be 4px but I've switched to 0px. I'm attempting to get rid of the slanted borders in the header and footer of the card as shown in the attached image. I just wanted a standard flush border instead of the 45 degree angle cut off.
What do I need to change in the CSS to get this to work right?
.k-card{border-radius:0px;border-width:1px;border-style:solid;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden}
.k-card.k-card-flat{box-shadow:none}
.k-card-header{padding:4px 8px;border-width:0 0 1px;border-style:solid;overflow:hidden}
.k-card>.k-card-header:first-child{border-top-left-radius:0px;border-top-right-radius:0px}
.k-card>.k-card-header:last-child{border-bottom-right-radius:0px;border-bottom-left-radius:0px}
.k-card-header>h1,.k-card-header>h2,.k-card-header>h3,.k-card-header>h4,.k-card-header>h5,.k-card-header>h6{margin:0}
.k-card-body{padding:8px 8px;-ms-flex:1 1 0px;flex:1 1 0}
.k-card>.k-card-body:first-child{border-top-left-radius:0px;border-top-right-radius:0px}
.k-card>.k-card-body:last-child{border-bottom-right-radius:0px;border-bottom-left-radius:0px}
.k-card-body p{margin:0 0 8px}
.k-card-body>.k-last,.k-card-body>:last-child{margin-bottom:0}
.k-card-image{border:0;max-width:100%;overflow:hidden}
.k-card>.k-card-image:first-child{border-top-left-radius:0px;border-top-right-radius:0px}
.k-card>.k-card-image:last-child{border-bottom-right-radius:0px;border-bottom-left-radius:0px}
.k-card-image>img{border:0;max-width:100%}
.k-card-title{margin:0 0 8px}
.k-card-subtitle{margin:0 0 8px}
.k-card-title+.k-card-subtitle{margin-top:-6px}
.k-card>.k-hr{margin:0;-ms-flex:0 0 auto;flex:0 0 auto;border-color:inherit}
.k-card-actions{padding:8px 8px;border-width:0;border-style:solid;border-color:inherit;overflow:hidden;-ms-flex-negative:0;flex-shrink:0;-ms-flex-preferred-size:auto;flex-basis:auto}
.k-card>.k-card-actions:first-child{border-top-left-radius:0px;border-top-right-radius:0px}
.k-card>.k-card-actions:last-child{border-bottom-right-radius:0px;border-bottom-left-radius:0px}
.k-card>.k-card-actions{border-top-width:1px;border-color:inherit}
.k-card-actions>.k-button.k-flat:first-child{margin-left:-8px}
.k-card-action{border-width:0;border-style:solid;border-color:inherit;display:-ms-inline-flexbox;display:inline-flex;-ms-flex:1 1 auto;flex:1 1 auto}
.k-card-action>.k-button{border-radius:0;padding:12px 8px;-ms-flex:1 1 auto;flex:1 1 auto}
.k-card-actions-vertical{padding:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}
.k-card-actions-vertical .k-card-action+.k-card-action{border-top-width:1px}
.k-card-actions-stretched{padding:0;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}
.k-card-actions-stretched .k-card-action+.k-card-action{border-left-width:1px}
.k-card-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:stretch;align-items:stretch;-ms-flex:0 0 auto;flex:0 0 auto}
.k-card-list .k-card{-ms-flex:0 0 auto;flex:0 0 auto}
.k-card-list .k-card+.k-card{margin-top:16px}
.k-card-deck{display:-ms-flexbox;display:flex;margin-top:16px;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:stretch;align-items:stretch;-ms-flex:0 0 auto;flex:0 0 auto}
.k-card-deck .k-card{-ms-flex:0 0 auto;flex:0 0 auto}
.k-card-deck .k-card+.k-card{margin-left:16px}
.k-card-deck-scrollwrap{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center}
.k-card-deck-scrollwrap>.k-button{border-radius:0;-ms-flex:0 0 auto;flex:0 0 auto;position:absolute}
.k-card-deck-scrollwrap>.k-button:first-child{left:-1px}
.k-card-deck-scrollwrap>.k-button:last-child{right:-1px}
.k-card-deck-scrollwrap>.k-card-deck{-ms-flex:1 1 auto;flex:1 1 auto}
.k-card-group{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:stretch;align-items:stretch;-ms-flex:0 0 auto;flex:0 0 auto}
.k-card-group .k-card{border-radius:0;-ms-flex:0 0 auto;flex:0 0 auto}
.k-card-group .k-card>.k-card-header{border-radius:0}
.k-card-group .k-card+.k-card{margin-left:-1px}
.k-card-group .k-card.k-first{border-bottom-left-radius:0px;border-top-left-radius:0px}
.k-card-group .k-card.k-first>.k-card-header{border-top-left-radius:0px}
.k-card-group .k-card.k-last{border-top-right-radius:0px;border-bottom-right-radius:0px}
.k-card-group .k-card.k-last>.k-card-header{border-top-right-radius:0px}
.k-card-group .k-card.k-only{border-radius:0px}
.k-card-group .k-card.k-only>.k-card-header{border-top-left-radius:0px;border-top-right-radius:0px}