Options in Joomla Back-end Plugin

Just started diving into Joomla programming and I managed to create a plugin that functions perfectly. However, there's one small issue that's been bothering me all day. The configuration options in the back-end are shifted by a 180px left margin. Upon investigating, I discovered that the options are enclosed within a div styled as "control-group" which is causing this offset.

To provide a clearer picture of the problem, here's a simplified version of the output:

<div class="control-group">

<div class="control-label">
    <label id="jform_params_group_template_mapping-lbl" for="jform_params_group_template_mapping" class="hasTooltip" title="" data-original-title=""></label>
</div>

<div class="controls">
    //Here lies my generated code
    <div class="control-group">
        <div class="control-label">
            <label>Uncategorised</label>
        </div>
        <div class="controls" style="float:right;margin-right:20%;">
        </div>
    </div>

    <div class="control-group">
        <div class="control-label">
            <label>Blog</label>
        </div>
        <div class="controls" style="float:right;margin-right:20%;">
        </div>
    </div>

    <div class="control-group">
        <div class="control-label">
            <label>TestingTemplate</label>
        </div>
        <div class="controls" style="float:right;margin-right:20%;">
        </div>
    </div>
</div>

</div>

It seems like all my controls are nested inside another control. I'm struggling to identify where the parent Div with the class control-group originates from. Ideally, I'd like my generated content to have their own controls and not be sub-divs.

If you could point me in the right direction or specify which part of the code needs attention, it would greatly assist me in resolving this issue. My intuition tells me it might be related to the manifest XML, but being new to Joomla, I'm uncertain.

The configuration segment of the manifest file appears as follows:

<config>
    <fields name="params">
        <fieldset name="basic">
            <field type="fta.mapping" name="group_template_mapping" addfieldpath="/plugins/system/assigntemplatebycategory/fields" description="PLG_SYSTEM_TEMPLATE_ASSIGNER_GROUP_TEMPLATE_MAPPING_DESC" label="PLG_SYSTEM_TEMPLATE_ASSIGNER_GROUP_TEMPLATE_MAPPING_LABEL" default=""/>
        </fieldset>
    </fields>
</config>

Answer №1

The setup of the configuration file appears to be correct, although it is not conventional as the addfieldpath is typically specified at the fields level rather than for individual fields.

<config>
    <fields addfieldpath="/administrator/components/com_littlehelper/elements/" name="params">

It's uncertain whether this could cause any issues.

It is probable that the issue relates to the custom field. To verify, change the field type to text and check if the unexpected indentation persists. If it does, the custom field output in

/plugins/system/assigntemplatebycategory/fields/fta.mapping.php
may need an additional wrapper.

Additionally, consider relocating the addfieldpath attribute to the fields element (and remove it from the field).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Implementing a seamless transition effect on two slideshows using jQuery's fadeslideshow

I currently have a homepage featuring a fadeslideshow with 5 slides. The fadeslideshow plugin being used can be found at http://plugins.jquery.com/project/fadeslideshow. On the homepage, there is also a menu bar with various menu items. When a user clicks ...

Data modifications in polymer are not being accurately displayed

I need help with hiding/unhiding a UI element using a button in Polymer. Despite having the necessary elements and code set up, it is not working as expected: <button id="runPredictionButton"> <i>Button text</i> </button> <p ...

jQuery UI Sortable: Efficiently Drag Items Across Multiple Interconnected Lists

One feature of using jQuery UI Sortable is the ability to make the sortable item container scroll when an item is dragged. This can be achieved by specifying the scroll option. In my case, I have several sortable lists that are connected within separate c ...

Activate a click event on an element using Simple HTML DOM

I need assistance in triggering a click on the element below and then retrieving its innertext. <a class="btn btn-sm btn-default" href="javascript:;" onClick="score(238953,this)">Show result</a> Once the "onClick" event is triggered, the elem ...

@media doesn't seem to be functioning properly when the screen width is below

