Step:1
=====
Select Textarea Items.
P22078_DELIVERY_LOCATION
P22078_REMARKS
Character Counter: Must be Uncheck
Template: Optional - Floating
Maximum Length: (as Like your database)
Custom Attributes: class="expand-textarea"
Step:2
=====
Page Inline CSS:
==============
/*যখন mouse hover করবে, তখন তা modal dialog-এর মতো বড় হয়ে যাবে*/
textarea.expand-textarea {
height: 3.5em;
transition: height 0.3s ease;
}
textarea.expand-textarea:hover {
height: 10em;
}
/*
textarea#P22078_DELIVERY_LOCATION,
textarea#P22078_REMARKS {
padding-top: 2.2em !important;
}
label[for="P22078_DELIVERY_LOCATION"],
label[for="P22078_REMARKS"] {
font-weight: bold;
}
*/
/* শুধুমাত্র এই দুই আইটেমের জন্য কন্টেইনার স্টাইল */
div[data-item-id="P22078_DELIVERY_LOCATION"] .t-Form-inputContainer,
div[data-item-id="P22078_REMARKS"] .t-Form-inputContainer {
position: relative !important;
margin-top: 10px !important;
}
/* লেবেল স্টাইলিং */
label[for="P22078_DELIVERY_LOCATION"],
label[for="P22078_REMARKS"] {
position: absolute !important;
top: -0.6em !important;
left: 0.8em !important;
font-weight: bold !important;
z-index: 100 !important;
margin: 0 !important;
padding: 0 5px !important;
line-height: 1 !important;
background-color: white !important;
color: #333 !important;
font-size: 0.9em !important;
}
/* টেক্সট এরিয়া স্টাইলিং */
textarea#P22078_DELIVERY_LOCATION,
textarea#P22078_REMARKS {
padding-top: 0.5em !important;
margin-top: 0 !important;
position: relative !important;
z-index: 1 !important;
}
/* কাস্টম ক্যারেক্টার কাউন্টার স্টাইল */
.custom-char-counter {
display: block;
text-align: right;
font-size: 0.8em;
color: #666;
margin-top: 5px;
font-style: italic;
}
#P22078_DELIVERY_LOCATION_counter,
#P22078_REMARKS_counter {
display: none !important; /* ডিফল্ট কাউন্টার লুকানো */
}
Step:3
=====
Function and Global Variable Declaration:
==========================
// Character Counter ফাংশন
function updateCharCounter(textareaId) {
const textarea = $x(textareaId);
if (!textarea) return;
const counterDiv = document.createElement('div');
counterDiv.className = 'custom-char-counter';
counterDiv.id = textareaId + '_custom_counter';
textarea.parentNode.appendChild(counterDiv);
function updateCount() {
const currentLength = textarea.value.length;
counterDiv.textContent = `${currentLength} of 500`;
counterDiv.style.color = currentLength > 500 ? 'red' : '#666';
}
textarea.addEventListener('input', updateCount);
updateCount();
}
// ইনিশিয়ালাইজেশন ফাংশন
function initCustomCounters() {
if (!$x('P22078_DELIVERY_LOCATION_custom_counter')) {
updateCharCounter('P22078_DELIVERY_LOCATION');
}
if (!$x('P22078_REMARKS_custom_counter')) {
updateCharCounter('P22078_REMARKS');
}
}
// পেজ লোড এবং AJAX ইভেন্ট হ্যান্ডলিং
$(document).ready(initCustomCounters);
$(document).on("apexafterrefresh", initCustomCounters);