Price table row limited?

hi there,

i figured out that price table only limited to create for 5 rows, how do i create more than 5 ?

regards
giore

Hi Giore,

The price table element is limit to 5 column because if layout issues. Having more than 5 columns might cause the other columns to be pushed below.

But if you want to add more than 5 columns, you can use the shortcode like this in elements like raw content or content area:

[pricing_table columns="6"] 
    [pricing_table_column title="Basic" currency="$" price="39" interval="Per Month"]
        [icon_list]
            [icon_list_item type="check"]All Widgets[/icon_list_item]
            [icon_list_item type="check"]All Wadgets[/icon_list_item]
            [icon_list_item type="check"]All Wedgets[/icon_list_item]
            [icon_list_item type="times" style="color: red;"]Wodgets[/icon_list_item]
            [icon_list_item type="times" style="color: red;"]Gizmos[/icon_list_item]
        [/icon_list]
        [button shape="rounded" href="#example" title="Example"]Sign Up Today![/button]
    [/pricing_table_column]
    [pricing_table_column title="Basic" currency="$" price="39" interval="Per Month"]
        [icon_list]
            [icon_list_item type="check"]All Widgets[/icon_list_item]
            [icon_list_item type="check"]All Wadgets[/icon_list_item]
            [icon_list_item type="check"]All Wedgets[/icon_list_item]
            [icon_list_item type="times" style="color: red;"]Wodgets[/icon_list_item]
            [icon_list_item type="times" style="color: red;"]Gizmos[/icon_list_item]
        [/icon_list]
        [button shape="rounded" href="#example" title="Example"]Sign Up Today![/button]
    [/pricing_table_column]
    [pricing_table_column title="Basic" currency="$" price="39" interval="Per Month"]
        [icon_list]
            [icon_list_item type="check"]All Widgets[/icon_list_item]
            [icon_list_item type="check"]All Wadgets[/icon_list_item]
            [icon_list_item type="check"]All Wedgets[/icon_list_item]
            [icon_list_item type="times" style="color: red;"]Wodgets[/icon_list_item]
            [icon_list_item type="times" style="color: red;"]Gizmos[/icon_list_item]
        [/icon_list]
        [button shape="rounded" href="#example" title="Example"]Sign Up Today![/button]
    [/pricing_table_column]
    [pricing_table_column title="Basic" currency="$" price="39" interval="Per Month"]
        [icon_list]
            [icon_list_item type="check"]All Widgets[/icon_list_item]
            [icon_list_item type="check"]All Wadgets[/icon_list_item]
            [icon_list_item type="check"]All Wedgets[/icon_list_item]
            [icon_list_item type="times" style="color: red;"]Wodgets[/icon_list_item]
            [icon_list_item type="times" style="color: red;"]Gizmos[/icon_list_item]
        [/icon_list]
        [button shape="rounded" href="#example" title="Example"]Sign Up Today![/button]
    [/pricing_table_column]
    [pricing_table_column title="Basic" currency="$" price="39" interval="Per Month"]
        [icon_list]
            [icon_list_item type="check"]All Widgets[/icon_list_item]
            [icon_list_item type="check"]All Wadgets[/icon_list_item]
            [icon_list_item type="check"]All Wedgets[/icon_list_item]
            [icon_list_item type="times" style="color: red;"]Wodgets[/icon_list_item]
            [icon_list_item type="times" style="color: red;"]Gizmos[/icon_list_item]
        [/icon_list]
        [button shape="rounded" href="#example" title="Example"]Sign Up Today![/button]
    [/pricing_table_column]
    [pricing_table_column title="Basic" currency="$" price="39" interval="Per Month"]
        [icon_list]
            [icon_list_item type="check"]All Widgets[/icon_list_item]
            [icon_list_item type="check"]All Wadgets[/icon_list_item]
            [icon_list_item type="check"]All Wedgets[/icon_list_item]
            [icon_list_item type="times" style="color: red;"]Wodgets[/icon_list_item]
            [icon_list_item type="times" style="color: red;"]Gizmos[/icon_list_item]
        [/icon_list]
        [button shape="rounded" href="#example" title="Example"]Sign Up Today![/button]
    [/pricing_table_column]
[/pricing_table]

However, please note that this might force the other columns below the other columns.

http://demo.theme.co/integrity-1/shortcodes/responsive-pricing-table/

Hope this helps.

hi thanks for your replied, where should i input the above shortcode ?

furthermore, how to create a simple ccs data table like this https://css-tricks.com/responsive-data-tables/
using PRO theme element ?

Hi @giore,

You can paste the above shortcode in Raw Content element in Cornerstone. Currently there is no element for creating a table, however you can use either a third party plugin e.g TablePress or use the HTML code provided here https://css-tricks.com/responsive-data-tables/ in Raw Content element and then use the CSS from the same example site in the Cornerstone page’s CSS section to make it responsive.

Please note that we cannot provide support for third party plugins or scripts as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

Thank you for your understanding.

