The output generated by JQuery varies from the fixed sample

Utilizing plain HTML, I constructed a button based on the jQuery output shown below. The code for the static HTML button is as follows:

<a id="button1" title="Reset" style="padding: .5em .5em .5em .5em;" 
class="ctkit-button-light-gray 
       ctkit-button-rounded-light-gray 
       ctkit-button-enabled-light-gray">

    <div style="display: table; width: 100%;">

        <div style="display: table-cell; text-align: center;vertical-align: middle;">
            <img src="/Images/reset.png" title="Reset" style="border: 0px; width: 1.5em; height: 1.5em;">
        </div>

        <div style="display: table-cell; text-align: center; vertical-align: middle;">
            <span style="padding-left: 2px;"> Reset</span>
        </div>
    </div>
</a>

Styling the button with CSS:

.ctkit-button-light-gray
{
    font-size: 12px;
    font: "Arial, Helvetica, sans-serif"; 
    display: inline-block; 

    text-decoration:none;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.3); 

}

.ctkit-button-rounded-light-gray
{
    -webkit-border-radius:.4em;
    -moz-border-radius:.4em;
    border-radius:0.4em;
}

.ctkit-button-enabled-light-gray
{
    cursor: pointer; 
    cursor: hand; 
    color:#474747;
    border: solid 1px #bcbcbc;

    background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e3e2e2));
    background:-moz-linear-gradient(top,  #ffffff,  #e3e2e2);
    background: -ms-linear-gradient(top,  #ffffff,  #e3e2e2);
    opacity:1;
    filters.alpha.opacity:100;
}

It's important to note the vertical alignment of the image and text in the button.

However, upon attempting to create the button dynamically using jQuery with the provided code:

var settings = $(this).data('ctkit-button').data;


var id = $(this)[0].id;
var style = '';


var css = 'ctkit-button-' + settings.theme + ' ';
if(settings.rounded)
    css += 'ctkit-button-rounded-' + settings.theme + ' ';
else
    css += 'ctkit-button-normal-' + settings.theme + ' ';

if(settings.enabled)
    css += 'ctkit-button-enabled-' + settings.theme + ' ';
else
    css += 'ctkit-button-disabled-' + settings.theme + ' ';
var div1 = $('<div />',
{
}).attr('style', 'display: table; width: 100%; ');

var div2 = $('<div />',
{
}).attr('style', 'display: table-cell; text-align: center; vertical-align: middle; ');

style = 'border: 0px;';

if(settings.width.length > 0)
    style += 'width: ' + settings.width + '; ';
if(settings.height.length > 0)
    style += 'height: ' + settings.height + ';' ;

var img = $('<img />',
{
    src : settings.image
}).prop('title', settings.tooltip).attr('style', style);

$(div1).append($(div2).append(img));

var div3 = $('<div />',
{
}).attr('style', 'display: table-cell; text-align: center; vertical-align: middle; ');

var span = $('<span />',
{
}).attr('style', 'padding-left: 2px;').html(settings.text);

$(div1).append($(div3).append(span));
$(this).append(div1);



$(this).prop('title', settings.tooltip);
$(this).attr('style', settings.padding);
$(this).addClass(css);

where the value of the settings object is:

var settings = {
    _instance: "",
    theme: "light-gray",
    tooltip: "",
    image: "",
    padding: "padding: .5em .5em .5em .5em;",
    text: "",
    enabled: true,
    rounded: true,
    width: "",
    height: ""
}

Unfortunately, the dynamically created button is not properly vertically aligned and appears larger than expected.

This issue arises despite the fact that the static HTML code provided above renders correctly when viewed in a static HTML file after creation using:

var html = $('html').html();

I am currently puzzled by this discrepancy and am seeking a solution to rectify it.

jqueryhtmlcss

Answer №1

When defining your HTML element using jQuery, consider using curly braces to define attributes instead of chaining the .attr() method:

var div1 = $('<div />', 
    {'style': 'display: table; width: 100%; '}
);

Additionally, ensure that the vertical-align: middle attribute is added to the image tag styling to properly center the image:

var img = $('<img />', {
    'src' : settings.image,
    'title': settings.tooltip,
    'style': 'vertical-align: middle; ' //add your other rules as well.
});

For further information on using display: table and vertical-align, check out this Stack Overflow post:

Vertically align text next to an image?

Best of luck!

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

The TreeView control displays as a <div> element, which results in an unexpected line break

I am currently working on designing a layout that includes an ASP.NET TreeView control on the left-hand side. However, I am facing an issue where the TreeView renders as a div, causing a line break. I have tried using display:inline, but it doesn't se ...

asp.nethtmlcsstreeview

Creating an app using Ionic 1 that features scrollable tabs with the ability to handle overflow

My current code snippet is displayed below. On smaller mobile screens, all 7 tabs are not visible at once and instead appear in two rows which looks messy. I want to modify the display so that only 3 tabs are visible at a time and can be scrolled through. ...

javascripthtmlcssionic-framework

Design a unique CSS box using Bootstrap

Hey there! I'm currently working on creating a CSS box with Bootstrap. If you'd like to take a look, feel free to check it out here. I noticed that the padding box isn't affecting the margin-top - any ideas why? Also, I'm trying to ge ...

jqueryhtmlcsstwitter-bootstrap

After closing, the position of the qtip2 is being altered

I've successfully integrated the qtip2 with fullcalendar jQuery plugin, which are both amazing tools. However, I'm encountering an issue with the positioning of the qtip. Here's the code snippet I'm using: $(window).load(function() { ...

javascriptjquerycssqtip2

Creating an email body using css and html from a file on Android - how can it be done?

After searching extensively, I have come across a plethora of solutions on how to load HTML into the body of an email intent. However, I am struggling to find a way to load a file that contains CSS and HTML content. I have a specific program in which I dis ...

htmlcssemailandroid-intent

Sending a substantial amount of HTML via $ajax does not seem to be functioning properly

Creating a product page for an e-commerce platform involves submitting data through an AJAX call to store it in the database. However, there is an issue when large amounts of HTML data are being passed, resulting in nothing being stored in the description ...

jqueryajax

Ensure that the heights of columns in UL CSS are aligned regardless of the number of lines they contain

In my current project, I am using CSS columns to establish a two-column layout for an unordered list. Here is the code snippet: HTML <div class="meta-data"> <ul> <li><i class="fa fa-chevron-right fa-xs"></i><str ...

htmlcsshtml-lists

Any solutions for dealing with longer labels in Bootstrap form-floating?

Is there a way to use Bootstrap's form-floating feature with longer labels so that the text box automatically expands to accommodate the text but doesn't cut off on white-space wrap when too long? I'd like to avoid using position-relative to ...

htmlcssbootstrap-5

How can I ensure that a bigger sprite image fits inside a smaller div?

I have a unique situation where I am working with a large image sprite that is 1030px by 510px and contains two smaller images, each being 515px by 515px. My goal is to extract the two small images from the sprite and set them as backgrounds for two <im ...

htmlcss

Thymeleaf: Expression parsing error

I am working on a Thymeleaf template that includes pagination functionality. <ul class="results_perpage" > <li th:if="${previous != null}"><a th:href="javascript:movePage(`${previous}`);" class="results_menu" th:text="PREVIOUS">< ...

javascripthtmlthymeleaf

Having trouble with the scrollTop function in your Rails application?

I recently delved into using jQuery and have implemented a two-column layout with Twitter Bootstrap. The CSS in my file looks like this: html, body { overflow: hidden; height: 100%; } .span8, .span4 { overflow: auto; } This setup results ...

jqueryruby-on-railsscrollbar

Optimizing WordPress with server-side AJAX caching

I am looking for a way to store AJAX responses on the server side rather than constantly retrieving data from the database every time a client makes a request. function post_filter($filter_action,$filter_values) { var ajaxurl = SiteInfo.home_url+&apos ...

jqueryajaxwordpress

The table is empty as no data is present when utilizing DataTables along with an AJAX request for a

I've been attempting to populate a table with data from a JSON file using DataTables. However, every time the page loads, all I see in the table is "No data available in table". Here's the code snippet I'm currently working with: <table ...

jquerynode.jsajaxexpress

Showcase a sizable picture broken down into smaller sections

I am interested in creating a mapping application similar to Google Maps that can asynchronously load images from the backend. I am seeking guidance on where to begin and how to proceed in this endeavor. The ultimate goal is to have the image displayed w ...

javascriptjqueryhtml

"Attempting to troubleshoot a calculator built with html, css, and js. I'm stumped as to what could

After following a tutorial on YouTube, going over the code multiple times, and still experiencing issues with the calculator. Sometimes it works fine, other times certain buttons like (+, -, x, ⁄) don't function properly. I've provided the enti ...

javascripthtmlcsscalculator

issues with background image alignment in css

I attempted to add a sticky background to a div, which was successful. However, I am encountering an issue where the background does not stretch enough during scrolling. Below is the CSS code I used to apply the background, along with screenshots displayin ...

htmlcss

Disabling the ability to edit the rightmost portion of an input number field

I am looking for something similar to this: https://i.stack.imgur.com/ZMoNf.jpg In this case, the % sign will be shown in the input field by default and cannot be changed or removed. The user is only able to modify the number to the left of the % sign. P ...

javascriptjquerycsshtml

Activate an iframe upon changing the media query

I am currently working on a webpage where I have included an image within an iframe. I am looking to change the content displayed inside the iframe based on different media query breakpoints. For instance, if the viewport has a minimum width of 900px, I ...

htmlcssiframe

Error arises when using ODBC PDO alongside Ajax functionality

I've encountered a problem while working on a project at my job. I'm using PDO queries and ajax to generate dynamic elements, but I can't seem to fix a specific issue. The problem is that regardless of the option selected in two dynamically ...

javascriptphpjqueryajaxpdo

The outline feature cannot be applied to buttons within a btn-group in Bootstrap 4

I have successfully removed the outline for a single button, but I am struggling to remove it for a button within a btn-group class. Check out my JSFiddle DEMO This is the HTML code I am working with: <button class="btn btn-primary">Button without ...

cssbootstrap-4