Double-clicking does not allow you to choose individual tags

We are encountering an issue with the double click behavior in the pandas documentation and pydata-sphinx-theme. I believe a HTML expert could shed some light on what's going wrong. Reference: https://github.com/pydata/pydata-sphinx-theme/issues/388

On this page, if I double click on "data," it erroneously selects "datastructured."

Examining the website HTML through the inspector, we see:

<dt>
    <strong>data</strong>
    <span class="classifier">structured ndarray, sequence of tuples or dicts, or DataFrame</span>
</dt>

The colon ":" is added via CSS:

.classifier:before {
font-style: normal;
margin: 0 0.5em;
content: ":";
display: inline-block;
}

Removing the colon reveals that there is no space between the words, causing them to be selected together.

I attempted to replicate this in a code pen, but was unsuccessful: https://codepen.io/12rambau/pen/mdXQayr

Would you mind taking a look at the page to help identify what might be causing this strange behavior?

Answer №1

Upon double clicking the first word, both words are selected due to the lack of space between them in the HTML.

To see this for yourself, right-click on the <dt> tag and choose 'Edit as HTML' (in Chrome). You'll notice that the HTML code is all on one line without a space between data and structured. This can also be confirmed by viewing the page source code.

The different formatting in your CodePen reproduction explains why the issue isn't replicated.

To fix this, you can either reformat the HTML like in your CodePen example or insert a space character after or at the end of the <strong> tag.

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

Switch out the view div element with ui-router

Currently, I am utilizing Angular ui-router to manage various views in the following manner: <div ui-view="header"></div> <div ui-view="nav"></div> <div ui-view></div> Upon Angular loading, the divs are automatically p ...

Ways to bypass a transition using JavaScript

Hello everyone, I would like to start by apologizing for any mistakes in my English. I have been working on a website, which is currently available here: As you scroll down, the height of the image below the menu decreases. I am trying to make the navig ...

Centering an Unordered List within a Div Container with a Colored Background Box

I'm facing a challenge at the moment. I've been trying to center the unordered list box, but all my attempts have been unsuccessful. It seems to be in the middle, but not perfectly centered. I suspect there's an issue with the margins. I nee ...

Is it possible to change the src attribute after the page has loaded and execute it

A. I'm trying to figure out how to dynamically change the src attribute of an image using JavaScript after the page has loaded. <img src="http://example.com/image.png" /> to <img src="http://domain.com/different.jpg" /> B. Another questi ...

The Flask server push appears to be functioning correctly, yet the EventSource.onmessage event is not triggering as expected

My implementation includes a route /stream that is designed to push the string 'test' every second. Upon accessing this URL (localhost:12346/stream) on Chrome, I observed that it opens a blank page and adds "test" to the page every second. This ...

Display website when clicked

When creating a website similar to , one issue that I am facing is the ability to scroll down before clicking the "proceed as anticipated" button. This feature seems to defeat the purpose of having the button trigger an automated scrolling effect if users ...

Eliminate custom CSS generated by themes on WordPress category pages

I am a newcomer to the world of Wordpress and I'm currently in the process of making adjustments to an existing theme. The theme itself is generating custom CSS code and adding it to the wp_head section. add_action('wp_head', 'custom_c ...

Angular 8 UI not displaying mockAPI data as expected

My mockAPI is successfully fetching the data, but the json response structure is quite complex. It looks something like this: [ { "planList": [ // plan details here ] } ] Everything in the UI is displaying correctly, except ...

Obtain the controller name from the current scope

I am trying to assign a controller named in the scope of another controller JavaScript file: .controller('PageCtrl', [ '$http', '$scope', '$routeParams', '$location', function($http, $scope, $ro ...

Utilizing several carets in a single or multiple text areas and input boxes

Just a quick question... Can a textbox have two carets simultaneously, or can we have two separate textboxes both focused at the same time? I am aware of simulating this using keydown listeners but I'm specifically looking for visible carets in both ...

Float and tap

Can someone assist me with my code? I have 4 identical divs like this one, and when I hover over a link, all the elements receive the same code. <div class="Person-team"> <div class="profile-pic-d"> <a cl ...

PHP Warning: Attempt to access undefined variable

Whenever I try to insert a new record into my HTML, I keep encountering errors. I'm unsure if it's due to incorrect code on my end or if the issue lies with inserting the records. <?php $servername = "localhost"; $dbusername = "r ...

Google Chrome - Automatically scroll to the bottom of the list when new elements are added in *ngFor loop

I have a basic webpage showcasing a list of videos. Towards the bottom of the page, there is a button labeled "Load more". When a user clicks on this button, an HTTP request is triggered to add more data to the existing array of videos. Here is a simplifi ...

Tips for positioning a div within a grid:

Looking for help with displaying news on your CMS page? You may have encountered an issue trying to show the title and content in two columns within a row. Here is some CSS code that might guide you in the right direction: *{ margin:0; padding:0; ...

The Java.lang.finalize heap became too large during the Hadoop URL parsing task

I'm currently working on analyzing the content of various homepage URLs by utilizing a Hadoop mapper without a reducer. This mapper fetches the URLs and sends them to a parser class for further analysis. The parser leverages Jericho's html parse ...

Trigger keydown and click events to dynamically update images in Internet Explorer 7

There is a next button and an input field where users can enter the page number to jump to a specific page. Each page is represented by an image, like: <img src="http://someurl.com/1_1.emf" > // first page <img src="http://someurl.com/2_1.emf" ...

Modify the width of the <nz-date-picker> component from Ng-Zorro

Currently using Ng-Zorro for my template styling and working on implementing a date picker that I want to align perfectly with the dropdown menu above it. I would like to adjust the width of the date-picker manually within the template, but after visiting ...

Sending text from a Tinymce textarea using Laravel 4.2

I am currently facing an issue with a form that includes a tinymce textarea, allowing users to edit text and save it into a database with HTML tags for display on their profile. The problem arises when Laravel 4.2 escapes the HTML tags, making it difficult ...

Element width shrinks inside container query

Can you explain why using container-type: inline-size renders the span normally but collapses the button? <span style="container-type: inline-size; outline: 1px solid blue;"> This is a span </span> <button style="container-type: inli ...

div is consistently correct across all web browsers

After creating the following CSS code for a div to always be positioned on the right: #button > .right { background-position: -268px 1415px; height: 180px; position: fixed; right: -90px; top: 40%; width: 263px; -webkit-transform ...