Settings screen css correction

Resolved janpaulkleijn
(@janpaulkleijn)

5 years, 1 month ago
Hi there,
Great plugin, first of all. Together with Quotes very powerful and easy to use, big respect.

I want to solve a teeny weeny issue for you, just as a token of my appreciation.

In the settings screen you use some HTML code that is not supported in HTML5. The code I am referring to is the attribute scope in the <th> tags, used for the smaller titles in between the form fields. This causes these titles to be the width of the first column only. That could become looking untidy when these titles are translated. A simple solution to the CSS could solve it though…
```
/* Invoice Settings */
.wpi-wpinv-settings th[scope="row"] {
	min-height: 1.4rem;
	display: inline-block;
}
.wpi-wpinv-settings th[scope="row"] h3 {
	position: absolute;
}
```
This sets the <th>-cell to a minimum height of 1.4rem and positions the header block in it (the <h3> tag) as an absolute element in it. This way it can easily ‘break out’ of the <th>-cell, into the <td>-cell next to it.

As far as I can see this solution is markup language independant and does not affect the responsive-ity of the settings screen.

The only thing needed is CSS2, and that is not too much to ask if I may say so 😉

By the way, if I can interest you in a Dutch translation of your Quotes plugin add-on, just let me know and I’ll e-mail it to you.

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

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

Patrik
(@wpdev10)

5 years, 1 month ago
Hi,

Thanks for your appreciation and suggestion. We have slightly modified your code as below:
```
.wpi-wpinv-settings .form-table tbody tr:first-child th[scope="row"] {
    min-height: 1.4rem;
    display: inline-block;
}
.wpi-wpinv-settings .form-table tbody tr:first-child th[scope="row"] h3 {
    position: absolute;
}
```
This will apply to only the title(<h3>) of the form and not other elements. Kindly try this code and let us know if this works for you or not.

Regarding the translation of Quote plugin, you can email us your translation file.

Regards,
Patrik
Thread Starter janpaulkleijn
(@janpaulkleijn)

5 years ago

Hi Patrik,
Where can I email the translation file to?
Plugin Contributor ismiaini
(@ismiaini)

5 years ago
Hello @janpaulkleijn

You are welcome to join our translation team!

You can upload your core translations of invoicing here https://translate.wordpress.org/projects/wp-plugins/invoicing/

For the addon, you can create a topic in our forum here https://wpinvoicing.com/support/ and upload it there.

You can also upload it here https://translate.wordpress.org/projects/wp-plugins/invoicing-quotes/
- This reply was modified 5 years ago by ismiaini.
Thread Starter janpaulkleijn
(@janpaulkleijn)

5 years ago

Hi Ismiaini,
I have created a Dutch translation with Poedit. Poedit has searched for translation strings which I translated. But this translation file cannot be imported on the page you mentioned (https://translate.wordpress.org/projects/wp-plugins/invoicing-quotes/)

It looks like there are very different translation strings in the file on the page you mentioned then there are in the Quotes addon.

Regards,
Jan-Paul

Plugin Contributor ismiaini
(@ismiaini)

5 years ago

Hello @janpaulkleijn

Please try to create a topic in our forum here https://wpinvoicing.com/support/ and upload it there.

Thank you 🙂

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

The topic ‘Settings screen css correction’ is closed to new replies.