Radio boxes difficult to see; display as vertical line

Nicholas Flint
Topic Author
Offline
Senior Member

More

2 years 6 months ago #152687 by Nicholas Flint

Radio boxes difficult to see; display as vertical line was created by Nicholas Flint

The radio buttons in the Shop, particularly in the check out, are difficult to see and use. They display as a vertical line rather than a box. See attached screenshots.

Attachments:

Please Log in or Create an account to join the conversation.

Giang Dinh Truong
Offline
Administrator

More

2 years 6 months ago #152693 by Giang Dinh Truong

Replied by Giang Dinh Truong on topic Radio boxes difficult to see; display as vertical line

Hello Nicholas,

Thank you for submitting the question here. Regarding the problem, please go to EShop -> System -> Configuration -> Layout tab:

1. At "Load Bootstrap CSS", choose No
2. At "Twitter Bootstrap Version", choose Twitter Bootstrap Version 5

Then Save the Configuration and test again.

Sincerely, Giang

The following user(s) said Thank You: Nicholas Flint

Please Log in or Create an account to join the conversation.

Nicholas Flint
Topic Author
Offline
Senior Member

More

2 years 6 months ago #152698 by Nicholas Flint

Replied by Nicholas Flint on topic Radio boxes difficult to see; display as vertical line

Thank you! That fixed my issue.

Please Log in or Create an account to join the conversation.

Giang Dinh Truong
Offline
Administrator

More

2 years 6 months ago #152762 by Giang Dinh Truong

Replied by Giang Dinh Truong on topic Radio boxes difficult to see; display as vertical line

OK no problem at all Nicholas!

Please Log in or Create an account to join the conversation.

Adri
Offline
New Member

More

2 years 3 months ago - 2 years 3 months ago #153830 by Adri

Replied by Adri on topic Radio boxes difficult to see; display as vertical line

Hello Giang,
I did what you said. but the same problem and I think it has to do with my template. I am using a Joomshaper template.
Do you have any custom CSS code to fix this?
Sincerely, Adri

site with this problem

Attachments:

Last edit: 2 years 3 months ago by Adri. Reason: forgot the link to the site

Please Log in or Create an account to join the conversation.

Patrick Toulze
Offline
Elite Member

More

2 years 3 months ago - 2 years 3 months ago #153842 by Patrick Toulze

Replied by Patrick Toulze on topic Radio boxes difficult to see; display as vertical line

You can try that.
You maybe have to modify this to fit your final look, also you maybe have to change the selectors (e.g. span.eshop-quantity a) to make it work with your template

Code:

span.eshop-quantity a {
width: 100%; font-size: 2rem;
line-height: 10px;
}
span.eshop-quantity .eshop-quantity-value {
margin: 8px 0;
}

Last edit: 2 years 3 months ago by Patrick Toulze.

Please Log in or Create an account to join the conversation.

Adri
Offline
New Member

More

2 years 3 months ago #153874 by Adri

Replied by Adri on topic Radio boxes difficult to see; display as vertical line

Thank you Patrick,
I would like the buttons as on the example site (see attachment).
Is that possible?
Sincerely, Adri

Attachments:

Please Log in or Create an account to join the conversation.

Patrick Toulze
Offline
Elite Member

More

2 years 3 months ago #153878 by Patrick Toulze

Replied by Patrick Toulze on topic Radio boxes difficult to see; display as vertical line

Well, doing so you are forcing the layout in a different direction and I cannot confirm that it will work on smaller screen. Lot more testing necessary

For now I can give you hints, but this will need more testing.

Notes:
— The comments are for SCSS file - Not sure if valid in css
— Trash my other CSS from before

Code:

///* Display flex  & center -----*/
div.row.product-cart div.col-md-8, div.input-group-append .eshop-quantity {
display-flex; align-items: center;
}
///* To center the plus & minus in gray buttons -----*/
div.input-group-append .btn-secondary {
display: flex; align-items: center; justify-content: center;
}
///* To have a decent size plus & minus font  -----*/
span.eshop-quantity a {
width: 100%; font-size: 1.5rem; line-height: 20px;
}
///* To add margin left/right of the quantity box  -----*/
div.input-group-append {
margin: 0 5px;
}
///* To add margin to red order button to look center with quantity box  -----*/
button#add-to-cart { margin-top: 23px; }
​​​​​​​

Please Log in or Create an account to join the conversation.

Adri
Offline
New Member

More

2 years 3 months ago #153899 by Adri

Replied by Adri on topic Radio boxes difficult to see; display as vertical line

Hello Patrick,
I found this to display the numbers horizontally.

/* Custom CSS Eshop Start */

.eshop-container .form-control {
vertical-align: middle;
display: inline-grid;
}

.eshop-quantity-value {
text-align: center;
width: 44px !important;
display: inline-block;
vertical-align: middle;
}

.product-cart label.btn {
display: none;
padding: 5px;
background: #6c757d;
border: none;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}

/* Custom CSS Eshop End */

Please Log in or Create an account to join the conversation.

Patrick Toulze
Offline
Elite Member

More

2 years 3 months ago #153902 by Patrick Toulze

Replied by Patrick Toulze on topic Radio boxes difficult to see; display as vertical line

wrote:
Hello Patrick,
I found this to display the numbers horizontally.

Cool, did you try on mobile (phone) to see how it look?

I keep all that as reference for myself, thanks for the code.

Please Log in or Create an account to join the conversation.

Moderators: Giang Dinh Truong

Powered by Kunena Forum

Radio boxes difficult to see; display as vertical line

Support

Documentation

Information

Connect Us