The issue with the page width is occurring due to a bug related to the

When pages contain the AddThis code, they tend to become very wide due to the code itself, resulting in a horizontal scroll bar appearing.

However, by removing the code or changing the page direction to LTR, the issue is resolved and the page width returns to normal.

The problem arises when using RTL direction (html dir="rtl") and trying to place the AddThis code into a div with an LTR direction, which does not resolve the issue.

Is there a way to eliminate the horizontal scroll bar while still utilizing an RTL direction?

htmlcssaddthis

Answer №1

Within the AddThis html, there are certain spans that are automatically inserted into the page. Some of these spans utilize the ".at_a11y" css-class, which includes a left attribute that is causing a horizontal scroll.

.at_a11y {
position: absolute!important;
left: -10000px!important;
top: auto!important;
width: 1px!important;
height: 1px!important;
overflow: hidden!important;
}

Solution: To fix this issue, you can create your own '.at_a11y' css class in your custom css files and reset the left attribute to a normal value. By doing this, the problematic css attribute will no longer cause a horizontal scroll!

.at_a11y
{
    left: auto !important;
}

Answer №2

I encountered the same issue and was able to find a solution within your post!

The key point was adjusting the CSS styling for the inner div instead of the body, specifically focusing on RTL LTR alignment.

    <body>
        <div class="wrapper">
       -- insert code for addthis somewhere on the page... --
        </div>
    </body>

By ensuring that the .wrapper class is set to LTR in the CSS rather than RTL, the result will be:

Answer №3

To fix this issue, simply add the following code: html{ overflow-x:hidden; }

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 navigation bar is missing from the screen

Where is the navbar in this snippet? Did I overlook something important? If so, what? <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="navbar nav ...

csstwitter-bootstrap

What is needed to enable the functionality of the next and previous buttons? (Carousel Bootstrap)

I'm working on a text-only carousel using Bootstrap, but I'm facing an issue with the slider not functioning properly when I press the "next" and "prev" buttons. Any assistance would be greatly appreciated! <link rel="stylesheet" href="htt ...

htmlcsstwitter-bootstrapcarouselbootstrap-5

Is it possible for a Vue data property to have a value that is determined by another Vue data property object?

Within my HTML form, I have implemented the flatPickr (calendar picker) component which generates an input field. I am currently exploring how to dynamically change the class of the input field if the error class function returns true. Below is the flatPi ...

javascripthtmlajaxvue.jsvuejs2

Compatibility issues arise when trying to use jQuery Mobile in conjunction with jQuery UI

I'm currently developing an HTML5 application that needs to function seamlessly on desktops, tablets, and mobile devices. However, I've encountered a hurdle when it comes to implementing progress bars and dialog boxes. Initially, I was using jQue ...

javascriptjqueryhtml

Label alignment in one line with responsive checkbox

Could someone assist me with adjusting the alignment of this checkbox when resizing the window for mobile view? The label text is breaking into a new line while the checkbox remains in its original position. How can I make the checkbox align closer to its ...

javascripthtmlcssbootstrap-4

Custom control unable to display MP3 file

Hey, I came across this awesome button that I am really interested in using: https://css-tricks.com/making-pure-css-playpause-button/ I'm currently facing two issues with it. First, I can't seem to play the sound. I've placed the mp3 file ...

javascripthtmlcssmp3

Tips for arranging a menu horizontally with buttons in CSS

I am currently working with a dropdown menu that I coded using CSS, similar to the one shown at . My issue is that I have 4 menu items and I want the total width of the parent div to be divided equally among each item, regardless of the resolution. Curre ...

cssmenualignment

Additional pixels positioned beneath my HTML table

Currently, I am working on a Joomla website using the Helix3 framework, but have run into an issue that I can't seem to resolve. There seems to be some additional pixels below my HTML table at the top of the page where it says "::: ÉLŐ KÖZVETÍTÉ ...

htmlcssjoomlahtml-table

The CSS Accordion seems to be the culprit behind the missing margin or border at the top of my page

Although everything on the page is functioning as desired, there seems to be a missing margin or border that is not causing much trouble. If there is a simple solution or an easy way to identify why this is happening, it would be greatly appreciated. Take ...

cssborderaccordionmargin

Creating a personalized notification box that is compatible with various screen sizes and web browsers on android devices with the help of

After successfully implementing a custom alert box to hide the header with JavaScript, I encountered an issue when trying to use it on different browsers and Android devices. The alert box appeared misplaced on the page and was too big for certain Android ...

javascriptandroidcsscross-browserhybrid

Viewing all album titles simultaneously using the Flickr API

After trying a different approach due to lack of responses to my previous question, I am still facing the same issue. My code successfully retrieves all album names and corresponding photos from Flickr API, but it displays all album names at once followed ...

htmljqueryflickr

In Firefox, the width of a CSS grid cell is larger than the actual content it contains

My dilemma involves a div with a height of 15vw and the desire to insert four images into this div (each image's size is 1920*1080 px). When using the code below, everything appears correctly in Chrome. However, in Firefox, each image size is 195*110 ...

cssfirefoxcss-grid

How should one go about properly sizing and formatting image icons?

Currently, I'm exploring the most efficient ways to optimize image loading speed on a webpage. Specifically, I am looking for advice on the best method for resizing an image from 1600x900 to 890x500. Method 1 Utilize the following code: <img src= ...

htmlcssimage

What is the best way to set up a condition that only runs if an element does not contain a certain class, such as "active"?

Click here for the picture I have a list of items: a, b, c, d, e, f. Whenever I click on item b, it becomes active and the other elements lose the "active" class. When an element has the "active" class, I want the background to change accordingly. If it ...

jqueryhtmlcssonclick

Ways to prevent scrolling in Angular 6 when no content is available

I am developing an angular 6 application where I have scrollable divs containing: HTML: <button class="lefty paddle" id="left-button"> PREVIOUS </button> <div class="container"> <div class="inner" style="background:red">< ...

javascripthtmlcssangulartypescript

Duplicate text content from a mirrored textarea and save to clipboard

I came across some code snippets here that are perfect for a tool I'm currently developing. The codes help in copying the value of the previous textarea to the clipboard, but it doesn't work as expected when dealing with cloned textareas. Any sug ...

javascriptjqueryhtmltextarea

What causes Next.JS to automatically strip out CSS during the production build process?

Encountering unpredictability in CSS loading while deploying my Next.JS site. Everything appears fine locally, but once deployed, the CSS rules seem to vanish entirely. The element has the attached class, yet the corresponding styling rules are nowhere to ...

javascriptcssreactjswebpacknext.js

Using Google-Prettify with AngularJS

I have been attempting to implement Google Prettify in my AngularJS project. It seems to be functioning correctly on the main page, but once I navigate to another route using Angular (after ng-view), it stops working properly. You can check out the plunker ...

javascriptcssangularjsngroute

Discover the elusive tag that holds the specified text

My code snippet in HTML looks like this: <body> <div class="afds"> <span class="dfsdf">mytext</span> </div> <div class="sdf dzf"> <h1>some random text</h1> ...

pythonhtmlbeautifulsouphtml-parsing

During the process of converting documents to HTML, any graphics or shapes may not be accurately translated into HTML format

I am looking for a way to display a doc file in a dialog box on a browser. To achieve this, I converted the doc file into an html file successfully. However, I encountered an issue when the doc file contained graphics or shapes - these elements were not co ...

htmlapache-poidoc