CODEWITHSUNDEEP
jquerycssjquery-ui
fanfavorite
fanfavorite

Reputation: 5199

jQuery UI resizable expanding div

I have a div that is setup to use the jQuery ui resizable. It all works as expected except there is unwanted space between the outline and the border because the resizable divs are expanding the .test div. To date I have been using overflow: hidden to get around this issue. That has worked out well, however, I now have an instance where I am using a style using the :after, which gets cut off. How would I get around this?

This appears to be an issue in Firefox.

CSS:

.test {
    border: 1px solid #000;
    outline: 1px dashed #9a9a9a;
    /* overflow: hidden; */
}

.test:after {
    border: 11px solid transparent;
    border-top-color: #000;
    border-bottom: 0;
    content: " ";
    display: block;
    width: 0px;
    height: 0px;
    position: absolute;
    right: 10px;
    bottom: -11px;
}

Here is a jsFiddle example

Upvotes: 2

Views: 506

Answers (3)

fanfavorite
fanfavorite

Reputation: 5199

This appears to be a bug that has stuck around for years with Firefox. While outline-offset is an option, it would need to be applied to Firefox only and would need to account for all things that overflow. A better option is to do this:

.test {
    border: 1px solid #000;
}

.test:before {
   content: '';
   position: absolute;
   top: -1px; /* Set to offset top border width */
   left: -1px; /* Set to offset left border width */
   right: -1px; /* Set to offset right border width */
   bottom: -1px;/* Set to offset bottom border width */
   outline: 1px dashed #9a9a9a;
}

http://jsfiddle.net/65cay7gt/9/

Upvotes: 1

ZAZ
ZAZ

Reputation: 593

please add these line to your jquery after resizable function

$("div.ui-resizable-n").css('top','0px');
$("div.ui-resizable-e").css('right','0px');
$("div.ui-resizable-s").css('bottom','0px');
$("div.ui-resizable-w").css('left','0px');

so that it would become

$(document).ready(function(){
    $(".test").resizable({
        handles: "n, e, s, w"
    });

    $("div.ui-resizable-n").css('top','0px');
    $("div.ui-resizable-e").css('right','0px');
    $("div.ui-resizable-s").css('bottom','0px');
    $("div.ui-resizable-w").css('left','0px');
});

Upvotes: 1

Kristen Vogler
Kristen Vogler

Reputation: 357

If I understood correctly you are referring to the extra space above and below your text? Because you use the p tag in your html most browsers have default padding/margins to add before and after each paragraph. To change that spacing you can simply add another css class:

.test p{
margin:0px;
}

That targets any text inside of a paragraph tag that is inside something identified by the class "test." Note that it changes all the margin to 0px, if you want specific amounts on different sides you can use margin-left, margin-right, margin-top, margin-bottom, or use a short hand.

Upvotes: 0

Related Questions