Radio boxes difficult to see; display as vertical line

  • Nicholas Flint
  • Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
4 months 3 weeks ago #152687 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
  • Giang Dinh Truong's Avatar
  • Offline
  • Administrator
  • Administrator
More
4 months 3 weeks 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
  • Senior Member
More
4 months 3 weeks 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
  • Giang Dinh Truong's Avatar
  • Offline
  • Administrator
  • Administrator
More
4 months 3 weeks 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.

More
2 months 1 week ago - 2 months 1 week ago #153830 by Adri
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 months 1 week ago by Adri. Reason: forgot the link to the site

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

More
2 months 1 week ago - 2 months 1 week 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
span.eshop-quantity a {
width: 100%; font-size: 2rem;
line-height: 10px;
}
span.eshop-quantity .eshop-quantity-value {
margin: 8px 0;
}
Last edit: 2 months 1 week ago by Patrick Toulze.

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

More
2 months 1 week ago #153874 by Adri
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.

More
2 months 1 week 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

///* 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.

More
2 months 1 week ago #153899 by Adri
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.

More
2 months 1 week ago #153902 by Patrick Toulze
Replied by Patrick Toulze on topic Radio boxes difficult to see; display as vertical line

Adri post=153899 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