CODEWITHSUNDEEP
csstablerow
SeanCannon
SeanCannon

Reputation: 77966

display:table-row not working

I have a client form which includes HTML served up from an iframe - I can't edit it. The only thing I can do is apply CSS edits.

I'm trying to apply a simple adjustment which would stack the <td>s in the form so

1. What is your age?

becomes 

1.
What is your age?

If you right click the first question and Inspect Element you'll see the rather interesting DOM structure I get to work with. This example it looks like this: 

<div id="Age" class="questionlabel">
    <table border="0" cellpadding="0" cellspacing="0">   
        <tbody>
            <tr>
                <td>
                    <span class="questionnumber_questionlabel">1. </span>
                </td>
                <td>
                    <label class="required">What is your age?</label>
                </td>
            </tr>
        </tbody>
    </table>
</div>

When I inspect that <td> and add a display:table-row; it completely ignores me. This is in Chrome - I can replicate this DOM and get the CSS to do what I want in jsfiddle so I'm thinking there is a reset somewhere I can't see. I even tried display:table-row !important; to no avail. I can apply border:2px solid blue; no problem. I can apply display:none; no problem.

Any ideas as to what is going on here that would prevent this simple CSS param from working?

To re-iterate the ONLY thing I can do is apply CSS - No JavaScript and no HTML edits. Basically I pass in a CSS file in the url to the iFrame. That's all I get. Thanks!

EDIT: I apologize I had to remove the link to the example form on the live site.

Upvotes: 1

Views: 3659

Answers (1)

Brock Adams
Brock Adams

Reputation: 93483

Edit - screenshots had to be removed, but the solution is still valid.

Added this code to form-css.css, using Firebug. Beginning or end, it did not matter:

table#form_table div.questionlabel td {display: table-row !important;}
.questionnumber_questionlabel {margin: inherit!important;}

(Note: I reset that margin as the old one (-10px) was causing unsightly overlap.)

Upvotes: 3

Related Questions