Search results

Customize the card image title position

Card Image titles are placed as always Bottom-Left Corner only, You can manually customize to placing titles anywhere over the image by adding styles.

razor
controller.cs
/*Razor CodeBlock*/

<script>

function changed(e) {
    let cardEle = document.querySelector('.e-card');
    let titleEle = cardEle.querySelector('.e-card-image .e-card-title');
    titleEle.className = ''
    titleEle.classList.add('e-card-title');
    titleEle.classList.add(e.value.toLowerCase());
}

</script>

            
<div class="e-card">
	<div class="e-card-image">
		<div class="e-card-title">Node.js</div>
	</div>
	<div class="e-card-content">
                    Node.js is a wildly popular platform for writing web applications that has revolutionized web development in many ways, enjoying
                    support across the open source community as well as industry.
    </div>
</div>
<div id="default" style='padding-top:75px;'>

   @Html.EJS().DropDownList("games").Placeholder("Select Position").DataSource((IEnumerable <object>)ViewBag.dataSource).change("changed").Render()

</div>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace WebApplication.Controllers
{
    public class DropDownListController : Controller
    {
        public IActionResult simpledata()
        {
            ViewBag.dataSource = new string[] { "BottomLeft", "TopLeft", "TopRight", "BottomRight"};
            return View();
        }
    }
}