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

What is the best way to have a text field automatically insert a hyphen after specific numbers?

Is there a way to make a text field insert hyphens automatically after certain numbers? For example, when typing a date like 20120212, could we have the input automatically formatted with hyphens after the first 4 digits and the second two, so it displays ...

Tips for choosing an <li> element with JavaScript

<style> .sys_spec_text{} .sys_spec_text li{ float:left; height:28px; position:relative; margin:2px 6px 2px 0; outline:none;} .sys_spec_text li a{ color: #db0401; height:24px; padding:1px 6px; border:1px solid #ccc; background:#fff; dis ...

Modifying jQuery CSS causes certain CSS rules from a file to be deleted

When using jQuery to change the css of an element, I've noticed that it can remove some previously specified css rules for that element. For example, .className, .className2, etc... { background-color: black; color : silver; } .className: ...

Creating an Eye-catching Presentation: Tips for Adding Text to Your CSS3 Slideshow

I am currently in the process of creating a CSS3 slideshow with text for each image. I found inspiration from this example: . However, I made some modifications to make it responsive. Here is the HTML code I have used: <div id="slideshow"> < ...

Retrieve outcome from successful AJAX post and update HTML using globalEval

I have a function in JQuery that asynchronously posts data function post_data_async_globalEval(post_url, post_data, globaleval) { $.ajax({ type: 'POST', url: post_url, data: post_data, dataType: 'html', async: true, ...

Is there a way to utilize a Javascript function to incorporate commas into a div tag?

Being new to JavaScript, I have heard about jQuery but I don't know how to use it. Please bear with me as I am not well-versed in this area. :) I am currently importing data dynamically from an Excel database to a website. Everything is working fine ...

Obtaining gender information by utilizing checkboxes in Angular 7

I have developed an Angular application that enables users to filter samples by gender using checkboxes. The options include male, female, or both genders selected. Currently, the filtering works for selecting either male or female individually, as well as ...

Moving elements using CSS

Hi, I've been facing this issue with my web development since the start. Whenever I zoom in, the container also moves along. Is there any way to fix this problem? .darkslidecont{ width: 200px; height: 50px; position: relative; bac ...

When the CSS grid is equipped with a sticky left column, it will horizontally scroll if the grid's width exceeds 100% of its containing element

I am facing an issue with a CSS grid layout that has sticky left and right columns as shown below: .grid { display: grid; grid-template-columns: repeat(10, 200px); } .grid > div { border: 1px solid black; background-color: white; } .sticky- ...

PHP - What is the reason for the output being a multi-dimensional array?

Hey there, I'm currently working with this code and for some reason, the variable records2 is returning a multi-dimensional array. Can anyone help me figure out why this is happening? I actually need it to be a simple, single dimension array. functi ...

What is the best way to dynamically insert columns into HTML code?

This is an example of my HTML code: <div class="row text-center"> <div class="col h4">We Collaborate With:</div> <div class="col">company1</div> <div class="col">company2</div> ...

Unable to apply .png image using the content property in a Symfony project

I have a png image located in src/AppBundle/Resources/public/img To set the png image using the css content property, I used this code: content: url(../../public/assets/img/optional-checked.png); However, I encountered an error: GET http://127.0.0.1:80 ...

Center the div and make it position fixed

Is there a way to position a div in the center of the screen or its parent div, and have it fixed so that it does not shift when its width changes? I have a div containing a table, as shown below: I'm unsure if the outer div is needed. My goal is to ...

Unspecified variable in AngularJS data binding with Onsen UI

I am new to Onsen UI and AngularJS, and I have a simple question about data binding. When I use the variable $scope.name with ng-model in an Onsen UI template, it returns as UNDEFINED. Here is my code: <!doctype html> <html lang="en" ng-app="simp ...

Adjusting the position of the parent div by manipulating the bottom property

Is there a way to toggle the bottom property of a div when clicking its child anchor tag? <div class="nav" :class="{ 'full-width': isFullWidth }"> <a class="toggle-button" @click="toggleNav"><i class="fa fa-angle-down">< ...

Tips on how to align a wrapper-div in the center without affecting the positioning of the

I am looking to keep my page perfectly centered in the browser without affecting the content (similar to how align-text: center works). Specifically, I want to center my wrapper-div. How can I achieve this? Here is a simplified version of my current page ...

How can you create an accordion menu that expands when a button is clicked?

Is there a way to make an accordion menu open when the 'More' button is clicked? I've tried, but it always starts in its expanded state and collapses when the button is clicked. What I really want is for the accordion to be closed initially ...

Removing dropdown lists from input forms can be achieved without using jQuery by utilizing vanilla JavaScript

Looking to build a custom HTML/JavaScript terminal or shell. Interested in utilizing an input box and form to interact with JavaScript functions/commands. Unsure of how to eliminate the drop-down menu that appears after previous inputs. Pictured terminal: ...

Rotate the circular border in a clockwise direction when clicked

I have successfully designed a heart icon using SVG that can be filled with color upon clicking. Now, I am looking to add an outer circle animation that rotates clockwise around the heart as it is being created. Currently, the circle only spins in the code ...

How to create a heading within a Bootstrap list item?

Attempting to replicate this layout using Bootstrap 3 This is my current progress <ul class="list-group"> <li class="list-group-item> Cras justo odio </li> <li class="list-group-item> Dapibus ac facilisis in </l ...