Issue with setting position to the right using jQuery CSS

Question

Issue with setting position to the right using jQuery CSS

I have a div with the CSS property position:absolute. I am attempting to align it to the right using jQuery, but for some reason it is not working as expected. In the code snippet below, I am removing the left positioning and adding right:0 in order to move the div all the way to the right side of its container. When I inspect the element using Firebug, I can see that the inline style has been updated to right:0, however, the actual positioning does not change. What could be causing this issue? View the code on http://jsfiddle.net/SJP3b/1/

$('div').css({
    left: '',
    right: 0
});

javascript jquery css

Answer 1

Answer №1

To fix the issue, try using left:'auto':

http://jsfiddle.net/ABC123/4/

Certain values cannot be left blank. You must revert them back to their default CSS value.

In this case, use auto for the left property:

http://www.w3schools.com/css/pr_pos_left.asp

Answer 2

To fix the issue, try using left:'auto':

http://jsfiddle.net/ABC123/4/

Certain values cannot be left blank. You must revert them back to their default CSS value.

In this case, use auto for the left property:

http://www.w3schools.com/css/pr_pos_left.asp

Answer 3

Answer №2

Is "right" a recognized CSS property? If it is, this code should function properly.

$('div').css({
    left: auto,
    right: 0
});

It seems like it should work...

Another option to consider is using float:right instead.

Answer 4

Is "right" a recognized CSS property? If it is, this code should function properly.

$('div').css({
    left: auto,
    right: 0
});

It seems like it should work...

Another option to consider is using float:right instead.

Answer 5

Answer №3

To achieve the desired effect, it is necessary to utilize '0px'

$('div').css({
    left: '',
    right: '0px'
});

UPDATE:

I apologize for the confusion. When using the position:absolute property, the correct properties to manipulate are left and top, rather than relying on jQuery.

Answer 6

To achieve the desired effect, it is necessary to utilize '0px'

$('div').css({
    left: '',
    right: '0px'
});

UPDATE:

I apologize for the confusion. When using the position:absolute property, the correct properties to manipulate are left and top, rather than relying on jQuery.

Issue with setting position to the right using jQuery CSS

Answer №1

Answer №2

Answer №3

Similar questions

What is the method for configuring body attributes in CSS with AngularJS?

Give precedence to several concurrent rules

"Incorporating Node.js (crypto) to create a 32-byte SHA256 hash can prevent the occurrence of a bad key size error triggered by tweetnacl.js. Learn how to efficiently

Guide on retrieving the index of the selected row in Ionic 2

Interactive JavaScript Slider for Customizing Selection

Select either one checkbox out of two available options

javascript - modifying nested field based on condition in map

Adjust the visibility of components depending on the width of the screen

Verify the occurrence of a search result and if it appears more than once, only show it once using JavaScript

Error encountered in Webpack 4 when trying to compile node modules CSS file: Unexpected .(dot) token

Center align the list items on mobile using flex in bootstrap 4

Is there a way to make a React Component to update and navigate to a specific position using react-sound

Can I rely on setTimeout to guarantee the execution of a task in NodeJS?

jquery executes a function on each element that is discovered using the .find method

Angular is encountering an issue where it is unable to read the value of a JavaScript function, despite the object having a value

Using Vue for Firestore pagination

Is it possible to customize individual CSS attributes for a section within a webpage's layout using a view?

Please enter only numerical values using jQuery

The absence of a base path in NestJs swagger configuration

Parsing error: Unexpected character found at line 238, column 16. Consider using a loader suitable for this file format