Preventing divs added by javascript/jquery from flowing outside the parent div -


this has been doing head in couple of days now, sure missing simple, can't life of me figure out is.

i have tried of options found on example overflow:auto; or overflow:scroll; changing table cells columns , on.

attached image of how looks , how don't want look, longer columns on left variable , depending on user select previous page, can't set pre-determined width on empty part, nor can use counter limit amount of columns added when user adds custom price.

enter image description here

 <div class="resultswrapper">  <div class="termwrapper">    <div style="margin-top:-25px; margin-left:-16px; padding:5px; position:absolute; display: table-cell; vertical-align: bottom;">      <img src="images/greenmountain.png" style="max-width:96px; max-height:45px; vertical-align:bottom; margin:auto auto; bottom:0; display: block; position: absolute;" />    </div>    <div class="termprice">$0.06255</div>    <div class="termcost">$3,874.72</div>    <div class="termsaving">$724.77</div>    <div class="termprice">$0.06447</div>    <div class="termcost">$3,993.66</div>    <div class="termsaving">$605.83</div>    <div class="termprice">$0.06200</div>    <div class="termcost">$3,840.65</div>    <div class="termsaving">$758.84</div>    <div class="termprice">$0.06181</div>    <div class="termcost">$3,828.88</div>    <div class="termsaving">$770.61</div>    <div class="termprice">x</div>    <div class="termcost">x</div>    <div class="termsaving">x</div>    <div class="termprice">x</div>    <div class="termcost">x</div>    <div class="termsaving">x</div><div class="termsaving">$4.95</div>  </div>  </div>

it's not nicest way of doing it, need function.

css:

.termwrapper {   -webkit-border-radius: 20px 20px 20px 20px;   border-radius: 20px 20px 20px 20px;   border:1px inset black;   float:left;   margin-left:10px;   background:rgba(50,111,29,0.95);   background-image:url(images/pricingbg.png);   background-size: cover;   background-position:bottom;   margin-top:-10px;   padding:10px; } .termprice {   font-size:15px;   line-height:40px;   text-align:center;   margin-top:5px; } .termcost {   font-size:13px;   line-height:20px;   text-align:center; } .termsaving {   font-size:13px;   line-height:20px;   text-align:center;   margin-bottom:10px; } .resultswrapper {   margin-left:110px;   position:absolute;   width:auto; }

and last not least, jquery/javascript code.

$("#addcustomprice").click(function(e) {     e.preventdefault()         $( "#dialog-message" ).dialog({       modal: false,       buttons: {         "add price": function() {                     var term        = $("#customterm").val()                     var price       = $("#customprice").val()                     var currrate    = $("#currentratehidden").attr('data-id')                     var volume      = $("#volumehidden").attr('data-id')                     var currentcost = '<?=$currentcost?>'                     // $currentcost - $pricingarr['term36'] * $volume2                     var saving      = currentcost - price * volume                     var annualcost  = price * volume                     console.log(price)                     console.log(price * volume)                     $(".resultswrapper").append(           '<div class="termwrapper2">'           +'  <div style="margin-top:-25px; margin-left:-16px; padding:5px; position:absolute; display: table-cell; vertical-align: bottom;">'           +'    <img src="http://cdn2.bigcommerce.com/server400/26074/products/235/images/383/custom_quote_10041.1367332284.1280.1280_29641.1369264683.1280.1280__59812.1369264887.1280.1280.jpg" style="max-width:96px; max-height:45px; vertical-align:bottom; margin:auto auto; bottom:0; display: block; position: absolute;" />'           +'  </div>'           +'<div style="float:left; display: block; clear: both;">'           +'  <div class="termprice"><div style="margin-top:0px; line-height:0;"><strong>'+term+' months</strong></div>'+price+'</div>'           +'  <div class="termcost">'+annualcost.tofixed(2)+'</div>'           +'  <div class="termsaving">'+saving.tofixed(2)+'</div>'           +'  <div class="nodal"></div>'           +'  <div class="swing"></div>'           +'  <div class="termsaving"> </div>'           +'</div>'           +'</div>'           )           $( ).dialog( "close" );         }       }     });   });

awaiting snappy responses ;)


Comments

Post a Comment

Popular posts from this blog

android - Get AccessToken using signpost OAuth without opening a browser (Two legged Oauth) -

i using signpost oauth access data magento server. have read various tutorials on same , reach point open browser user can enter credentials. however, per requirement have automate part. hence, user should not browser page. have set-up done on server side ( magento ), hit url , returned call page. same through program in android. i have tried below, consumer = new commonshttpoauthconsumer(key, secret); provider = new commonshttpoauthprovider(oauth_init_url,access_token_url, authorize_url); try { provider.retrieverequesttoken(consumer, oauth.out_of_band); log.d("tokens" , consumer.gettoken() + " -- " + consumer.gettokensecret()); } and request tokens. dont know how bypass next step. tried directly accessing accesstoken (stupid of me) provider.retrieveaccesstoken(consumer, "mycallback://callback"); no luck, ends in oauth.signpost.exception.oauthnotauthorizedexception: authorization failed (server replied 401). ...
Read more

org.mockito.exceptions.misusing.InvalidUseOfMatchersException: mockito -

getting error org.mockito.exceptions.misusing.invaliduseofmatchersexception: invalid use of argument matchers! 1 matchers expected, 2 recorded. exception may occur if matchers combined raw values: //incorrect: somemethod(anyobject(), "raw string"); when using matchers, arguments have provided matchers. example: //correct: somemethod(anyobject(), eq("string matcher")); at when( getprogramservice .callservice(any(getprogramtype.class))) .thenreturn(jaxbresponse); please explain error , possible resolution the code posted looks fine; don't see problem it. code before or above causing exception. key here: invalid use of argument matchers! 1 matchers expected, 2 recorded. any , used above, doesn't return "special kind of null" or "special kind of getprogramtype"; don't exist. instead, returns null , side effect puts matcher on stack. whe...
Read more

google shop client API returns 400 bad request error while adding an item -

i'm working on solution add items in google shopping market java application. following tutorial real mess because of missing classes of laste release, after setting 1.5-beta maven managed make base example typecheck correctly classes. still can make simple task of adding 1 item. instead of posting whole code i'm posting part creates product feed. private product createproduct(string id) { product product = new product(); product.title = "red wool sweater"; product.content = new content( "text", "comfortable , soft, sweater keep warm on " + "cold winter nights. red , blue stripes."); product.appcontrol = new appcontrol(); product.appcontrol.addrequireddestination("productads"); product.externalid = id; product.lang = "it"; product.country = "it"; product.condition = "nuovo"; product.price = new price("eu...
Read more