Irregular dimensions of div elements following automated selection

My tile div can be selected using the mouse or a timed event. Here are the states of selected and unselected :

Not .selected

.selected applied

.tile
{
    height: 70px;
    padding: 5px 10px 5px 10px;
    margin: 8px auto 0px auto;
    width: 280px;
    background-color: #99b433 !important;
    cursor: pointer;
}

.tile.selected
{
    border-left: 10px #2d89ef solid;
    width: 270px !important;
}

The issue arises when I click on the tile and the class is applied via CSS:

// tile click handler
$('.tile').click(function () {
    $('#leftPane').children().removeClass('selected');
    $(this).addClass('selected');
});

However, if this is triggered by an ajax function every 15 seconds:

$('#' + selectedId).addClass('selected');

In Chrome, I encounter:

When I hover over it, it reverts back to the .selected state as shown above.

.tile:hover
{
    border: 2px solid #2d89ef;
}

Any insights on this peculiar behavior? I have tested in IE 10 and Safari where it does not exhibit the same issue.

EDIT (for eric) After setting auto, it fills the entire width:

Answer №1

To eliminate the need for !important, simply remove the border-left property from your .selected class:

.tile.selected
{
    width: 270px;
}

Check out the updated code here

Answer №2

The issue is likely caused by the CSS property width: 270px !important;. Try changing the width to auto and see if that resolves the problem.

Click here for more information

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

Click event not functioning correctly in Internet Explorer

When using jQuery, I have the following code: <script type="text/javascript"> $(document).ready(function(){ $('body').on('click', '.add-photo',function() { $("#images").append($('<input/>').attr(&apo ...

Tips for merging two text boxes in a form with CSS

Is it possible to combine two text boxes in a form using CSS, similar to the design on Tumblr's login page at ? If CSS is not the solution, what alternative methods can be used? Any assistance would be greatly appreciated. I am aiming to enhance the ...

When I click the confirm button on Sweet Alert, I would like to update the database status from the default (pending) to confirmed

When I click on the confirm button in this sweetalert, I need assistance with updating the STATUS column in my database. Thank you for your help. swal({ title: 'Are you sure?', text: "You won't be able to revert this!", type: &a ...

Edit the contents within HTML strings without altering the HTML structure

If I have a string of HTML, it might look something like this... <h2>Header</h2><p>all the <span class="bright">content</span> here</p> I am interested in manipulating the string by reversing all the words. For example ...

Tips for applying a linear gradient mask to div elements?

I'm attempting to create a fading effect on the edges of a div by using two overlay divs positioned absolutely on either side. My goal is to have the background of the page visible once the fade is complete, effectively masking the content of one div ...

Using Angular, you can effortlessly inject elements into the editable div from any location on the page

Currently, I am working on developing an HTML interface that allows users to input text and send it as a notification to our mobile application. However, I am encountering challenges with the text and dynamically inserted elements using Angular 5; The te ...

Conceal div elements containing identical information by utilizing jQuery

I'm dealing with a webpage that pulls in a long section of divs from another application. Unfortunately, I can't filter the divs before they appear, but I urgently need to hide any duplicate data within certain values using jQuery. The duplicate ...

Node.js - Error: Undefined:0 SyntaxEncountered an unexpected end of input syntax error

Exploring Node.js and Backbone.js for the first time. Using the book "Backbone Blueprints" but encountering issues with the provided code to set up the webserver. Node.js is installed and running fine. Here's the package.json code: { "name": "simp ...

javascript / php - modify input fields according to selection change

Can anyone help me with an issue I'm facing? I want to update multiple textfields whenever a new option is selected from my dropdown menu. I've written the following code, but it's not working as expected. Can someone figure out what's ...

Is it possible to modify CSS properties using Ajax?

I am attempting to dynamically change the background color of a div using AJAX to fetch the user's specified color from the database. Below is the code snippet I am using: $.ajax({type: "POST", data: {id: id}, url: "actions/css.php", success: functio ...

Is it possible to manipulate the content inside a div tag using JavaScript in HTML?

What is the most efficient way to dynamically adjust a data offset value within an HTML tag using JavaScript? For example: <div class="box" data-offset="2s"></div> I am looking to update the value within the data-offset attribute based on s ...

Include an extra "array" in the complete AJAX POST data when submitting through x-editable

Struggling to include an array of objects in the post data for a group of bootstrap x-editable on my JSP page. The data is retrieved from a table and an array of objects is constructed. This array needs to be appended to the list of other values posted by ...

Designing a menu header against a specific background color resulting in misalignment

I have been working on creating a menu header for my website. If you would like to take a look, here is the link to my jsfiddle page. Unfortunately, I am facing an issue where all my images and text should remain in that grey color scheme but somehow it& ...

Reduce the file size of CSS and JS files for Magento

We are facing an issue with minifying CSS and Javascript for our Magento website. Currently, the size of our website is 1.1 MB and we aim to reduce it to 1 MB or even lower if possible. I tried using the "CSS Settings" and "Javascript Settings" functions ...

Adjust the top margin of content to account for the height of a fixed header

When dealing with a fixed header that has been removed from the HTML flow, it can be tricky to adjust the content below it. The challenge arises because the height of the header can vary based on screen size. How can we dynamically adjust the margin-top fo ...

Is verifying email and password with jquery possible?

I am currently working on a jQuery form validation project: While the password and username validation are working fine, I am facing issues with email and password confirmation validations. Surprisingly, I have used the same technique for both. If you wa ...

How can I position my navbar above my background image using Bootstrap?

I am a newcomer to using bootstrap and I am attempting to create the following design: https://i.sstatic.net/EV9A1.png In the design, the navbar is situated on top of the background image. However, with my current setup, this is what I have: <!DOCTYPE ...

Express.js allows for AJAX POST requests without the use of newlines

My current approach to sending the request is as follows: $(document).on('submit', 'form', function(e) { var form = e.currentTarget; console.log($(this).serialize()); $.ajax({ url: form.action, ...

Leveraging onclick in ng-repeat

Can the onclick event be used within a ng-repeat to call a jQuery function? HTML: <table> <tr ng-repeat="item in items"> <td><a onclick="loadEditModal(item.Id)">Edit</a></td> </tr> </table> ...

Blurring and masking an image within a hollow circle shape

I'm currently working on developing a similar example using react-native-svg. The background image I am using is dynamic and needs a transparent circular mask. Additionally, I want to apply a blur effect to that specific section of the background ima ...