Setting line height as a pixel value does not yield the desired result

$(element).css(options.css).attr(options.attr).addClass(options.class)
//ensure line-height is correctly assigned
if($(element).is('p') && _.isString(options.css['line-height'])){

  console.log('line-height assigned: '+ options.css['line-height'] + ' , and now = ' + $(element).css('line-height'))

}

output:

line-height assigned: 15px, and now = normal
line-height assigned: 15px, and now = normal 
line-height assigned: 15px, and now = normal 
line-height assigned: 15px, and now = normal 
line-height assigned: 15px, and now = normal 
line-height assigned: 33px, and now = normal

Why can't I set line-height in pixels....

Check out the jsfiddle (which works fine):

http://jsfiddle.net/wyvernmonarch7/S9Scd/

I'm not sure what's wrong with my code, but something seems off... any ideas?

EDIT: options.css, options.attr, and options.class are all OBJECTS. There are no errors in my code. Removing options.attr and options.class doesn't change anything. Here's the console log from options.css

Object {line-height: "15px", width: 87, height: 15, font: "11px arial", color: "#FFFFFF"…}
color: "#FFFFFF"
display: "none"
font: "11px arial"
font-weight: 400
height: 15
line-height: "15px"
pointer-events: "none"
text-align: "center"
width: 87
__proto__: Object

line-height assigned: 15px, and now = normal 
Object {line-height: "15px", width: 87, height: 15, font: "11px arial", color: "#FFFFFF"…}
color: "#FFFFFF"
display: "none"
font: "11px arial"
font-weight: 400
height: 15
line-height: "15px"
pointer-events: "none"
text-align: "center"
width: 87
__proto__: Object
line-height assigned: 15px, and now = normal
Object {line-height: "15px", width: 87, height: 15, font: "11px arial", color: "#FFFFFF"…}
color: "#FFFFFF"
display: "none"
font: "11px arial"
font-weight: 400
height: 15
line-height: "15px"
pointer-events: "none"
text-align: "center"
width: 87
__proto__: Object

line-height assigned: 15px, and now = normal

//////////////

EDIT: running after window.load

jquerycssheightlinepixel

Answer №1

When utilizing jQuery's .css() as a setter, make sure to provide it with an Object instead of an Array. Your choices should be structured like this:

choices = {
  css: {
    'font-size': '16px'
  }
}

For more information, refer to the jQuery documentation here: http://api.jquery.com/css/#css-properties

Here is a simplified fiddle showcasing your options.css: http://jsfiddle.net/AbCdE/1/

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

How can I update an Angular Datatable to display new JSON data?

I have a Datatable controller set up as shown below: //Module / Módulo var angularDataTables = angular.module("angularDataTables", ['datatables', 'datatables.buttons' , 'datatables.bootstrap']); //Controller / Controlador ...

javascriptjqueryangularjsjsondatatable

I am currently working on creating a timer and I am looking to position these three buttons in a circular formation

I want to create a stopwatch with 3 responsive buttons arranged in a circular layout. I have successfully built a responsive circle and now need help adding the buttons inside the circle next to the timer. To view the code, click here: https://jsfiddle.ne ...

htmlcssbootstrap-4

Ways to alter the color of an icon when hovering over it

Is there a way to change the color of a material icon inside an IconButton material component when hovering over the IconButton? I've tried adding a class directly to the icon, but it only works when hovering over the icon itself and not the IconButto ...

javascripthtmlcssreactjsmaterial-ui

What are some ways to stop the default event action from occurring when a parent HTML element has an event handler attached to it?

I have a bunch of hyperlinks on my webpage that I want to ajaxify so that clicking on a link deletes the associated item. I attached an event handler to a parent container like this: <div id="parent"> <a href='#' data-itemid='1& ...

javascriptruby-on-railsajaxjquery

Constantly positioning the text cursor over the Textbox

I am currently in the process of developing a webpage that will feature only one text box for displaying information based on the input data provided. Our strategy involves utilizing either a Barcode Scanner or Magnetic Swipe as well as a Touch Screen Moni ...

javascriptjqueryuser-interfacefocus

How can I ensure that a button remains fixed at the bottom of a Material UI React Component?

I am currently working on developing a layout for a web application, and I have encountered an issue that I am struggling to resolve. The structure of my grid is as follows: https://i.sstatic.net/TEU2a.png My goal is to ensure that each section inside t ...

