Skip to content
This repository has been archived by the owner on Sep 6, 2021. It is now read-only.

[html highlight] If divs have padding, highlights too wide & highlight shown for non-visible elements #3326

Closed
peterflynn opened this issue Apr 3, 2013 · 6 comments · Fixed by #3333
Closed

[html highlight] If divs have padding, highlights too wide & highlight shown for non-visible elements #3326

peterflynn opened this issue Apr 3, 2013 · 6 comments · Fixed by #3333
Assignees
@peterflynn
Labels
fixed but not closed
Milestone
sprint 23

Comments

@peterflynn
Copy link
Member

Start with this content:

<!doctype html>
<html>
<head>
    <title>Some other page</title>

    <style>
        div {
            padding-left: 120px;
        }
    </style>

</head>
<body>

    <h2>Stuff</h2>

    <style>
        .blah {
            color: red;
        }
    </style>

    <h2>Some other stuff</h2>

    etc. etc. etc.

</body>
</html>
  1. Launch Live Preview
  2. Place the cursor anywhere within the head or within the body's <style> block (also works with script blocks, display:none elements, etc.)
  3. Place the cursor on one of the <h2>s

Result:
2 - a collapsed highlight is visible in the upper left
3 - the page gets a horizontal scrollbar, and the right edge of the highlight is off the side of the screen

Expected:
2 - no highlight shown
3 - no scrollbar appears; right side of highlight's border is visible
@peterflynn
Copy link
Member Author

I'd imagine there are many variations of this bug -- basically any style that's not set explicitly on our highlight could interfere with it. For example, using margin-left instead causes a similar bug.

I'm pretty sure this has been around since CSS highlighting was introduced though, so it may not be that urgent.

@ghost ghost assigned gruehle Apr 3, 2013
@gruehle gruehle mentioned this issue Apr 3, 2013
Merged
@RaymondLim
Copy link
Contributor

FBNC to @peterflynn

It is auto closed by the pull request, but you can double check on it.

@peterflynn
Copy link
Member Author

I still see this for elements narrower than the padding size, e.g. <div style="position:absolute; background:red; width:10px; height:10px; padding:0; margin:0"></div>.

@peterflynn peterflynn reopened this Apr 4, 2013
@peterflynn
Copy link
Member Author

Also still repros for if the CSS is margin-left instead of padding-left -- the highlight is the correct width but it's too far to the right (which can again cause scrollbars to appear in some cases).

@gruehle gruehle mentioned this issue Apr 4, 2013
Merged
@ghost ghost assigned peterflynn Apr 4, 2013
@jasonsanjose
Copy link
Member

FBNC @peterflynn

@redmunds
Copy link
Contributor

Confirmed. Closing.

@core-ai-bot core-ai-bot mentioned this issue Aug 29, 2021
Open
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@peterflynn peterflynn

Labels
fixed but not closed
Projects
None yet
Milestone
sprint 23
Development

Successfully merging a pull request may close this issue.

Fix #3326 - highlight drawing problems adobe/brackets
5 participants
@gruehle @jasonsanjose @redmunds @peterflynn @RaymondLim