Hello,
I’m using the Price Table Widget and right now it’s 3 columns by several columns high. The problem I’m trying to resolve is that the cell height between columns is different based on the narrative I’ve got in a particular cell, so it looks horrible. Is there a way to specify cell height or an attribute that will auto-size all cells in a given row based on the longest cell entry?
Hi DDTriGuy,
Currently, no (I’ve logged this as feedback though). I can however help you manually set this via CSS. Do you have a public URL where we can take a look at what’s going on? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.
This is a private message.
Hi DDTriGuy,
Sadly password protected pages require that I’m logged into a user account. As such, would it be possible for you to create a temporary admin account for us so we can log in and take a look?
This is a private message.
This is a private message.
This is a private message.
Hi DDTriGuy,
Sorry for the delay! I totally understand and that’s completely fine. Oddly, most people would prefer to give us admin access over making the page public. :S
Okay so each row has .ow-pt-feature attached to it so which you can use as your selector. I personally would resolve this issue by using a min-height rather than JavaScript. So something like the following CSS should be able to resolve this issue.
If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Please add the following code to that page.
.ow-pt-feature { min-height: 105px; }If you wish to target only that price table you can use its unique ID, panel-42-0-0-1.
#panel-42-0-0-1 .ow-pt-feature { min-height: 105px; }You might also need to install the SiteOrigin CSS Editor.
Thanks Alex… that helped somewhat, but not entirely. The content rows are all now the same site but the header rows are not. I certainly can shorten narrative so it has the same wrap, but would prefer to force it to the same size. What css object is used for the header?
Better yet, is there a way for me to better understand the construct of the theme, so I can better self diagnose issues in the layout? Do you have documentation on the theme and how to customize that you can refer me to?
Hi DDTriGuy,
Okay so all up:
The header row class is: .ow-pt-title
The pricing row class is: .ow-pt-details
The features is: .ow-pt-features
The button row class is: .ow-pt-button
We sadly don’t have technical designer docs (we have technical docs but those are more suited to widget development rather than designing existing widgets) but that’s honestly a really good idea so I’m going to log it as a doc suggestion.
Perfect, works like a champ! Much appreciated.
One last question if you don’t mind… where is the best place to review the code, if I need to poke around… is all of this defined in the style.css that I can get at from Appearance > Editor? Or elsewhere? Also, the editor doesn’t allow “find”, so the location of the css on the filesystem might be more helpful, so I can use my own editor, with search capabilities.
Thanks again!
Hi DDTriGuy,
Elsewhere. As the price table is a widget its styles are stored in its widget folder. They’re also dynamic as the widget settings will be stored within the generated CSS file.
You can view the less file (which is compiled on save) here. To see the LESS variables please refer to this file.
This is a private message.
Hi Nai,
The CSS above will work for you unless you want to specifically a single price table widget. In which case, do you have a public URL where we can take a look at your price table? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.