dashed-slug.net › Forums › Exchange extension support › Styling issue with dropdowns in swap form
Tagged: background, css, dropdown, frontend, market-order, styling
- This topic has 5 replies, 2 voices, and was last updated 4 years, 3 months ago by
alexg.
-
AuthorPosts
-
May 14, 2020 at 3:09 am #8329
Anonymous
InactiveHello Alex,
Thank you for this great release with the new orderform.
I am having a small issue with the new form, and I hope you can help me out.
As you can see in the attached picture, the form is not properly displayed I think, the symbols for example are not correctly shown. In this example I placed it along with other shrtcodes.
Please could you check on your end both as a stand alone form or with other shrtcodes in a page?
Thanks as usual, much appreciated your work
Best regards
Attachments:
You must be logged in to view attached files.May 14, 2020 at 6:19 am #8332alexg
KeymasterHello,
Thanks for the heads up. It seems the styling can vary across themes. You can add the following CSS to your site to make it look better.
.dashed-slug-wallets-exchange.market-order select { width: 100%; height: 2.6em; background-position: right 8px center; background-repeat: no-repeat; }
I will add this to the next release of the plugin.
with regards
May 14, 2020 at 12:42 pm #8345Anonymous
InactiveThanks Alex for the provided CSS. I played a bit with it and it looks better.
Just some more things:
-How can I adjust the logo sizes inside the dropdown selector, like in toher forms?
-How can I adjust the top marging for the Exchnge button?
-How can I center the Exchange button in the UI?
-Possible to make change the column proportion size in order to fullfil the row where it is placed, like 2/5+2/5+1/5?Please see the attached screenshot
Thanks Alex
Best regards
Attachments:
You must be logged in to view attached files.May 15, 2020 at 6:57 am #8348alexg
KeymasterHello,
All of the above can be adjusted with CSS. I do not normally give advice on this because
A. it’s the job of you or your web developer, and most importantly
B. it depends on how your theme worksIn any case, I will attempt to give you CSS rules, hoping that they will match your theme’s styling rules.
1.
.dashed-slug-wallets-exchange.market-order select { background-size: 2em; }
2.
.dashed-slug-wallets-exchange.market-order table { margin-bottom: 0; } .dashed-slug-wallets-exchange.market-order input[type=submit] { margin-top: 0; }
3.
.dashed-slug-wallets-exchange.market-order input[type=submit] { display: block; margin: 0 auto; }
4. There are actually four columns in the table, with widths set to 20% 35% 35% 10%. Here’s how you would set them to 10% 40% 40% 10%:
.dashed-slug-wallets-exchange.market-order thead th.label-col { width: 10%; } .dashed-slug-wallets-exchange.market-order thead th.amount-col { width: 40%; } .dashed-slug-wallets-exchange.market-order thead th.coin-col { width: 40%; } .dashed-slug-wallets-exchange.market-order thead th.swap-col { width: 10%; }
with regards
May 18, 2020 at 4:40 am #8357Anonymous
InactiveHello Alex,
Thank you for your help, it works.
With the new form template I was not able to find the correct classes in the console to modify the CSS.
Thanks as usual
Best regards
May 29, 2020 at 11:50 am #8466alexg
KeymasterThe above styling is now part of version
1.3.0
of the Exchange. The dropdowns should appear more uniform across various themes now. -
AuthorPosts
- You must be logged in to reply to this topic.