hi all,
thanks for replied, i recently found a ccs script for making simple table and it is working fine, but the only thing i still unsure is the ccs script should i input into the ‘element ccs’ or ‘content ccs’ field, since i have make out of many tables in different columns and rows in the same page.

seem like input into the content ccs field as a global setting for the page, but i try to input only in one of the table element ccs, other tables also can be shared the ccs script.

therefore, may i know which is the right way to place the ccs script as my condition? to make the page to load faster ?

regards
Lee

Hello Lee,

The CSS should be inserted in the content CSS so that it can be used for other table elements as well. It will make the page to load faster is you use CSS for the entire page. Redundant CSS for each of the table element will add up to the page’s file size thus will result in slower loading of the page.

Hope this helps.

hi,
thanks for your replied, kindly see new screenshot, when the price table set to 2 columns its still looks good, but when it set to 1 column, the table will expand its width to the full wide, this is not i want, may i know how to set the column in specify px or % for it`s width, so all the tables can be the same width?

Thanks
lee

Hi Lee,

I tried checking the site that is attached to your license but I can’t find the page where you added the price table columns.

Is there a chance that you can provide us with the direct link to the page in question so that we can check and provide some suggestion?

Thank you.

hi the page still in draft, i had published it, you can view it

Hi Lee,

Thanks for the details. The pricing table element by default will fill the entire width of its container but you can always set a maximum width to the pricing table element.

Option 1 : Using the style option of the Pricing Table element:

Use an inline CSS to set the maximum width of the element using the style option:

max-width: 20%;

Option 2 : Adding the style option through the shortcode:

[pricing_table columns="1" style="max-width: 20%"] 
    [pricing_table_column title="Basic" currency="$" price="39" interval="Per Month"]
        [icon_list]
            [icon_list_item type="check"]All Widgets[/icon_list_item]
            [icon_list_item type="check"]All Wadgets[/icon_list_item]
            [icon_list_item type="check"]All Wedgets[/icon_list_item]
            [icon_list_item type="times" style="color: red;"]Wodgets[/icon_list_item]
            [icon_list_item type="times" style="color: red;"]Gizmos[/icon_list_item]
        [/icon_list]
        [button shape="rounded" href="#example" title="Example"]Sign Up Today![/button]
    [/pricing_table_column]
[/pricing_table]

Hope this helps.

hi,
thanks again for your replied, it works but is not for responsive, i set 1 column table to max-width 50%, you can see when on mobile responsive view the table also stretch into half the size.

also, the table can not align at the center when it on both desktop or mobile view

Hi Lee,

In that case, I recommend using Class based CSS. Example, please add this CSS to Theme Options > CSS

@media (min-width: 768px) {
.x_pricing_column {
max-width: 20%;
}
}

Then simply implement it to your shortcode as this

[pricing_table columns="1"  class="x_pricing_column"] 
    [pricing_table_column title="Basic" currency="$" price="39" interval="Per Month"]
        [icon_list]
            [icon_list_item type="check"]All Widgets[/icon_list_item]
            [icon_list_item type="check"]All Wadgets[/icon_list_item]
            [icon_list_item type="check"]All Wedgets[/icon_list_item]
            [icon_list_item type="times" style="color: red;"]Wodgets[/icon_list_item]
            [icon_list_item type="times" style="color: red;"]Gizmos[/icon_list_item]
        [/icon_list]
        [button shape="rounded" href="#example" title="Example"]Sign Up Today![/button]
    [/pricing_table_column]
[/pricing_table]

Hope this helps.

thanks

may i know how to reduce the size of an image in shortcode?

my image is 400px x 400px, i would like to reduce to half 50% (200px x 200px)

[image type=“thumbnail” src="/my-images/image-123.png" max-width=“200px” alt=“image123”]

you can see, i tried to put max-width=“200px”, but nothing happen

if can, should be in retina as well

Hi Lee,

There is no max-width option for shortcode attributes, it’s always in style attribute just like [pricing_table columns="1" style="max-width: 20%"] . For that, your image shortcode should be this

[image type="thumbnail" src="/my-images/image-123.png" alt="image123" style="max-width: 200px;"]

Cheers!

hi,
the style="max-width: 200px; its only works in raw content(but with white background), but it does not works on text nor classic text content

also does not works in accordion content which i would like to place the shortcode.

kind see screenshot, top car was input the shortcode into raw content, middle and below cars were input the shortcode into the text and classic text content

you mind have a test on your side

regards
lee

Hello Lee,

Would you mind providing us the url of the preview page and the access to your site so that we can check your settings? Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Thank you in advance.

hi, securenote added to above

Hello Lee,

The code did not work for you because you have inserted this:

<p>[image type="<span>thumbnail</span>" src="/my-images/image-mobil.png" alt="penjemputan hospital penang" <span>style="max-width: 200px;"</span>]</p>

You are suppose to insert the correct code which is only this:

<p>[image type="thumbnail" src="/my-images/image-mobil.png" alt="penjemputan hospital penang" style="max-width: 200px;"]</p>

When inserting any html code in the text element, make sure that you are in the HTML tab and not in the Visual tab.

Hope this helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.