The jquery accordion title width does not align with the content width when an icon is included

Is there a way to adjust the widths of the heading and div elements after adding edit and delete icons to match the standard accordion style? Thanks

<div id="accordion">
                          <h3><a href="javascript:;">
                          <span style="float:right;" class="ui-icon ui-icon-pencil hand" onclick="javascript:doEdit();"></span>
                          <span style="float:right;" class="ui-icon ui-icon-trash hand" onclick="javascript:doDelete();"></span>
                          <span>Created By: J Doe</span>
                            </a>
                            </h3>
                          <div>
                            <p>test</p>
                          </div>
                        </div>
javascriptjqueryhtmlcss

Answer №1

Success!

#accordion a span.ui-icon {
    display: inline-block;
    width: 25px;
    margin-left: 10px;
}

Discovered this solution on: Adding icon to the right in Jquery UI accordion

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

Please refrain from initiating the next action until the previous action has been completed

As a beginner, I am currently working on a photo viewer project using JavaScript and jQuery. My main issue arises when clicking on the arrow to view the next picture. I want the current picture to fade out smoothly before the new one fades in. However, th ...

javascriptjqueryhtmlcsscallback

Develop your website layout with Flexbox (Bootstrap 4.2), using stacked grid designs similar to the float: left method

For my Wordpress theme, I am utilizing Bootstrap 4.2 to design a basic grid layout for a list of blog posts. In my design, I have a Card that is double the height of others and I am attempting to 'float' two single-height cards beside it. Previ ...

csslayoutflexboxbootstrap-4

Incorporate Vuetify's v-stepper seamlessly with Vue router for dynamic functionality

Seeking assistance in integrating vuetify's v-stepper with vue router. Specific requirements include: Assigning each step its own route (e.g. /myform/step1, /myform/step2, /myform/step3, etc) Creating components for each step that are dynamically lo ...

javascriptvue.jsvue-routervuetify.jsv-stepper

Exploring Techniques for Streamlining HTML/CSS Editing in Browser

Is there a way to automatically edit specific lines on websites right after they load? Specifically, I want to change <div class="1"> to <div class="1" style="display:none">, and <div class="2" style ...

htmlcssgoogle-chrometampermonkey

Having difficulty adjusting images and divs with proportional percentages

Seeking to recreate the familiar experience of using a laptop, specifically on Windows Vista, with constrained proportions. The goal is for the laptop image to scale based on screen size and for all elements inside #Screen to adjust accordingly in relation ...

htmlcss

The ng-controller (dropdown menu) is functioning properly when tested locally and on JSFiddle, however, it is not working on

My HTML website with ng-app is functioning properly when tested locally and on certain coding platforms like JSFiddle and CodePen. However, it seems to encounter issues when deployed on Google Sites, Github, W3, and similar websites. The main functionalit ...

htmlangularjsangularjs-directive

Run a JavaScript function once the AJAX content has been successfully added to the element

I have a JavaScript AJAX function that retrieves content and adds it to an HTML element named content_holder. After the content is updated with the AJAX request, I want to trigger a function. I've attempted to include a <script> tag within the a ...

javascripthtmlajax

What is the ideal solution for resolving the problem of loading HTML page content in this specific situation?

Currently, I am working on an HTML website project where I am integrating header and footer content from separate HTML files into each page using jQuery. However, I have encountered an issue while the page is loading. Upon loading, the content initially ...

javascriptjqueryhtmlcsspageload

Check to see if it is possible to click an HTML div

Currently, I am engaged in Selenium and Robot Framework automated testing and in search of a method to automatically locate div tags that are capable of being clicked. The keyword Click Element works well when provided with a specific CSS selector, but ho ...

javascriptdomseleniumlistenerrobotframework

Handling a WCF POST request with JQuery resulting in a 400 Bad Request HTTP Response

I'm encountering an issue with my JQuery POST not being accepted by the WCF Service. Below is the JavaScript code for the POST: function jqueryPost() { var url = "/LoggingTest"; $.post(url, { message: "test message" }); } To handle the POST ...

c#jquerywcfposthttpwebrequest

Exhibit Parsed Data with Jquery using Json Technology

After successfully retrieving the data through ajax, I am faced with the challenge of parsing it and extracting the items. API Link: JSON Response { "response": { "total_count": 1, "games": [{ "appid": 252950, "name": "Rocket Lea ...

jqueryjsonparsing

Is it feasible to invoke an action specified in the indexController using jQuery.ajax?

Attempting to invoke an action within the indexController using Jquery.Ajax, but nothing seems to occur. As a beginner in Zend and Ajax, I'm unsure of what might be going wrong. Can this be done? Thank you in advance.... ...

phpajaxzend-frameworkjquery

When passing parameters through a URL in TypeScript, the display shows up as "[object object]" rather than as a string

Hey there! I'm trying to pass some string parameters to my URL to fetch information from an API. Everything seems fine, and when displayed in an alert, the URL looks exactly as it should (no [object, object] issue). var startDate = "2020-09-20"; var ...

javascriptangulartypescripthttp

Has jQuery UI Accordion taken over the design of unordered lists?

I'm having trouble with my website's navigation styling getting messed up by the jQuery accordion. The unordered list inside the .accordion div is overflowing and losing its CSS styling. I've tried adding clearStyle true and autoHeight false ...

jquerycsslistaccordion

Bootstrap's Well Size Has Been Set into Place

Is there a way to keep the size of a text display container fixed while still making it responsive when cycling through different lengths of text with a button click? <div class ="col-md-6"> <p id="quote">Delighted with m ...

javascriptloopsgrid-layout

What is the best way to showcase only the most recent data that has been received

Hey there, I'm working on a way to display only the most recent message of the day, However, I'm facing an issue where my code is always selecting the first message instead of the latest one. Even though it's not the initial object in the ...

javascriptnode.jsslack-apiatlasboard

Node - Creating personalized error handling functions

Currently in the process of developing custom helper methods to eliminate redundancies, utilizing express-promise-router app.js has set up the error handler middleware //errorHandler app.use((err, req, res, next) => { //const error = a ...

javascriptnode.jsexpresserror-handlingecmascript-6

Tips for generating a JSON array with key-value pairs

I am working with an array that looks like this and attempting to create a key-value pair: var text = ["One","TWO","THREE"]; var myarray = []; $( document ).ready(function() { for(var i=0;i<text.length;i++) { var name = text[i]; var toaddstr = ' ...

jquery

Dealing with errors when Ajax response is not defined

Trying to display errors when Ajax is unsuccessful, but struggling to access the specific error details. example Here is the information from the network tab playground {"message":"The given data was invalid.","errors":{"title":["The title field is requ ...

javascriptjqueryajax

Struggling to hide empty columns in an HTML table with jQuery - it's just not cooperating!

<html> <head> <script src="jquery-1.4.4.js"></script> <script> $('table').each(function(a, tbl) { var currentTableRows = $(tbl).attr('rows').length - 1; $(tbl).fin ...

phpjavascriptjqueryhtml