Open extra topbar

Styling issue with dropdowns in swap form

If you are new here, please see some information on how to ask for support. Thank you!

Styling issue with dropdowns in swap form

dashed-slug.net Forums Exchange extension support Styling issue with dropdowns in swap form

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #8329
    bigblue
    Participant

    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

    • This topic was modified 1 week, 5 days ago by alexg. Reason: meaningful title
    Attachments:
    You must be logged in to view attached files.
    #8332
    alexg
    Keymaster

    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

    #8345
    bigblue
    Participant

    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.
    #8348
    alexg
    Keymaster

    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

    #8357
    bigblue
    Participant

    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

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.