Skip to Main Content
Feature Request FR-3640
Product Area User Interface
Status CLOSED

4 Voters

Need option for Wrap text for label of the page item

jameernu Public
· Feb 21 2024

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

We reviewed this idea carefully, and while it was interesting, we concluded that due to all the internal implications we need to take into account, it is not feasible in APEX.

Comments

Comments

  • jayson hanes Admin OP 1.4 years ago

    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)

  • jameernu OP 1.4 years ago

    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.

  • ronny.weiss2 OP 1.3 years ago

    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

  • michel.lessard OP 1.2 years ago

    Hi, I had the same situation as you, I solved my problem as follows:

    1. For the lOV I added a data-attribute which contains my key text to display.
    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
    
    1. 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".

    2. 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

  • vincent morneau Admin OP 1.1 years ago

    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.