DEV Community

Matteo Rigoni
Matteo Rigoni

Posted on

Convert complex form into html

Hi, i have to migrate a desktop application to cloud, basically i've to rewrite many window forms in html in a Angular application (using basic html, css, bootstrap).

I need a tool to convert automatically these forms, becasuse they are a huge number and every form ha a lot of fields. Each form has 100 rows with same height, each row has different elements (lables,input,line,titles,icons) without any common schema. I've to preserve every alignment in the html page (for example a text input on line 3 should be aligned with another element on row 66).
The final html shouldn't be responsive, there shouldn't any kind of wrapping, only if possibile a "zoom" on all elements where resizing the page, at some point it will appear scrollbar.
After some experiments, the only way i found to do this conversion, is mapping each form's row to a div (100vw). Then in each div, i'm evaluating different strategies:

  1. using absolute position with percentage. The only issue is that i have to specify a fixed height, is there a workaround to avoid this? Also using dynamic font-size i don't have a fixed height in all elements..

    <div class="container-fluid">
    <div style="height:25px; position:relative; font-size:0.8vw;">
    <div style="position:absolute;left:0%;width:12%;height:100%">FIRST TEXT</div>
    <div style="position:absolute;left:55%;width:15%;">Second text</div>
    <input style="position:absolute;left:71%;width:5%;" type="text" />
    </div>
    </div>

  2. In each div i put a table with columns having fixed width in percentage (but it's a nightmare deal with different padding and margins in each cell)

  3. In each div i use display:grid, doing something like the previous point (but it's a nightmare deal with different padding and margins in each cell)

  4. In each div i use absolute positions and width in px, then using media queries i do a "scale" on all elements..it works but i know that is not a best practice, right?

Which solution is better for you? Do you have other ideas to do this strange conversion?
(i exlude all stuff like grid system, flex because i have to keep the structure one to one and in source files i have only absolute coordinates without any kind of container's concept to aggregate elements)

Thanks

Top comments (0)