How to add + or - button like in the screenshot

How to create a + or - button in the screenshot for order quantity.
image.

1 Like

It is an ambiguous question. Do you want to implement the logic of increasing / decreasing the quantity, or the way in which the buttons are displayed next to the quantity?
Both are possible: the first is trivial, the second is CSS doable. In an hour I’ll tell you what to do if someone hasn’t answered before me.

Assuming the button bar has an order of 3, and the text entry quantity has an order of 4, this is the CSS you need to get what you asked for (…I assume that was what you asked for).

<pre><span><style>
div[id*='screenScrollView'] > div > :nth-of-type( 3 ) >div >:nth-of-type( 1 ) {
    width: 50px;
    height: 50px;
margin-right: 20% !important;
margin-left: auto !important;
}

div[id*='screenScrollView'] > div > :nth-of-type( 3 ) >div >:nth-of-type( 2 ) {
    width: 50px;
    height: 50px;
    margin-left: 20%;
}

div[id*='screenScrollView'] > div > :nth-of-type( 3 ) >div >div >button {
border-radius: 30px;
font-size: xx-large
}

div[id*='screenScrollView'] > div > :nth-of-type( 4 ) >div  {
width: 22%;
margin-left: 39%;
margin-top: -70px;
}

div[id*='screenScrollView'] > div > :nth-of-type( 4 ) >div >div >div {
height: 50px !important;
}

div[id*='screenScrollView'] > div > :nth-of-type( 4 ) >div >div >div >div >textarea {
font-size: large;
margin-top: 5px;
height: 50px !important;
text-align: center;
}
</style></span></pre>

I preferred to use a text-entry rather than just the display of the quantity value, because I believe that the user who wants to insert a high quantity value does not like to click on the increase button many times.

This CSS works well with quantities having a maximum of two digits in smartphone screen.

I do not explain about the logic of increase / decrease when pressing the minus and plus buttons, but if you need help let me know.

5 Likes

Definitely need your help to know the logic of increasing or decreasing the value.i like your text entry way.

1 Like

Ok. Our goal is to increase or decrease the quantity by clicking on the relative + and - buttons.
But let’s also add this typical requirement:

  • we must make sure that the field does not accept values ​​below zero (or 1 depending on how it is necessary for your app); furthermore we must make sure that the quantity is not greater than a certain value, suppose 99 in this example.
  • we want to make sure that the buttons turn off when they are not in a position to accept the click.

To achieve this, a custom action must be defined for each of the two buttons.

This is the custom action for the left (-) button:

And this is the custom action for the right (+) button:

A warning for you
Taking a step back, returning to the CSS theme, I remind you that this is not an officially supported solution by Glide.
The development team may change the structure of the document in the future, and the CSS code may not work as well as it does now.
In that case you just need to disable it to return to a traditional functioning of the components or you will have to update the CSS code in such a way that it works by adapting to any new document structures.

3 Likes

Thanks a lot.im just creating for my own app.if any css problem comes,you are there to help me :grinning:

I need a answer to my another problem but experts solutions is not working for me.but I want to know a explanation for that problem from you.will ask you in the next reply.Hold on for some time.

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.