Styling issue with dropdowns in swap form

[Anonymous]

Hello 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.

[alexg]

Hello,

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

[Anonymous]

Thanks 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.

[alexg]

Hello,

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 works

In 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

[Anonymous]

Hello 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

[alexg]

The above styling is now part of version 1.3.0 of the Exchange. The dropdowns should appear more uniform across various themes now.

[Author]

Posts