How do I center a jqxGrid within a ? - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: align, center, css, grid, html, jqxgrid, table, td, tr

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

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

Author

How do I center a jqxGrid within a ? Posts

April 2, 2015 at 6:54 pm How do I center a jqxGrid within a ? #69484

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

April 3, 2015 at 5:38 am 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/

April 3, 2015 at 1:12 pm 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?

April 6, 2015 at 6:59 am 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/

April 6, 2015 at 3:41 pm How do I center a jqxGrid within a ? #69603

fritzfrancis

Participant

Dimitar,

That did the trick. Thank you.

Regards,
Jacob Stamm

Author

Posts

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

You must be logged in to reply to this topic.