The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Why is my “splitter” selecting text?

  • # April 4, 2013 at 1:29 pm

    I am trying to create a “splitter” on a page, and while I’m somewhat happy with how it’s working, I’ve noticed that as I drag it back and forth some text inside the flanking divs is getting selected. Is there any way to avoid this?

    [Here’s a codepen I created that illustrates the problem]( “codepen example”)


    # April 4, 2013 at 9:32 pm


    Your calculating the position of your splitter incorrectly, so when the widths are set, it moved the splitter from under the cursor and give the div to left focus,

    Also, calculating a left margin for the right div is not really needed either, just float all the divs to the left,

    I also added some css to make the text none-selectable too, just encase we somehow slip off the Splitter

    I forked your pen here

    # April 5, 2013 at 9:13 am


    That works exactly how I wanted. Thank you very much for the solution.


Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed