jQuery UI Widgets Forums Grid How do I center a jqxGrid within a ?

This topic contains 4 replies, has 2 voices, and was last updated by  fritzfrancis 9 years, 2 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • How do I center a jqxGrid within a ? #69484

    fritzfrancis
    Participant

    Hello,

    I currently have all of my jqxGrids aligned to the left of the cells they are in (in an HTML table). Here is an example.

    I would like to display my grid so that it looks more like this. (I altered the image to make it look centered).

    I have tried the usual CSS text-align: center, which doesn’t seem to be working. Here is a snippet of my HTML:

                <table style="margin-top: 0px">
                    <tr>
                        <td colspan="2" style="padding-top: 8px; text-align: center;">
                            <input type="button" value="A" class="letterButton" id="A"/>
                            <input type="button" value="B" class="letterButton" id="B"/>
                            <input type="button" value="C" class="letterButton" id="C"/>
                            <input type="button" value="D" class="letterButton" id="D"/>
                            <input type="button" value="E" class="letterButton" id="E"/>
                            <input type="button" value="F" class="letterButton" id="F"/>
                            <input type="button" value="G" class="letterButton" id="G"/>
                            <input type="button" value="H" class="letterButton" id="H"/>
                            <input type="button" value="I" class="letterButton" id="I"/>
                            <input type="button" value="J" class="letterButton" id="J"/>
                            <input type="button" value="K" class="letterButton" id="K"/>
                            <input type="button" value="L" class="letterButton" id="L"/>
                            <input type="button" value="M" class="letterButton" id="M"/>
                            <input type="button" value="N" class="letterButton" id="N"/>
                            <input type="button" value="O" class="letterButton" id="O"/>
                            <input type="button" value="P" class="letterButton" id="P"/>
                            <input type="button" value="Q" class="letterButton" id="Q"/>
                            <input type="button" value="R" class="letterButton" id="R"/>
                            <input type="button" value="S" class="letterButton" id="S"/>
                            <input type="button" value="T" class="letterButton" id="T"/>
                            <input type="button" value="U" class="letterButton" id="U"/>
                            <input type="button" value="V" class="letterButton" id="V"/>
                            <input type="button" value="W" class="letterButton" id="W"/>
                            <input type="button" value="X" class="letterButton" id="X"/>
                            <input type="button" value="Y" class="letterButton" id="Y"/>
                            <input type="button" value="Z" class="letterButton" id="Z"/>
                            <input type="button" value="ALL" class="letterButton" style="width:38px" id="ALL"/>
                        </td>
                    </tr>
                    <tr style="text-align:center; align-content: center; align-items: center;">
                        <td>
                            <div id="jqxGrid23" class="jqxGrid"></div>
                        </td>
                    </tr>
                </table>
    

    Any suggestions?

    Regards,
    Fritz Francis

    How do I center a jqxGrid within a ? #69502

    Dimitar
    Participant

    Hello Fritz Francis,

    I think you need to apply this CSS to the <td>, not the <tr>. It may also need colspan="2", as the <td> in the first row.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    How do I center a jqxGrid within a ? #69540

    fritzfrancis
    Participant

    Dimitar,

    Unfortunately, this did not work. I tried every combination of colspans on the <td>’s for both <tr>’s. Now, I’ve essentially “spammed” all of the align properties hoping that one of them will work, but no luck. here’s what that table looks like now.

    
                <table style="margin-top: 0px">
                    <tr>
                        <td style="padding-top: 8px; text-align: center;">
                            <input type="button" value="A" class="letterButton" id="A"/>
                            <input type="button" value="B" class="letterButton" id="B"/>
                            <input type="button" value="C" class="letterButton" id="C"/>
                            <input type="button" value="D" class="letterButton" id="D"/>
                            <input type="button" value="E" class="letterButton" id="E"/>
                            <input type="button" value="F" class="letterButton" id="F"/>
                            <input type="button" value="G" class="letterButton" id="G"/>
                            <input type="button" value="H" class="letterButton" id="H"/>
                            <input type="button" value="I" class="letterButton" id="I"/>
                            <input type="button" value="J" class="letterButton" id="J"/>
                            <input type="button" value="K" class="letterButton" id="K"/>
                            <input type="button" value="L" class="letterButton" id="L"/>
                            <input type="button" value="M" class="letterButton" id="M"/>
                            <input type="button" value="N" class="letterButton" id="N"/>
                            <input type="button" value="O" class="letterButton" id="O"/>
                            <input type="button" value="P" class="letterButton" id="P"/>
                            <input type="button" value="Q" class="letterButton" id="Q"/>
                            <input type="button" value="R" class="letterButton" id="R"/>
                            <input type="button" value="S" class="letterButton" id="S"/>
                            <input type="button" value="T" class="letterButton" id="T"/>
                            <input type="button" value="U" class="letterButton" id="U"/>
                            <input type="button" value="V" class="letterButton" id="V"/>
                            <input type="button" value="W" class="letterButton" id="W"/>
                            <input type="button" value="X" class="letterButton" id="X"/>
                            <input type="button" value="Y" class="letterButton" id="Y"/>
                            <input type="button" value="Z" class="letterButton" id="Z"/>
                            <input type="button" value="ALL" class="letterButton" style="width:38px" id="ALL"/>
                        </td>
                    </tr>
                    <tr style="text-align:center; align-content: center; align-items: center;">
                        <td style="text-align:center; align-content: center; align-items: center;">
                            <div style="text-align:center; align-content: center; align-items: center;" id="jqxGrid23" class="jqxGrid"></div>
                        </td>
                    </tr>
                </table>
    

    Note that none of the <td>’s have a colspan anymore. The one I had on the first <td> was unnecessary. Any suggestions?

    How do I center a jqxGrid within a ? #69580

    Dimitar
    Participant

    Hi Fritz Francis,

    Please try the following:

    <table style="margin-top: 0px">
        <tr>
            <td style="padding-top: 8px; text-align: center;">
                <input type="button" value="A" class="letterButton" id="A" />
                <input type="button" value="B" class="letterButton" id="B" />
                <input type="button" value="C" class="letterButton" id="C" />
                <input type="button" value="D" class="letterButton" id="D" />
                <input type="button" value="E" class="letterButton" id="E" />
                <input type="button" value="F" class="letterButton" id="F" />
                <input type="button" value="G" class="letterButton" id="G" />
                <input type="button" value="H" class="letterButton" id="H" />
                <input type="button" value="I" class="letterButton" id="I" />
                <input type="button" value="J" class="letterButton" id="J" />
                <input type="button" value="K" class="letterButton" id="K" />
                <input type="button" value="L" class="letterButton" id="L" />
                <input type="button" value="M" class="letterButton" id="M" />
                <input type="button" value="N" class="letterButton" id="N" />
                <input type="button" value="O" class="letterButton" id="O" />
                <input type="button" value="P" class="letterButton" id="P" />
                <input type="button" value="Q" class="letterButton" id="Q" />
                <input type="button" value="R" class="letterButton" id="R" />
                <input type="button" value="S" class="letterButton" id="S" />
                <input type="button" value="T" class="letterButton" id="T" />
                <input type="button" value="U" class="letterButton" id="U" />
                <input type="button" value="V" class="letterButton" id="V" />
                <input type="button" value="W" class="letterButton" id="W" />
                <input type="button" value="X" class="letterButton" id="X" />
                <input type="button" value="Y" class="letterButton" id="Y" />
                <input type="button" value="Z" class="letterButton" id="Z" />
                <input type="button" value="ALL" class="letterButton" style="width: 38px" id="ALL" />
            </td>
        </tr>
        <tr>
            <td>
                <div style="margin: auto;" id="jqxGrid23" class="jqxGrid">
                </div>
            </td>
        </tr>
    </table>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    How do I center a jqxGrid within a ? #69603

    fritzfrancis
    Participant

    Dimitar,

    That did the trick. Thank you.

    Regards,
    Jacob Stamm

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.