SDL Container <input> tag positioned incorrectly using table rows #108

abhijitnandy2011 · 2019-09-29T12:42:44Z

I am trying to use the input tag with the SDL Container written by bnolan here(https://gist.github.com/bnolan/436dd93893a6067406ce1a0b9e2dc0f3). I am rendering just the widget borders for now.

This is the code:
https://github.com/abhijitnandy2011/SDL-Browser-litehtml/tree/master/SDLBrowser/src

I tried to render this file:

<html>
<body>
    <table>
        <tr>
            <td><input type="text" name="search text"></td>
        </tr>
        <tr>
            <td><input type="button" name="lname"></td>
        </tr>
    </table>
</body>
</html>

Two input tags in 2 different rows. The one in the bottom is positioned incorrectly:

If I have some text in the row above it, then the first input tag positions correctly:

<html>
<body>
    <table>
        <tr>
            <td>First</td>
        </tr>
        <tr>
            <td><input type="text" name="search text"></td>
        </tr>
        <tr>
            <td><input type="button" name="lname"></td>
        </tr>
    </table>
</body>
</html>

Also text positioning works perfectly in the row and column direction. I am trying to figure out what I am missing in the implementation of the el_input:
https://github.com/abhijitnandy2011/SDL-Browser-litehtml/blob/master/SDLBrowser/src/el_input.cpp
and tried comparing it to el_text in the litehtml library code:
https://github.com/abhijitnandy2011/SDL-Browser-litehtml/blob/master/SDLBrowser/libs/litehtml/src/el_text.cpp

No luck yet, though it seems to me that the height of the first input tag is not set correctly as any text after it renders almost on it too:

<html>
<body>
    <table>
        <tr>
            <td>First</td>
        </tr>
        <tr>
            <td><input type="text" name="search text"></td>
        </tr>
        <tr>
            <td>Second</td>
        </tr>
    </table>
</body>
</html>

The text was updated successfully, but these errors were encountered:

abhijitnandy2011 · 2019-09-30T05:32:13Z

Another thing I noticed is that setting the display style to litehtml::display_inline_block fixes the row rendering but messes up the column positioning(and widths)

Using litehtml::display_table_cell does the opposite:

abhijitnandy2011 · 2019-09-30T19:25:45Z

Ok, I have managed to cobble together something based on the el_image tag which seems to work:
https://github.com/abhijitnandy2011/SDL-Browser-litehtml/blob/master/SDLBrowser/src/el_input.h
https://github.com/abhijitnandy2011/SDL-Browser-litehtml/blob/master/SDLBrowser/src/el_input.cpp

It seems the render() function had to be implemented similarly to el_image, for the correct positions to be calculated:

This is for the following HTML:

<html>
<body>
    <table>       
        <tr>
            <td><input type="button" name="search text"></td><td><input type="button" name="search text"></td>
        </tr>
        <tr>
            <td><input type="button" name="search text"></td><td><input type="button" name="search text"></td>
        </tr>
        <tr>        
            <td>
                <table>
                    <tr>
                        <td><input type="button" name="search text"></td><td><input type="button" name="search text"></td>
                    </tr>
                     <tr>
                        <td><input type="button" name="search text"></td><td><input type="button" name="search text"></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

cirospaciari · 2022-12-22T23:06:10Z

Cool any progress on it?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SDL Container <input> tag positioned incorrectly using table rows #108

SDL Container <input> tag positioned incorrectly using table rows #108

abhijitnandy2011 commented Sep 29, 2019 •

edited

abhijitnandy2011 commented Sep 30, 2019 •

edited

abhijitnandy2011 commented Sep 30, 2019 •

edited

cirospaciari commented Dec 22, 2022

SDL Container <input> tag positioned incorrectly using table rows #108

SDL Container <input> tag positioned incorrectly using table rows #108

Comments

abhijitnandy2011 commented Sep 29, 2019 • edited

abhijitnandy2011 commented Sep 30, 2019 • edited

abhijitnandy2011 commented Sep 30, 2019 • edited

cirospaciari commented Dec 22, 2022

abhijitnandy2011 commented Sep 29, 2019 •

edited

abhijitnandy2011 commented Sep 30, 2019 •

edited

abhijitnandy2011 commented Sep 30, 2019 •

edited