327
Views
8
Comments
Solved
How to Create the Responsive Web Screen?
Question


I inserted a sequence of 7 buttons side by side, the problem is that it is not resizing when I change the screen configuration. When I use the Button Group it works great. 

How can I configure the screen to responsive?

2019-09-24 18-41-25
Jorge Martins
 
MVP
Solution

Hi Alan,

If you want your Buttons to resize according to the screen size you should be using col or % as the unit for your buttons' width. That way they will be relative to the size of the screen (or the parent element).

2021-10-17 12-36-16
Amreen Shaikh

Hi Alan,

See, I have created six buttons side by side without any config for responsiveness. What is your requirment.


Regards ,

Amreen

2018-06-15 00-21-10
Pedro Vila Nova


UserImage.jpg
Alan Cestaro

Hi Amreen,



I would like the buttons to resize automatically to the chosen screen size.

See in the screenshots that the widget button group representing the gray line (first / second ...) behaves as expected.

In fact, I wanted the entire screen to decrease or increase automatically.


Thank you for your attention.



Screen2.png
UserImage.jpg
Alan Cestaro

Screen1.png
2018-08-26 20-34-32
Pankaj pant

Alan Cestaro wrote:


Hi Alan,

Name the class to a container containing all the buttons.


and try this css

.selector-class . btn {

margin-bottom:1.96%;

}


hope it will solve your issue.


Regards,

Pankaj

UserImage.jpg
Alan Cestaro

Hi Pankaj


See you Comparing the two images

each widget behaves differently according to the screen configuration.

If you create a webscreen application, can not it be viewed in a mobile environment?

2019-09-24 18-41-25
Jorge Martins
 
MVP
Solution

Hi Alan,

If you want your Buttons to resize according to the screen size you should be using col or % as the unit for your buttons' width. That way they will be relative to the size of the screen (or the parent element).

UserImage.jpg
Alan Cestaro

Thanks Jorge.


Thanks Pankaj, Pedro  and  Amreen

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.