• 1

Read this first!

We do not monitor these forums. The forum is provided to exchange information and experience with other users ONLY. Forum responses are not guaranteed.

However, please submit a ticket if you have an active subscription and wish to receive support. Our ticketing system is the only way of getting in touch with RSJoomla! and receiving the official RSJoomla! Customer Support.

For more information, the Support Policy is located here.

Thank you!

TOPIC: How to add the input-group-addon

How to add the input-group-addon 8 years 2 months ago #36470

  • info6586
  • info6586's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 14
Hi,
I need to add a map icon in front of a Textbox field and was wondering if anyone can help with that?

in Bootstrap you add the "input-group-addon" before the input but not sure where to add it in the RSForm field.
<div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Postcode</label>
    <div class="input-group">
      <div class="input-group-addon"><i class="fa fa-map-marker" aria-hidden="true"></i></div>
      <input type="text" class="form-control" id="postcode" placeholder="Postcode">
    </div>
  </div>
I tried before {postcode:body} or after the label but no luck.
<div class="form-group rsform-block rsform-block-postcode{postcode:errorClass}">
		<label class="control-label formControlLabel" data-toggle="tooltip" title="{postcode:description}" for="postcode">{postcode:caption}</label>
		<div class="formControls">
			{postcode:body}
			<span class="formValidation">{postcode:validation}</span>	
		</div>
	</div>
Any help would be appreciated.
thanks.
The administrator has disabled public write access.

How to add the input-group-addon 8 years 2 months ago #36519

  • info6586
  • info6586's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 14
I submitted a support request and Adrian Paciu, helped me with that:

It might be useful for others with the same problem.

You'll have to follow the Bootstrap 3 documentation and replicate this in your layout. Further to this, after performing a layout change you can always check in the frontend area how this was interpreted by inspecting the page's source code or by using a page inspector tool.

Steps to take:

- I've followed the documentation on this matter here:

v4-alpha.getbootstrap.com/components/input-group/

- within the form layout, I've enclosed a textbox body placeholder like so:
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
            {myTextbox:body}    
</div>

- also edited the textbox and add the following within the additional attribute area (edit the textbox > Attributes > Additional Attributes):
aria-describedby="basic-addon1"
Notice the value used is the above span ID, which is used to correlate it with the actual textbox.

Regards!
The administrator has disabled public write access.
  • 1

Read this first!

We do not monitor these forums. The forum is provided to exchange information and experience with other users ONLY. Forum responses are not guaranteed.

However, please submit a ticket if you have an active subscription and wish to receive support. Our ticketing system is the only way of getting in touch with RSJoomla! and receiving the official RSJoomla! Customer Support.

For more information, the Support Policy is located here.

Thank you!