- Posts: 49
- Thank you received: 0
Radio boxes difficult to see; display as vertical line
- Nicholas Flint
- Topic Author
- Offline
- Senior Member
Less
More
2 years 2 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.
Please Log in or Create an account to join the conversation.
- Giang Dinh Truong
- Offline
- Administrator
2 years 2 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
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
Less
More
- Posts: 49
- Thank you received: 0
2 years 2 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
2 years 2 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
Less
More
- Posts: 10
- Thank you received: 0
1 year 11 months ago - 1 year 11 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
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
Last edit: 1 year 11 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
Less
More
- Posts: 312
- Thank you received: 19
1 year 11 months ago - 1 year 11 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
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: 1 year 11 months ago by Patrick Toulze.
Please Log in or Create an account to join the conversation.
- Adri
- Offline
- New Member
Less
More
- Posts: 10
- Thank you received: 0
1 year 11 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
I would like the buttons as on the example site (see attachment).
Is that possible?
Sincerely, Adri
Please Log in or Create an account to join the conversation.
- Patrick Toulze
- Offline
- Elite Member
Less
More
- Posts: 312
- Thank you received: 19
1 year 11 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
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
Less
More
- Posts: 10
- Thank you received: 0
1 year 11 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 */
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
Less
More
- Posts: 312
- Thank you received: 19
1 year 11 months ago #153902
by Patrick Toulze
I keep all that as reference for myself, thanks for the code.
Replied by Patrick Toulze on topic Radio boxes difficult to see; display as vertical line
Cool, did you try on mobile (phone) to see how it look?Hello Patrick,
I found this to display the numbers horizontally.
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
Support
Documentation
Information
Copyright © 2024 Joomla Extensions by Joomdonation. All Rights Reserved.
joomdonation.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.
The Joomla! name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.