Scenario:- Legacy code thrown at you with new UX design, and you cannot touch the original code. So doing latest UI changes is headache.
Solution:- Play with the structure of the html and add latest flexbox or grid CSS to make your life hell easier.
How i did re-structuring was appending new parent div, which can be set as “display:flex” so child div’s can be aligned easily.
Sample code, from this you can get an idea how new parent is added with its own CSS class.(which can be used to redesign the UI)
// function to get form elments by ID/Class function getElement(type,name) { if(type ==='ID'){ return document.getElementById(name); }else{ return document.getElementsByClassName(name); } } // function doing the restructuring function reFormMe() { const ID = 'ID', CLASS_NAME = 'CLASS'; // Getting the values of existing div's getElement('ID','FirstName').value = "<?php echo $firstName ?>"; getElement('ID','LastName').value = "<?php echo $lastName ?>"; getElement('ID','Company').value = "<?php echo $company ?>"; getElement('ID','Email').value = "<?php echo $email ?>"; // change email/phone field width getElement('ID','Email').style.width= "420px"; getElement('ID','Phone').style.width= "268px"; // adding the extra div to add CSS displayflex property // get the parent div, assuming it have ID const oldParent = getElement('ID','oldForm'), // get elements with the same class into a array arrElements = getElement('CLASS','rows'), firstName = arrElements[0], lastName = arrElements[1], email = arrMarkarrElementseto[2], company = arrElements[3], // incase form is already restructed, don't do it (check that new css class is applied or not) if(!getElement('CLASS','row-upgrade').length){ // first/last name - create div at run time and add this as parent const row1 = document.createElement('div'); row1.className = 'row-upgrade row1'; oldParent.appendChild(row1); row1.appendChild(firstName); row1.appendChild(lastName); // Titemaille/Company const row2 = document.createElement('div'); row2.className = 'row-upgrade row2'; oldParent.appendChild(row2); row2.appendChild(email); row2.appendChild(company); } } // calling the re-struturing function which is doing the magic window.onload = reFormMe();
Before
After