javascriptcssreactjswebmaterial-ui

Attempting to create a JavaScript calculator from scratch

After spending hours typing and debugging my code for a school assignment, I have created a calculator that still isn't working. I'm hoping someone can help me find the errors in my code. function myStory() { window.alert ("Very doge"); } // ...

javascriptjqueryhtmlcsscalculator

How to eliminate arrow icons from Bootstrap Carousel

Welcome to my blog at www.lowcoupling.com. I am trying to hide the left and right arrows on the bootstrap carousel, but my code doesn't seem to be working. Here is what I have tried: .glyphicon-chevron-right{ display:none; } (I also tried the ...

htmlcsstwitter-bootstrap

What is causing my AJAX Contact Form to navigate away from the original page?

I configured a contact form on my website more than 5 years ago, and I vividly remember that it used to show error/success messages directly on the page within the #form-messages div. However, recently, instead of staying on the contact form page and displ ...

javascriptphphtmljqueryajax

Creating a Dynamic Slideshow on Autopilot

My JavaScript skills are not perfect and I'm feeling a bit lost. I have this code for a slideshow, but I want to make it automatic while also allowing users to navigate between images freely. I'm struggling to figure out how to implement this fun ...

javascripthtmlcss

Is it possible to dynamically append and delete rows of interconnected dropdown menus?

I'm currently working on a form that allows users to add and remove rows with cascading dropdowns for class selection. Everything is functional except for the feature to remove selected classes. I've experimented with different methods like the ...

javascripthtmljqueryformsfrontend

Issues encountered when using Vue Transition in conjunction with v-autocomplete

Attempting to conditionally display or hide a selection text field using Vue's Transition feature, but experiencing an issue where the text field appears and disappears without any transition effect. <template> <Transition v-if="is ...

cssvue.jsvuejs3vuetify.js

Encountered an error: Trying to access the property 'push' of an undefined value

Hey there, I've successfully used jQuery to dynamically generate a textbox. Now, I am facing an issue where I need to retrieve the value entered in the textbox using an AJAX function and then pass that value to another PHP file. When I type something ...

jqueryajax

What is the best way to iterate through elements that come after a specific element?

I'm confident that I will be able to provide an answer to this very soon... Here's a sample code snippet: <script> function ClearAndRunFuncs(element) { //Clears responses for elements AFTER this element with an onchange //Executes the uni ...

javascriptjquery

"Exploring the Magic of Jquery's Fadein() Animation

i have experience with writing code for a jQuery fadein effect. imagine I have an HTML element stored in a variable, like this: var sHtml="<div>Other content</<div><div id='frm'>hello</<div>"; modal.load(jQuery(sHt ...

javascriptjquery

What is the method for extracting information from a dropdown menu using AJAX and transmitting it to a PHP script?

Looking to obtain the name of the selected category from a drop-down list using AJAX and send it to the PHP page containing the AJAX script. Here is the updated code: Action code: public function actionCreate() { $model=new News; // ...

phpjqueryajaxyii

Ways to slightly boost the default font-size values when using wicked-pdf

In the wicked-pdf report, I have body content with varying font sizes. When I apply a font-size of 16px to the paragraph like so: p { font-size: 16px !important; } The entire paragraph's font size becomes 16px, which may include words with diff ...

ruby-on-railshtmlcssruby-on-rails-2wicked-pdf

Eliminate the link outline in p:tabView

How can the outline be removed when a user clicks on one of the tabs in <p:tabView>? Attempts to set it in CSS were unsuccessful. a { outline: 0 none !important; } Shown below is a screenshot of the issue. ...

cssjsfprimefaces

Exploring the process of assigning IDs to anchors in CodeIgniter and implementing them in jQuery

I am trying to assign an ID to an anchor tag in CodeIgniter and then use that ID in jQuery. Can anyone explain how to set the ID in the code below and how to access it using `$()` in jQuery? anchor('welcome/remove_rcrd/'.$row['id'], &a ...

phpjquerycodeigniter

Having trouble with Laravel routes and jQuery $.post()? Keep getting a frustrating 404 Not Found error?

A JavaScript file with jQuery that is responsible for sending a POST request $.post('log_in', { email: email, password: password }, function(response) { $('#log_in_result').html(response); console.log(response); }); In the Lar ...

javascriptphpjquerylaravel-4