Portal HTML Variable

[Mike_R]

How can I change the default height and width of the HTML variable in a catalog item? I want to make the height larger(to get rid of the scrollbar)

[Manish Vinayak1 · Accepted solution]

Hi Mike,

I didn't see any scrollbar when I tried to add HTML field to catalog item (in Madrid). Here is what I see:

If you are having that issue, I don't think there is any out of the box way to increase that size. But you should be able to fix it by applying CSS hack to that page sc_cat_item or maybe to the widget instance itself.

On inspecting, I see it is the mce-edit-area class, which is present in the editor frame. You could try adding CSS for overriding height / max-height, or maybe Overflow CSS to hide the Scroll bar. Once you figure that out, apply that CSS override to widget instance or the page CSS.

Hope this helps!

Cheers,

Manish

[Kailash Bhange]

Hi,

For me below code snippet worked when I needed to re-size height of HTML variable on portal.

If anyone is still lookin for same, please see below.

FOR ALL HTML Variables on cat item: - 

write Catalog client script for catalog item with UI type 'portal' and use below code.

function onLoad() {
var sheets = this.document.styleSheets;
var sheet = sheets[0];
var fieldName= 'iframe';
sheet.insertRule(fieldName+' { height: 500px !important; }');
}

FOR PARTICULAR HTML Variable on cat item(in case cat item has more than one HTML variables)

write Catalog client script for catalog item with UI type 'portal' and use below code.

function onLoad() {
doWait(1);
}

doWait = function(intDelay){
try {
if(this.document.readyState != "complete") {
setTimeout(function(){doWait(intDelay);},100);
} else {
var var_id="4006dd262f223010ff95d8492799b64a"; //sys_id of HTML variable
var sheets = this.document.styleSheets;
var sheet = sheets[0];
var fieldName= this.document.querySelector('[id^="sp_formfield_'+var_id+'"]').id;
sheet.insertRule("#"+fieldName+' { height: 500px !important; }');
}
} catch(e) {
setTimeout(function(){doWait(intDelay);},100);
}
};

Hope this helps.

If my answer resolves your issue, please mark my answer as ✅ Correct & Helpful based on the validations.

Thank You!
Regards,
Kailash