Textarea Item Customs Design

 



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);


Post a Comment

Previous Post Next Post