Forums

Good morning,
is there a way to use Radiobuttons with Icons instead of normal text?

Hi RolloMan,

If you use a Custom Code element from the Advanced Group in the Designer tab you an add HTML that uses <img> tags as labels

<div class="gcore-radio-item" id="fitem">
  <input name="radio1" id="radio1" value="0" class="A" title="" style="" data-load-state="" data-tooltip="" type="radio" />
  <label class="control-label gcore-label-checkbox" for="radio1">
    <img src='/images/apple.png' />
  </label>
</div>
<div class="gcore-radio-item" id="fitem1">
  <input name="radio1" id="radio11" value="1" class="A" title="" style="" data-load-state="" data-tooltip="" type="radio" />
  <label class="control-label gcore-label-checkbox" for="radio11">
    <img src='/images/orange.png' />
  </label>
</div>

Bob

Well,
now I have a first try with the hint of your answer.
But there is a problem with a leading slash in front of the URL in the page-source code so that there is no icon.

Code in the Advance group:

 <img src="www.ebbeplusflut.de/images/header_amrum_lower.jpg" alt="Amrum" />

Code in the visible page:

<img src="/www.ebbeplusflut.de/images/header_amrum_lower.jpg" alt="Amrum" />

Hi RolloMan,

If you are going to add the domain name then it needs to be

 <img src="http://www.ebbeplusflut.de/images/header_amrum_lower.jpg" alt="Amrum" />

Bob

Hey Bob,
thanks for your professional help.
It works fine now.
Is it also possible to view an additional text near or under the icon?

Hi RolloMan,

Yes, edit the HTML to include what you need,

Bob

:D

Can I add an additional request ? 😉

With that solution, is it possible to remove the radio buttons (dots) and only keep the icons that would become darker if selected ?

Hi fredfitaire.

There are some suggestions in this StackOverFlow answer

Bob

Thanks Bob. I've checked your link but didn't succeed in implementing one of the proposed solutions.
I'll keep the first solution you gave in this topic, it doesn't really matter if there is a dot before each icon.

Just one thing I would like to improve: how can I horizontally align the icons ?

Hi fredfitaire,

Edit the HTML to remove the divs or use CSS to style them as inline-block ???

Bob

Which div shoul I remove in your code ?

Hi fredfitaire,

The ones that make the buttons + icons display vertically.

Bob

I just use the same code as the one you provided in your first reply in this topic. I don't see anything related to the vertical position in this code ...

    <div class="gcore-radio-item" id="fitem">
      <input name="radio1" id="radio1" value="0" class="A" title="" style="" data-load-state="" data-tooltip="" type="radio" />
      <label class="control-label gcore-label-checkbox" for="radio1">
        <img src='/images/apple.png' />
      </label>
    </div>
    <div class="gcore-radio-item" id="fitem1">
      <input name="radio1" id="radio11" value="1" class="A" title="" style="" data-load-state="" data-tooltip="" type="radio" />
      <label class="control-label gcore-label-checkbox" for="radio11">
        <img src='/images/orange.png' />
      </label>
    </div>

Hi RolloMan,

In HTML <divs> are like paragraphs, they show one after the other. Removing the divs puts the labels side by side but messes up the order of labels and buttons. if you add style='display: inline-block;' to each of the divs, that seems to work OK.

Bob

The next problem I have:
Iwould like to create a Tab Area and every tab shold have several groups of radiobuttons. Which kind of element do I need for grouping the custom code elements from your hint here https://www.chronoengine.com/forums/posts/t101198/p355640/radiobuttons-icons-instead-of-text.html#p355640?

Hi RolloMan,

I'd use a separate Custom Code element for each Radio Button Group.

Bob

ok,
the next challenge is to set a default radio button in each group.
Can I use the data-load-state="" or must I add the text checked in the input element?
I tried both but it doesn't work.

Hi fredfitaire,

Add checked='checked' to the input tag you want to have checked.

Bob