Idea Summary Need option for Wrap text for label of the page item
Use Case For creating the Survey Questions, the question will be very long as label and user will input in the field
Preferred Solution (Optional) Wrap Text
Hi @jameernu it seems to me that this can be easily achieved with normal application of CSS rules. Do you have a particular example you can share?
Also, are you familiar with the Universal Theme (UT) utility classes? Content Modifiers - Universal Theme (oracle.com)
Thanks for your feedback,
Yes wrap text is working with CSS but it is not working properly for radio group item even the height is increased. I need the options to be displayed as ‘Optional - floating’ as template. If it is Optional it will works fine without any additional CSS.
Is it maybe an option to just label the Item with “Question 1…” and to use for the question the pre or post text? Sometimes these questions can be very long so you maybe need also something like toggling them and this is very is to solve in pre or post text
Hi, I had the same situation as you, I solved my problem as follows:
select vc.name_val_code || '<div data-option="'|| vc.co_value || '"></div>' as d, vc.co_value as r from pilv_value_code vc where co_directory = 'CO_TYP_OPTION_TRAVAUX' and vc.co_systeme = 'DEM' and (vc.dt_suspension is null or vc.dt_suspension >= utl_fnb_obt_dt_prodc('PIL', 'DS')) order by vc.no_ord_value_code
Then I put "shq-option-dynamique" classe in the advanced settings of my radio-box item to detect if I should apply the text that was placed in my data-option="MyKeyText".
Create a javascript function that retrieves the text and positions it for my option.
(function (shq, pad, ut, $) { const ITEM_CLASS_OPTION = '.shq-option-dynamique'; const DATA_CLEF_OPTION = '[data-option]'; const DATA_CLEF_OPTION_ITEM = '[data-option=%s]'; const DATA_OPTION = 'data-option'; const AJAX_PROCESS = 'OBTENIR_TEXTE_OPTION'; /** * Fonction qui va chercher les textes des options dynamiques. * Spécifier la class shq-option-dynamique dans la section advance, option class */ pad.ajouterTexteOptionRadio = function () { const elementRadio = document.querySelectorAll(ITEM_CLASS_OPTION); const dataOptions = new Map(); /** * Recherche les inputs radio ayant la class shq-option-dynamique */ elementRadio.forEach(elementRadio => { const arrayClefOption = []; const elementClefOption = elementRadio.querySelectorAll(DATA_CLEF_OPTION); /** * Pour chaque input radio recherche les options ayant l'attrribut data-option * On les insère dans une Map avec comme clé l'id du input radio et comme valeur les options. */ elementClefOption.forEach(element => { const dataOption = { cleOption: element.getAttribute(DATA_OPTION), htmlOption: "" }; arrayClefOption.push(dataOption); }); dataOptions.set(elementRadio.getAttribute('id'), arrayClefOption); apex.debug.log("Map des options radio pour le call AJAX", dataOptions); }); /** * Pour chaques options on va chercher le texte correspondant dans la base de données. */ dataOptions.forEach((value,key) => { const idItemOption = DIESE.concat(key); const itemOption = document.querySelector(idItemOption); const arrayCleOption = []; value.forEach((value,key) => { arrayCleOption.push(value.cleOption);}); let result = apex.server.process(AJAX_PROCESS, { f01: arrayCleOption }); result.done(function (data) { apex.debug.log("Data Json ",data); data.dataOptions.forEach(dataOption => { apex.debug.log("Ligne data Json ",dataOption.cleOption,dataOption.htmlOption); const selectionDataOption = DATA_CLEF_OPTION_ITEM.replace('%s', dataOption.cleOption); const elementOption = itemOption.querySelector(selectionDataOption); const parentElement = elementOption.parentElement; parentElement.insertAdjacentHTML("afterend", dataOption.htmlOption); }); }).fail(function( jqXHR, textStatus, errorThrown ) { apex.debug.error("Une erreur c'est produite pour l'obtention des textes des options",textStatus); }); }); }; })(shq, shq.dem_pad_public, apex.theme42, apex.jQuery);
Here is the result:
https://drive.google.com/file/d/17HSuTi4fF_MMr31yVdPzs3wsML0ugxPh/view?usp=sharing
The team discussed this idea today. Floating labels are restricted to 1 line of text for the label right now and it does not support wrapping.