I have a page in which users (mostly younger partially disabled children) are asked to pick one activity from a number of choices, based on their age and experience. This is done on a tablet on site, and is not available outside the organisations server.
The activities are titled in 3 levels, and at each level there will be between 4 and 7 activities.
Depending upon age/experience etc the use will have access to between 1 and 3 levels of activities
All the activities are named beginning with the level, so that all Basic choices are together, followed by all Intermediate then all Advanced.
To make things easier for them I have programmed the choice by replacing radio buttons with Bootstrap buttons, and enlarged the buttons by adding CSS to them.
However I am trying to ensure that all buttons for every level are in single row. (e.g. row of Basic level buttons, row of Intermediate etc.), and it is here I am having trouble. I know I can use the beginning part of the activity name to split them, but whatever I have tried (e.g putting each level in a separate
The code to “load” the buttons is:
<fieldset>
<?php
$sel = "checked";
$active = "active";
$count = 0;
$init_text = "xxxxxxx";
echo '<div class="btn-toolbar btn-group-toggle row" data-toggle="buttons">';
foreach ($activity as $aid => $aname) {
$text = substr($aname, 0, 4);
echo'<label class="btn btn-outline-success btn-space btn-big ' . $active . ' ">';
echo'<input type="radio" name="activity" id="' . $aid . '" autocomplete="off"' . $sel . '>' . $aname . '</label>';
$sel = "";
$active = "";
$count++;
}
echo '</div>';
?>
</fieldset>
As you can see I have left in place the variables $init_text and $text which I had used to try to break the items into groups.
The CSS used to create the “big buttons”:
.btn-space {
margin-right: 5px;
margin: 4px 2px;
}
.btn-big {
height: 100px;
width: 13%;
font-weight: 700;
}
btn-success:not(.active):hover, .btn-big:not(.active):hover {
background-color: #00ff7f !important;
}
Is what I am trying to acheive possible? If so I assume it is a CSS problem, and could any expert out there point me in the right direction?
As an aside all the buttons have the text centrally aligned at the top of the “big button”. Is it possible to get it centralised to the height as well?
Many thanks