CODEWITHSUNDEEP
htmlcsshoverhtml-lists
Andrus
Andrus

Reputation: 27931

How to avoid div width increase on hover

div contains single line texts as li elements div width is determined by widest item width. If mouse is over some item, its font style changes to bold.

If mouse is placed hover wide items, bold font causes width increase and this causes div width also to increase. This looks very ugly if mouse is moved in list. How to disable this increase without using hard-coded width?

I tried overflow: hidden style as shown in code below but div width still increases.

html:

<div id="LeftPane" class="site-leftpane">
<ul class="tree">
<li><a href="/details?product=1">Product1</a></li>
<li><a href="/details?product=2">Product2</a></li>
...

css:

.site-leftpane {
    background-color: #FBFBFB;
    clear: left;
    color: Black;
    float: left;
    margin: 0;
    overflow: hidden;
    padding-top: 1em;
}

.tree {
    line-height: 1.6em;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

.tree li a {
    color: #333333;
    cursor: default;
    display: block;
    font-family: "arial","sans-serif";
    margin: 0;
}

.tree li:first-child {
    font-weight: bold;
}

.tree li a:hover {
    color: #E47911 !important;
    font-weight: bold;
}

Update

I chaged style according to proposed answer to 

.tree li a {
    color: #333333;
    cursor: default;
    display: block;
    font-family: "arial","sans-serif";
    margin: 0;
}

But problem persists. Web page can used in different screen resolutions. Texts are created by customer at runtime. Right side of contains other div which automatically uses remaining space. I do'nt knwo how to use hard-coded max-width in this case. max-width specifies maximum allowd div width. Usually in this case div width is smaller, hover causes its increase and thus max-width does not solve the issue.

Upvotes: 0

Views: 7237

Answers (4)

Stefan Djurcic
Stefan Djurcic

Reputation: 87

I had a similar problem and found one way to fix it was by using some jQuery, simple and works:

$('.menu-item').each(function() { 
    $(this).css( 'width', $(this).width()+'px' ); 
});

Basically you have jQuery "hard-code"/set the initial width of each of your class elements that was calculated by the browser based on text length and font settings, so that when you hover over each element which say changes the font-weight of the text, then the width won't change, it will remain the same as it was initially.

Upvotes: 2

icabod
icabod

Reputation: 7074

Ok, this isn't a great answer, but may provide a quick fix, from which someone else could base a real answer :)

Playing around with your HTML/CSS I was able to get what you want (well, emulating a dynamic max-width) by adding duplicate entries for each <li> in the list, adding a "pad" class, which basically hides the content.

<div id="LeftPane" class="site-leftpane">
<ul class="tree">
<li><a href="/details?product=1">Product1</a></li>
<li><a href="/details?product=2">Product It's a product, yes.</a></li>
<li class="pad"><a>Product1</a></li>
<li class="pad"><a>Product It's a product, yes.</a></li>
</ul>
</div>

And in the CSS I added this to the end:

.tree li.pad {
    line-height: 0;
    font-weight: bold;
    visibility: hidden;
}

What it basically does it add hidden entries for each of your list items, but the pad class makes the additional entries zero-height, but bold (and hence the correct width). It kind of relies on you being able to generate the HTML side, to allow adding the duplicate entries.

However, I think that this is a terrible solution, for numerous reasons (it's adding redundant data, it would mess up any non-visual browser, ...).

Upvotes: 1

Jeff
Jeff

Reputation: 2861

I don't think you can be certain of the actual pixel width when your server builds your page.

The users browser does all of those calculations, and it doesn't really expose them (though client-side scripting languages & toolsets like jQuery can see the end results).

Honestly, your best bet is to either assign a fixed-width to the items, calculated well ahead of time, and accept that long text might line break. If this doesn't work for you, the other option you have is to change the hover behavior. Perhaps instead of making the text bold you could change the text/background color? This would be an alternate way to indicate the currently hovered item and it won't change the character size or spacing.

Upvotes: 0

Cam
Cam

Reputation: 1902

Try adding padding:0px and margin:0px to your :hover, also you could add a max width to your div to keep your width at a single size. This in my opinion would fix your problem.

Upvotes: 0

Related Questions