Aligning VC elements

  • Resolved monigilli

    (@monigilli)


    5 years, 5 months ago

    I have searched the forum and tried to accomplish this on my own for hours, but cannot find any information on this topic.

    I would like to keep my vc icons inline with my row text. Is this possible?

    I am also having trouble centering my table when viewing on a mobile device. I know this was discussed, as I noticed it in a previous thread, but I can’t remember where.

    Lastly, I downloaded the fixed header extension and have followed the advice given to offset to keep separated from navigation header. The fixed header is split in half when I use

    datatables_fixedheader=top /]

    and if I switch to an offset of any size, it completely vanishes.

    Please help.
    Warmest regards,
    Monica

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    5 years, 5 months ago

    Hi,

    thanks for your post, and sorry for the trouble.

    To center those VC icons (the blue ones), please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    .tablepress .vc_icon_element.vc_icon_element-outer .vc_icon_element-inner {
    display: block;
    margin: 0 auto;
}

    Centering the icon images (greenish), just select “center” when inserting them (right now, they have different alignment settings chosen).

    For the FixedHeader: Can you please turn that on again, so that I can see the issue for myself?

    Regards,
    Tobias

    Thread Starter monigilli

    (@monigilli)

    5 years, 5 months ago

    Thank you for the response. No need for apologies–your plug in is beautiful, I am simply inexperienced.

    — The css you send effectively centered the vc icons in the column, but they are still creating a separate line on the row. I attempted to add priority with !important; on each command as well to no avail. I’m not sure if there is an ::after code I can add, but I haven’t been able to figure it out.

    — I am still having difficulty centering the table on the screen. I have already tried the code for centering a table listed in the FAQs.

    Thank you for all of your help!
    Monica

    Thread Starter monigilli

    (@monigilli)

    5 years, 5 months ago

    Update: I was able to align the icons with the text by adding the code:

    .tablepress-id-1 .column-1 {
    vertical-align: middle;
    }

    Tobias, the only thing I have not managed to accomplish is keeping the table centered on the page.

    Warmly,
    Monica

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    5 years, 5 months ago

    Hi Monica,

    please try changing

    .tablepress-id-1 {
    width: auto;
    margin: 0 auto 1em;
}

    to

    .dataTables_wrapper .tablepress-id-1 {
    width: auto;
    margin: 0 auto 1em !important;
}

    Regards,
    Tobias

    Thread Starter monigilli

    (@monigilli)

    5 years, 5 months ago

    Hey Tobias,

    Thank you so much! That fixed it on the desktop browser. I’m still coming up right aligned on mobile, and the sticky header is widening while scrolling as well.

    Warmly,
    Monica

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    5 years, 5 months ago

    Hi Monica,

    it’s not actually that the table is right-aligned on mobile – the table content is too wide for display on a mobile screen. This is mainly caused by the long words in the header. These define the minimum column widths for these columns (as the browser does not do automatic word-wrapping for them). Thus, the table is wider than the screen and expands to the right. This problem is called “responsiveness”, and for some approaches to deal with this, please see https://tablepress.org/extensions/responsive-tables/

    Regards,
    Tobias

    Thread Starter monigilli

    (@monigilli)

    5 years, 5 months ago

    Wonderful. I will pursue responsiveness and open a new thread if I can’t find what I need. Thank you again for all of your help.

    Warmest regards,
    Monica

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    5 years, 5 months ago

    Hi,

    no problem, you are very welcome! 🙂 Good to hear that this helped!

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Aligning VC elements’ is closed to new replies.