2013-06-24 2 views
0

Fiddle: http://jsfiddle.net/scottbeeson/TU6Zw/Shennanigans при изменении размера абсолютного позиционируется DIV на правой стороне

HTML:

<div id="itemMap" class="shadow"> 
    <div class="mapHeader">Open Items</div> 
    <div class="mapItem">Test1</div> 
    <div class="mapItem">Test2</div> 
    <div class="mapItem">Test3</div> 
</div> 

CSS:

#itemMap { 
    position: absolute; 
    right: 0px; 
    top: 0px; 
    bottom: 0px; 
    width: 230px; 
    background-color: #f9f3b7; 
    border: 1px solid cornflowerblue; 
    font-size: .8em; 
    z-index: 10; 
} 

Javascript:

$('#itemMap').resizable({ 
    handles: 'w', 
    minWidth: 180 
}); 
+0

Больше информации пожалуйста. Кажется, он отлично работает в последней версии firefox. –

+0

Это не работает в Chrome :( –

ответ

1

Это просто нужно обертка к w ork в Chrome. См http://jsfiddle.net/gUzCU/

HTML

<div id="wrap"> 
    <div id="itemMap" class="shadow"> 
     <div class="mapHeader">Open Items</div> 
     <div class="mapItem">Test1</div> 
     <div class="mapItem">Test2</div> 
     <div class="mapItem">Test3</div> 
    </div> 
</div> 

CSS

#wrap { 
position: absolute; 
right: 0px; 
top: 0px; 
bottom: 0px; 
width: 230px; 
} 

#itemMap { 
position: absolute; 
top: 0px; 
bottom: 0px; 
width: 230px; 
background-color: #f9f3b7; 
border: 1px solid cornflowerblue; 
font-size: .8em; 
z-index: 10; 
} 
+0

Вау. Это интересно ... спасибо –

+0

Возможно, есть лучший способ сделать это. –

+0

Это для доказательства концепции, поэтому она работает для меня :) –