I've been working on making my website fully responsive, but I've run into an issue where it won't recognize anything below 980px in width. Here is the CSS code I'm using: @media screen and (max-width:1029px){ h1{ font-size ...

What is the best way to ensure that the question text will wrap onto a new line if it becomes too lengthy

I am currently working on developing ASP.NET MVC applications. However, I am facing a design issue with the HTML, CSS, and Bootstrap elements on one of my pages. The problem arises when Question 8 exceeds the border and does not wrap to a new line as inte ...

Guide to adding a CSS class to an Ionic2 toast

i found a helpful resource on applying cssClass to my toast component. within my HTML, I have buttons: <button ion-button (click)="presentToast()"> toast</button> Here is the code snippet from my .ts file: presentToast() { let toast = t ...

How can I make an HTML textbox in C# MVC flash a background color for one second using TextBoxFor?

I'm currently working with MVC and have the following code in my razor view. @Html.TextBoxFor(x => model.DateTimeStamp, new { @readonly = "readonly", @class=ViewBag.IsLatest ? "latest":""}) I want to briefly change the background color of this te ...

Header of table remains fixed as user scrolls through data, allowing for easy reference. The left

Above, I have utilized some code from another answer here to display a table. However, I am now contemplating the possibility of customizing it so that the first column remains fixed for horizontal scrolling. Currently, I'm employing the following as ...

What is the process for choosing an element, wrapping it in a <div>, and appending a class to it using only JavaScript?

When constructing a responsive website, all CMS entries are in markdown. It's not feasible to manually code the div into each new entry, so dynamic class addition is necessary. The task at hand involves selecting an <img> within a post and wrap ...

Incorporate a CSS design element in the lower right corner of the screen by adding a box

I'm looking to create a layout where a list of cards is displayed with maximize, minimize, and close buttons located at the bottom right of each card. The cards should be arranged from bottom right to left, but I'm having trouble achieving this p ...

Tips for preventing the hard coding of option values or inner HTML within a select menu when working on CS50 Finance

<select name="symbol"> {% for row in stocks %}} sym = row["symbol"] <option value=sym>sym</option> {% endfor %} </select> The current code snippet above displays a drop-down menu populated with stock symbols from a ...

Leverage htaccess functionality to modify website configurations without altering the URL

I currently have the following htaccess configuration: <IfModule mod_rewrite.c> RewriteEngine On RewriteRule ^(.*)$ dl.php?id=/$1 [QSA,L] </IfModule> It works perfectly fine. However, I am facing a problem with my site URLs and images ...

How to retrieve the selected values of specific option tags using jQuery?

I have a situation where I need to select an option from a dropdown menu. Here is the code for the dropdown: <select id="customUser_id" name="customUser_id"> <option value="2" label="Friends Of Friends">Friends Of Friends</option> &l ...

Execute a function only once when using it in conjunction with ng-repeat in AngularJS

I need a way to ensure that a specific function is only called once when used in conjunction with ng-if and ng-repeat. <td ng-if="!vm.monthView && vm.yearView=='contract-year'" nginit="vm.ContractYearBaselines()" class="baseline-data ...

Tips for nesting an anchor tag within another tag

After reviewing various inquiries on this platform, it has been commonly believed that embedding an anchor tag inside another anchor tag is not achievable. However, I recently stumbled upon a website that successfully accomplishes this and I am curious to ...

I'm having trouble getting rid of this stubborn loader on the website

I am currently utilizing the following template: . My objective is to eliminate the preloader progress bar that displays the loading progress of the page in percentage. The files associated with this preloader are as follows: Loader CSS File - www[dot]the ...

Ways to rejuvenate an Angular element

Last month, I was called in to rescue a website that was in chaos. After sorting out the major issues, I am now left with fixing some additional features. One of these tasks involves troubleshooting an angular code related to videos and quizzes on certain ...

What is the best way to implement a calendar view for selecting time periods on an HTML page?

Is there a way to implement a calendar view when clicking on the input box within an HTML page? I am looking to create a function where users can select a time period to generate a file. How can this be accomplished? If possible, could you share some samp ...

What is the best way to show JavaScript output with span style?

I have added a translation feature that allows users to switch paragraphs to French when clicked. Each paragraph now has the first word wrapped in a span with a CSS class that enlarges and colors the text. However, I am facing an issue where when switchi ...