Jump to content

Search the Community

Showing results for tags 'select input'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Caspio Bridge
    • Caspio Apps for Ukraine
    • General Questions
    • Caspio JavaScript Solutions
    • Tables, Views and Relationships
    • Import/Export and DataHub
    • DataPages
    • Deployment
    • Security, Authentications, Roles, SAML
    • Styles and Localizations
    • Parameters
    • API and Integration
    • Calculations and aggregations
    • User JavaScript and CSS Discussions

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


MSN


Website URL


ICQ


Yahoo


Skype


Location


Interests

Found 1 result

  1. Hi there! I had a use case where drop-down input contained long lines of text. By default, a long line of text inside select input is getting cropped at the right. But it was required to keep the full text visible. I wrote the script that can be used as it is to solve this problem. Just copy and paste the code below into your form data page header. <script> document.addEventListener('DataPageReady', _=>{ const mainFunction = _=> { hideSelectContainers() addVirtualSelectOptions() addVirtualSelectOptionsListeners() addVirtualSelectOptionsContainerListeners() addStyles() } const hideSelectContainers = _=> { document.querySelectorAll('.cbFormSelect').forEach(item=> {item.style = "display: none;"}) } const virtualSelectContainerGenerator = selectElement => { let template = ''; selectElement.querySelectorAll('option').forEach(option=>{template += `<div value="${option.getAttribute('value')}" class="virtualOption">${option.innerHTML}</div>`; option.classList.add("hideElement")}) return `<div class="virtualSelectContainer"> <div class="virtualSelect"> <span class="virtualSelectText">${selectElement.value}</span> <div class="virtualOptionContainer hideElement">${template}</div> </div><span class="custom-arrow"></span></div>`; } const addVirtualSelectOptions = _=> { document.querySelectorAll('[class*="cbFormBlock"]').forEach( item =>{ if(item.querySelector('select')!=null) { item.insertAdjacentHTML('beforeend', virtualSelectContainerGenerator(item.querySelector('select'))) } }) } const addVirtualSelectOptionsListeners = _=> { document.querySelectorAll('.virtualOption').forEach( option => { option.addEventListener('click', e=> { let realOption = document.querySelector(`[value="${e.target.getAttribute('value')}"]`); realOption.parentElement.selectedIndex = realOption.index e.target.parentElement.parentElement.querySelector('.virtualSelectText').innerText = e.target.innerText; e.target.parentElement.classList.toggle("hideElement"); }) }) } const addVirtualSelectOptionsContainerListeners = _=> { document.querySelectorAll('.virtualSelectContainer').forEach( item =>{ item.addEventListener('click', e => { let clickedElement = e.target; if (clickedElement.classList.contains('virtualSelectContainer')) { clickedElement.querySelector('.virtualOptionContainer').classList.toggle('hideElement'); } else if (clickedElement.classList.contains('virtualSelectText')) { clickedElement.nextElementSibling.classList.toggle('hideElement'); } else if (clickedElement.classList.contains('custom-arrow')) { clickedElement.previousElementSibling.classList.toggle('hideElement'); } }, true) }) } const addStyles = _=> { let style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = ` .virtualSelectContainer { position: relative; max-width: 800px; --custom-paddings: 1em 5.5em 1em 1.5em; box-sizing: border-box; color: white; white-space: normal; } .virtualSelectContainer:hover { cursor: pointer; } .virtualSelect { box-shadow: 0 10px 20px rgba(0,0,0,1); font-size: 1.1rem; background: #4d5061; border: 0; max-width: 100%; } .hideElement { display: none; } .virtualOption { padding: var(--custom-paddings); margin-top: 10px; overflow: hidden; } .virtualOption:hover { background: #4A65FF; color: white; } .virtualSelectText { display: block; padding: var(--custom-paddings); } .custom-arrow { display: block; background-color: #3b3c47; height: 100%; width: 5rem; position: absolute; right: 0; top: 0; pointer-events: none; } .custom-arrow::before, .custom-arrow::after { z-index: 10; --size: .65em; content: ''; position: absolute; width: 0; height: 0; left: 50%; transform: translate(-50%, -50%); } .custom-arrow::before { border-left: var(--size) solid transparent; border-right: var(--size) solid transparent; border-bottom: var(--size) solid rgba(255,255,255,.5); top: 40%; } .custom-arrow::after { border-left: var(--size) solid transparent; border-right: var(--size) solid transparent; border-top: var(--size) solid rgba(255,255,255,.5); top: 60%; } .cbSubmitButtonContainer .cbSubmitButton { background-color: #4d5061; box-shadow: 0 10px 20px rgba(0,0,0,1); } .cbSubmitButtonContainer .cbSubmitButton:hover { background-color: #4A65FF; }`; document.querySelector('head').appendChild(style);} mainFunction() }) </script> It is currenlty deployed on this test page: https://c7eku786.caspio.com/dp/7f80b000aa77201adc02489f8c6d Hope someone will find this useful.
×
×
  • Create New...