Stretched link

3 posts, 0 answers
  1. Andrey
    Andrey avatar
    16 posts
    Member since:
    Oct 2019

    Posted 27 Feb Link to this post

    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>

  2. Andrey
    Andrey avatar
    16 posts
    Member since:
    Oct 2019

    Posted 27 Feb in reply to Andrey Link to this post

    sorry for unfinished post))

     

    i mean

    <div class="k-card-deck">
       <div class="k-card">

           some text 1

           <a href="url1">This link1 need to be stretched in parent div, with a cursor:pointer on hover</a>
       </div>
       <div class="k-card">

           some text 2
           <a href="url2">This link2 need to be stretched in parent div, with a cursor:pointer on hover</a>

       </div>
    </div>

  3. Petar
    Admin
    Petar avatar
    201 posts

    Posted 28 Feb Link to this post

    Hi Andrey,

    Please check this Dojo example. It demonstrates how we can implement a stretched link. 

    The targeted functionality is achieved by adding the following CSS definition:

    .stretched-link::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        pointer-events: auto;
        content: "";
        background-color: rgba(0,0,0,0);
    }

    Let me know if the Dojo project demonstrates what you want to implement in the project you are working on. 

    Regards,
    Petar
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top