[#18917] - [4.0] Usability: Component and Item radio group options styling is not working properly
- Closed
- 5 May 2019
- Medium
- Build: 4.0-dev
- # 18917
- Diff
- machadoug:4.0-dev
- Failure continuous-integration/drone/pr the build failed Details
- Success hound No violations found. Woof! Details
- Failure continuous-integration/travis-ci/pr The Travis CI build failed Details
- Failure continuous-integration/appveyor/pr AppVeyor build failed Details
User tests: Successful: Unsuccessful:
I'm testing my extensions with Joomla 4.0 and I noticed a couple of styling issues with the options from the XML files.
The Lists requires two clicks in order to select an option, therefore when we have up to 4 options we always use radio buttons in order to improve usability. However the class="btn-group" is not working properly.
Example XML Code
<field name="gmaps_linkToGoogleEarth" type="radio" default=""
class="btn-group" useglobal="true"
description="CE_GMAPS_LINK_OUTPUT_DESC">
<option value="gmaps">CE_GMAPS_LINK_OUTPUT_OPT_GOOGLE_MAPS</option>
<option value="gearth">CE_GMAPS_LINK_OUTPUT_OPT_GOOGLE_EARTH</option>
</field>
Expected result
XML options using useglobal=true in Joomla 3.8
Actual result
XML options using useglobal=true in Joomla 4.0 Alpha2
Result after proposed changes
Solution
Add the CSS code .btn-group.radio{display:inline-block} to
joomla-cms/templates/cassiopeia/css/template.min.css
Also, the Use global should be blue (Bootstrap primary class), therefore we need to remove the btn-outline-primary class from the label.
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | Administration Templates (admin) JavaScript |
| Labels |
Added:
?
|
||
Grouped buttons will derive from custom elements, so probably not muh point in trying to fix this here
@brianteeman This is not about the switcher. It's about radio buttons (button groups). The switcher uses the class "switcher".
therefore IMHO it should be fixed here.
Nope! That code was wrongly put there it belongs to the field that actually renders those inputs. We'll fix this when we'll move the code to the custom elements. On our todo list
@dgt41 great to know. Thanks.
Anyway the Javascript code needs updating in order to display correctly the colors. In my last change to administrator/templates/atum/js/template.js I've fixed the colors based on the value.
We'll fix this when we'll move the code to the custom elements.
@dgt41 Can this Pull Request be closed?
| Status | Pending | ⇒ | Information Required |
@franz-wohlkoenig nope, let's get some tests and merge this. Later on we'll move the code where it rightfully belongs
| Status | Information Required | ⇒ | Pending |
@dgrammatiko what is the status here?
I believe this will throw the error:
Undefined variable 'j'
Seeing as the addition for loop was removed where this variable was declared
@wilsonge @franz-wohlkoenig no activity for over a year. Suggesting to close this one.
@machadoug thanks for your PR! If you would like to get this in Joomla I recommend opening a new PR against the latest 4.0-dev branch.
closed as stated above.
| Status | Pending | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2019-05-05 14:01:23 |
| Closed_By | ⇒ | franz-wohlkoenig | |
| Labels |
Removed:
J4 Issue
|
||
Obviously the switcher doesnt support more than two options or it wouldnt be a switch