Open extra topbar

Tables in Mobile view

I reply to all queries on the forums and via email, once per day, Monday to Friday (not weekends).

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

Tables in Mobile view

dashed-slug.net Forums Exchange extension support Tables in Mobile view

Tagged: , , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #11668
    timah1993
    Participant

    List coin balance table displays beyond the normal screen space. Is it possible to make the table fit in just mobile view space ?
    See the attached screenshot for more understanding about the problem. On the screenshot, Section B is the normal mobile view space while section A is an extension out of the normal mobile view space. Is it possible to reduce the number of decimal places on the amount as well as the USDT coin name in order to make the table stay in place ? Thanks for your awaited help

    Attachments:
    You must be logged in to view attached files.
    #11679
    alexg
    Keymaster

    Hello,

    Sorry about this. The UIs are not meant to be used on mobile, since I am not a mobile developer! The UIs simply output some markup and you, the web developer, can style them any way you want. The UIs have all the classes you need to apply CSS easily.

    The way I see it there are two ways to approach this problem:

    1. One is to reduce the font size and reduce the padding size, hoping that all the information will fit on the screen. The easiest way to control the text and padding sizes is via the Customizer, but you can also use CSS for this.

    2. The other way would be to display the balances first, then display the available balances in another UI. You can do this by using the shortcode twice, consecutively: First hide one column in the first UI, then hide the other column in the second UI.

    Here’s how you would hide the available balance from one UI and the total balance from the other UI:

    .dashed-slug-wallets.balance.balance-list:nth-child(odd) table .available_balance {
    	display: none;
    }
    .dashed-slug-wallets.balance.balance-list:nth-child(even) table .balance {
    	display: none;
    }

    You can always add your CSS rules in: “Customizer” -> “Additional CSS”.

    Of course, the UIs are overridable, in case you want to provide your own markup. The documentation discusses this in the section: “Frontend” -> “Template modifications” -> “Modifying markup”.

    Hope this helps.

    with regards

    #11682
    Plug
    Participant

    Use YellowPencil and style the UI. Thank me later.

    #11683
    alexg
    Keymaster

    Thank you @Plug for sharing your success with YellowPencil. I have never tried it but it looks cool.


    @timah1993
    , if you decide to write CSS directly, instead of using a styling tool, just be mindful of rule specificity. If you are trying to do something specific with CSS, perhaps I can help with the rules.

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