We Keep Coding

Apply css to window popup and destroy it on focus leave in ext js

I want to implement following functionality. The problem in below image is popup arrow should be at the edge of the textbox, how can I achieve that?
And when I click on textbox it immediately calls blur event and destroy the popup, how can I destroy popup when user clicks outside the control?
My code is as follow:
Popup
Ext.define('tooltip', {
extend: 'Ext.window.Window',
displayText: '',
xtype: 'myWin',
width: 200,
height: 50,
layout: 'fit',
align:'center',
cls: 'arrow-box',
listeners: {
show: function() {
console.log('show');
this.el.setStyle('left', 600); // Not applying
},
},
initComponent: function () {
this.callParent();
this.html = '<div> hello this is test window</div>';
},
Class:
items: [
{
fieldLabel: 'Name',
labelClsExtra: 'x-form-item-label x-required',
name: 'Name',
itemId: 'Name',
xtype: 'textfield',
fieldCls: 'big',
width: 650,
enforceMaxLength: true,
maxLength: 1000,
listeners: {
focus: function(field) {
field.suspendEvent('blur');
field.suspendEvent('focus');
var displayMessage ='';
field.popup = field.popup || Ext.create('tooltip',{
displayText: displayMessage
});
field.popup.showBy(field.el, 'l-r');
field.focus();
field.resumeEvent('focus');
field.resumeEvent('blur');
},
blur: function(field) {
console.log('destroy');
if( field.popup != undefined && field.popup != null)field.popup.hide(); // It is being called immediately after focus event , so popup never comes
},
}
CSS
.arrow-box {
position: relative;
background: #fff;
border: 1px solid #859ba8;
overflow: visible;
padding: 30px;
}
.arrow-box:after, .arrow-box:before {
right: 100%;
top: 50%;
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow-box:after {
border-color: rgba(255, 255, 255, 0);
border-right-color: #fff;
border-width: 10px;
margin-top: -10px;
}
.arrow-box:before {
border-color: rgba(133, 155, 168, 0);
border-right-color: #859ba8;
border-width: 11px;
margin-top: -11px;
}
.arrow-box .x-box-inner {
display:none;
height:0px !important;
}
.arrow-box .x-window-body {
top : 0px !important;
width: 200px !important;
}

The answer is: do not use the show listener.
It is easier to use the offset from showBy.
Here is a fiddle with all you answers and a propper setup of the text you want to show in the popup
popup.showBy(field.el, 'l-r', [10,0]);

connecting two divs using jsplumb

I am using jsplumb to my project. I mentioned my sample below. when I drag and drop divs, divs should appear with anchor points. anchors points can be connecting each other. in my sample I did drag and drop part. but I am unable to complete the rest of the work. please check my sample and get an idea.
I am using jsplumb to my project. I mentioned my sample below. when I drag and drop divs, divs should appear with anchor points. anchors points can be connecting each other. in my sample I did drag and drop part. but I am unable to complete rest of the work. please check my sample and get the idea.
jsPlumb.ready(function() {
jsPlumb.Defaults.Container=$("#dropArea");
jsPlumb.Defaults.PaintStyle = { strokeStyle:"palevioletred", lineWidth:2,
dashstyle: '3 3'};
jsPlumb.Defaults.EndpointStyle = { radius:7, fillStyle:"palevioletred" };
jsPlumb.importDefaults({Connector : [ "Bezier", { curviness:50 } ]});
jsPlumb.connect({
connector: ["Straight"],
source:"element",
target:"element",
anchor: ["Left", "Right"],
endpoint:"Dot"
});
jsPlumb.setContainer($('#dropArea'));
var i = 1;
$(".element").draggable ({
helper : 'clone',
cursor : 'pointer',
tolerance : 'fit',
revert : true
});
$("#dropArea").droppable ({
accept: '.element',
containment: 'dropArea',
drop: function (e, ui) {
droppedElement = ui.helper.clone();
ui.helper.remove();
$(droppedElement).removeAttr("class");
jsPlumb.repaint(ui.helper);
var newAgent = $('<div>').attr('id', 'pro' + i).addClass('pro');
newAgent.text('Element ' + i);
$(droppedElement).draggable({containment: "dropArea"});
$('#dropArea').append(newAgent);
jsPlumb.draggable(newAgent, {
containment: 'parent' });
i++;
}
});
$("#dropArea").on('click', '.pro', function (e) {
i++;
var newState = $('<div>').attr('id', 'state' + i).addClass('section').
text('Section '+ (i-1));
var title = $('<div>').addClass('title');
var connect = $('<div>').addClass('connector').
text('Click here to drag');
newState.css({
'top': e.pageY,
'left': e.pageX });
newState.append(title);
newState.append(connector);
$(this).append(newState);
jsPlumb.makeTarget(newState, {
anchor: 'Continuous' });
jsPlumb.makeSource(connector, {
anchor: 'Continuous' });
newState.dblclick(function (e) {
jsPlumb.detachAllConnections($(this));
$(this).remove();
e.stopPropagation();
});
});
});
#import url(http://fonts.googleapis.com/css?family=Montserrat);
* {
font-family: 'Montserrat', sans-serif;
}
#dropArea {
position: relative;
resize: both;
margin-left: 180px;
border: 1px solid #aaaaaa;
width: 800px;
height: 650px;
overflow-x: scroll;
overflow-y: scroll;
}
.title {
padding: 10px;
cursor: move;
}
.connector {
font-size:10px;
text-align: center;
width: 100%;
height: 20px;
background-color: #ffffff;
cursor: pointer;
}
.element {
border: 1px solid gray;
text-align: center;
width: 170px;
height: 75px;
background-color: lightpink;
position: absolute;
}
.pro {
border: 1px solid gray;
text-align: center;
width: 170px;
height: 75px;
background-color: lightpink;
position: absolute;
}
.section {
font-size: 12px;
text-align: center;
font-weight: 200;
border: 1px solid black;
background-color: #ddddff;
}
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.7.13/js/jsplumb.js"></script>
</head>
<body>
<div class="element" id="cId">
</div>
<div id="dropArea">
</div>
</body>
</html>

Stop element moving on mouse scroll using rotatable class

I am currently working on a drag-drop web application whereupon users can plan a marquee layout.
Part of the functionality is that users can rotate certain items of furniture on the canvas. However, it seems that scrolling whilst your mouse pointer is over a rotatable element will also rotate that element, which causes problems, especially if the user has got their layout perfect and then scrolls down the page to fill in a form - potentially messing up the layout.
The app uses the rotatable class from jQuery, and implements the draggable and droppable classes.
This is my javascript:
$(function() {
//Make every clone image unique.
var counts = [0];
var resizeOpts = {
handles: "all",
autoHide: true
};
var nw = $("<div>", {
class: "ui-rotatable-handle"
});
var ne = nw.clone();
var se = nw.clone();
$('.box div.ui-rotatable-handle').addClass("ui-rotatable-handle-sw");
nw.addClass("ui-rotatable-handle-nw");
ne.addClass("ui-rotatable-handle-ne");
se.addClass("ui-rotatable-handle-se");
$(".dragImg").draggable({
helper: "clone",
//Create counter
start: function() {
counts[0]++;
}
});
$("#dropHere").droppable({
drop: function(e, ui) {
if (ui.draggable.hasClass("dragImg")) {
$(this).append($(ui.helper).clone());
//Pointing to the dragImg class in dropHere and add new class.
$("#dropHere .dragImg").addClass("item-" + counts[0]);
$("#dropHere .img").addClass("imgSize-" + counts[0]);
//Remove the current class (ui-draggable and dragImg)
$("#dropHere .item-" + counts[0]).removeClass("dragImg ui-draggable ui-draggable-dragging").addClass('rotatable');
$('.rotatable').resizable().rotatable();
//$(".rotatable").append(nw, ne, se);
$(".small-table div[class*='ui-rotatable-handle-']").bind("mousedown", function(e) {
$('.rotatable').resizable().rotatable();
$('.rotatable').rotatable("instance").startRotate(e);
});
$(".item-" + counts[0]).dblclick(function() {
$(this).remove();
});
make_draggable($(".item-" + counts[0]));
$(".imgSize-" + counts[0]).resizable(resizeOpts);
}
}
});
var zIndex = 0;
function make_draggable(elements) {
elements.draggable({
containment: 'parent',
start: function(e, ui) {
ui.helper.css('z-index', ++zIndex);
},
stop: function(e, ui) {}
});
}
});
As you can see, each item that is dragged is cloned once it's dropped on the dropzone (#dropHere div) and then remains on there unless it's double clicked. I want to know, is there any way to stop the element rotating if the user scrolls their mouse over it?
EDIT: Here is a FIDDLE of the app:

Note that you just can configure you rotatable by passing parameters as and object , one of those parameters is the wheelRotate whihch set to true by default , so you've just to create an object contating this param with false value : var rotateParams = {wheelRotate:false}; and then passe the object in the rotatable() fanction as below :
$('.rotatable').resizable().rotatable(rotateParams);
Please see bellow working snippet :
//adds are commented
$(function() {
//Make every clone image unique.
var counts = [0];
var resizeOpts = {
handles: "all",
autoHide: true
};
var nw = $("<div>", {
class: "ui-rotatable-handle"
});
var ne = nw.clone();
var se = nw.clone();
$('.box div.ui-rotatable-handle').addClass("ui-rotatable-handle-sw");
nw.addClass("ui-rotatable-handle-nw");
ne.addClass("ui-rotatable-handle-ne");
se.addClass("ui-rotatable-handle-se");
$(".dragImg").draggable({
helper: "clone",
//Create counter
start: function() {
counts[0]++;
}
});
/****** adding config param ******/
var rotateParams = {
wheelRotate: false
};
/**/
$("#dropHere").droppable({
drop: function(e, ui) {
if (ui.draggable.hasClass("dragImg")) {
$(this).append($(ui.helper).clone());
//Pointing to the dragImg class in dropHere and add new class.
$("#dropHere .dragImg").addClass("item-" + counts[0]);
$("#dropHere .img").addClass("imgSize-" + counts[0]);
//Remove the current class (ui-draggable and dragImg)
$("#dropHere .item-" + counts[0]).removeClass("dragImg ui-draggable ui-draggable-dragging").addClass('rotatable');
/****** applying the config param ******/
$('.rotatable').resizable().rotatable(rotateParams);
//$(".rotatable").append(nw, ne, se);
$(".small-table div[class*='ui-rotatable-handle-']").bind("mousedown", function(e) {
/****** applying the config param ******/
$('.rotatable').resizable().rotatable(rotateParams);
$('.rotatable').rotatable("instance").startRotate(e);
});
$(".item-" + counts[0]).dblclick(function() {
$(this).remove();
});
make_draggable($(".item-" + counts[0]));
$(".imgSize-" + counts[0]).resizable(resizeOpts);
}
}
});
var zIndex = 0;
function make_draggable(elements) {
elements.draggable({
containment: 'parent',
start: function(e, ui) {
ui.helper.css('z-index', ++zIndex);
},
stop: function(e, ui) {}
});
}
});
#outer-dropzone {
height: 140px;
}
#inner-dropzone {
height: 80px;
}
.dropzone {
background-color: #ccc;
border: dashed 4px transparent;
border-radius: 4px;
margin: 10px auto 30px;
padding: 10px;
width: 80%;
transition: background-color 0.3s;
}
.drop-active {
border-color: #aaa;
}
.drop-target {
background-color: #29e;
border-color: #fff;
border-style: solid;
}
.drag-drop {
display: inline-block;
min-width: 40px;
color: #fff;
background-color: transparent;
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
transition: background-color 0.3s;
}
.drag-drop.can-drop {}
.dragImg {
width: 50px;
height: 50px;
cursor: move;
}
.small-table {
width: 50px;
height: 50px;
cursor: move;
}
#dropHere {
width: 400px;
height: 400px;
border: dotted 1px black;
float: left;
}
.box {
border: 2px solid black;
width: 100px;
height: 100px;
background-color: green;
margin: 27px;
position: relative;
}
.ui-rotatable-handle {
background: url("https://image.ibb.co/knL4iF/1497037929_rotate_right.png");
background-repeat: no-repeat;
background-size: 100% 100%;
height: 25px;
width: 25px;
position: absolute;
top: -10px;
left: -10px;
}
.ui-rotatable-handle-sw {
bottom: -27px;
left: -27px;
}
.ui-rotatable-handle-nw {
top: -27px;
left: -27px;
}
.ui-rotatable-handle-se {
bottom: -27px;
right: -27px;
}
.ui-rotatable-handle-ne {
top: -27px;
right: -27px;
}
.small-table {
background-image: url('https://image.ibb.co/gXCjiF/small_table.png');
background-size: contain;
}
.dance-floor {
background-image: url('https://image.ibb.co/gjHjiF/dance_floor.png');
background-size: contain;
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.ui.rotatable/1.1/jquery.ui.rotatable.min.js"></script>
<div class="container">
<div class="dragImg small-table"></div>
<div class="dragImg dance-floor"></div>
<div id="dropHere"></div>
</div>

Remove Entire Modal with Jquery

I've been looking at previously posted StackOverflow questions, and still could not find my answer. So, I've been trying to simply delete the entire modal when I click on the close button. I can't get it to work, unfortunately. This is my code, so far.
var jQueryLoaded = 0;
function Modal(title, contents) {
if (jQueryLoaded === 1) {
var modal = document.createElement('div'),
modal_box = document.createElement('div'),
modal_head = document.createElement('div'),
modal_title = document.createElement('div'),
close_btn = document.createElement('div'),
modal_content = document.createElement('div');
modal.className = 'modal';
modal_box.className = 'modal_box';
modal_head.className = 'modal_head';
modal_title.className = 'modal_title';
modal_title.innerHTML = title;
close_btn.className = 'modal_close';
close_btn.innerHTML = '\u00D7';
modal_content.className = 'modal_content';
modal_content.innerHTML = contents;
$("body").append(modal);
$(modal).append(modal_box);
$(modal_box).append(modal_head, modal_content);
$(modal_head).prepend(modal_title);
$(modal_head).append(close_btn);
} else {
console.warn('jQuery, a required library, is not available at moment of function run. Please double check jQuery is loaded properly before running this function again.');
}
}
$(document).ready(function () {
jQueryLoaded = 1;
$("div.modal_close").on('click', function () {
$(this).parent().parent().closest('.modal').remove();
});
Modal('hello','<p>Example</p>');
});
/* Modals based off of W3Schools example! */
div.modal {
display: block;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background: rgba(0, 0, 0, 0.4);
font-family: 'Open Sans', sans-serif;
}
div.modal > div.modal_box {
background: #FFFFFF;
margin: auto;
padding: 5px;
border: 1px solid #000000;
width: 80%;
box-shadow: 3px 5px 3px rgba(0, 0, 0, 0.6);
}
div.modal > div.modal_box > div.modal_head {
width: 100%;
height: auto;
border: none;
border-radius: 0;
border-bottom: 1px solid #000000;
min-height: 10px;
font-weight: 16px;
}
div.modal > div.modal_box > div.modal_head > div.modal_title {
display: inline-block;
color: #000000;
text-align: center;
font-weight: 900;
font-size: 24px;
}
div.modal > div.modal_box > div.modal_head > div.modal_close {
margin: 1px;
font-weight: 900;
color: #000000;
border: 1px solid transparent;
padding: 2px;
border-radius: 5px;
background: transparent;
cursor: pointer;
float: right;
line-height: 10px;
user-select: none;
-webkit-user-select: none;
-o-user-select: none;
-k-user-select: none;
-moz-user-select: none;
}
div.modal > div.modal_box > div.modal_head > div.modal_close:hover,
div.modal > div.modal_box > div.modal_head > div.modal_close:focus {
border: 1px solid #000000;
background: rgba(0, 0, 0, 0.3);
}
div.modal > div.modal_box > div.modal_head > div.modal_close:active {
background: rgba(255, 0, 0, 0.8);
border: 1px solid #000000;
}
div.modal > div.modal_box > div.modal_content {
padding: 4px;
padding-left: 10px;
font-size: 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
Mind you, the code to remove the modal was just the last one I tried. I tried many others like $(this).parent().parent().closest('.modal').remove(); and $(this).parent().parent().find('.modal').remove().

You're mixing JS and jQuery, not that it's not good, but you use it in an inappropriate way. jQuery is designed to help you manipulate with DOM and events - make use of it!
If you're building a Modal function to handle modals, the close should be handled from within the script, not by adding extra stuff all around your .js files.
How do you call your Modal?
Here's an example to give you an idea and get you started:
jQuery(function ($) { // DOM is ready and $ alias secured
Modal("opened",{
title : "Opened example",
content : "<p>Immediately opened from JS using <code>.open()</code></p>"
}).open();
Modal("test1", {
title : "This is Title",
content :
`<p>
<b>Lorem Ipsum</b>
Dolor sit amet<br>
Example
</p>`
});
Modal("another", {
title: "Auto-hide in 3sec",
content: "<p>Like it? <b>Show some love</b></p>",
duration: 3000
});
});
/*QuickReset*/ *{margin:0;box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;}
[data-modal]{ color:blue; cursor:pointer; }
<h1>Modal Demo</h1>
Click <a data-modal="test1">here</a> to call modal ID test1<br>
or you can click <a data-modal="another">here</a> to call another modal
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
/** Modal - Custom modals example by RokoCB
* #param {String} modalId - A modal name used to reference a modal
* #param {Object} data - {title:"String", content:"HTML", duration:ms}
* #return {Object} - methods: .open() .close()
*/
function Modal(modalId, data) {
// DEFAULT MODAL STYLES
var css = {
area: {
position: "fixed",
visibility: "hidden",
opacity: 0,
left: 0,
top: 0,
right: 0,
bottom: 0,
zIndex: 99999,
background: "rgba(0,0,0,0.4)",
transition: "0.4s",
},
modal: {
position: "absolute",
left: "50%",
top: "50%",
minWidth: 240,
transform: "translate(-50%, -50%)",
background: "#fff",
boxShadow: "0 8px 24px rgba(0,0,0,0.6)",
},
title: {
padding: "8px 32px 8px 16px",
fontSize: 18,
borderBottom:"1px solid rgba(0,0,0,0.15)",
},
content: {
padding: "16px",
},
close: {
position: "absolute",
top: 4,
right: 4,
padding: 8,
cursor: "pointer",
userSelect: "none",
}
}
// ELEMENTS
var $area = $("<div/>", {
class: "modal_area",
appendTo: "body",
css: css.area,
click : closeModal,
});
var $modal = $("<div/>", {
class: "modal",
appendTo: $area,
css: css.modal,
click: function(evt){evt.stopPropagation();}
});
$("<div/>", {
class: "modal_title",
appendTo : $modal,
text : data.title,
css: css.title,
});
$("<div/>", {
class: "modal_content",
appendTo : $modal,
html : data.content,
css: css.content,
});
$("<div/>", {
class: "modal_close",
appendTo : $modal,
text : '\u00d7',
css: css.close,
click : closeModal,
});
// ACTIONS
var closeTimeout = null;
function closeModal() {
$area.removeClass("open").css({visibility:"hidden", opacity:0});
}
function openModal() {
$area.addClass("open").css({visibility:"visible", opacity:1});
if(data.duration) {
clearTimeout(closeTimeout);
closeTimeout = setTimeout(closeModal, data.duration);
}
}
$(document).on("click", "[data-modal='"+modalId+"']", openModal);
// METHODS
return {
open : openModal,
close : closeModal
}
}
</script>

The button will have no event listener attached to it because you're creating it after the attaching of the event listener. There is two solution for this:
EITHER:
Add the event listener just after the button is created inside the Modal class here:
close_btn.onclick = function() {
$(this).closest('.modal').remove();
}
OR:
Use event delegation like this:
$(document).on('click', 'div.modal_close', function () {
$(this).closest('.modal').remove();
});
NOTE: Since, as mentioned in the comments, you are already using jQuery why not using it inside the Modal class too.

Highlighting only the droppable which is hovered or to which item is dropped

What I'd like to do is to set border color to blue for .droparea element that contains an .item element.
Also there is also a hover effect for the .droparea which changes the border color to blue.
So if I move the .item element to another .droparea it should automatically change border color for the current .droparea to blue and change the border of previously used .droparea to default color (black).
$(document).ready(function() {
$(".item").draggable({
scroll: false,
revert: 'invalid',
stack: false,
create: function() {
$(this).data('position', $(this).position())
},
cursor: "pointer",
start: function() {
$(this).stop(true, true)
},
drag: function(event, ui) {
$(".droparea").removeClass("highlight");
}
});
$(".droparea").droppable({
accept: ".item",
drop: function(event, ui) {
$(this).addClass("highlight").find("p");
snapToMiddle(ui.draggable, $(this));
}
});
});
function snapToMiddle(dragger, target) {
var topMove = target.position().top - dragger.data('position').top + (target.outerHeight(true) - dragger.outerHeight(true)) / 2;
var leftMove = target.position().left - dragger.data('position').left + (target.outerWidth(true) - dragger.outerWidth(true)) / 2;
dragger.animate({
top: topMove,
left: leftMove
}, {
duration: 200,
easing: 'linear'
});
}
.item {
position: relative;
margin: 0 auto;
width: 100px;
height: 100px;
border: 1px solid red;
}
.droparea {
width: 150px;
height: 150px;
float: left;
margin: 2px;
border: 1px solid #000;
outline: 1px solid transparent
}
.highlight {
border: 1px solid blue
}
.droparea:hover {
border: 1px solid blue
}
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
<div class="droparea">
<div class="item"></div>
</div>
<div class="droparea"></div>
<div class="droparea"></div>

Few things to note here:
jQuery UI draggable only adjusts the style of an element, It does not alter its position in DOM, So the .item will always be the child of first draggable, and since you've specified the CSS :hoverpseudo selector - .droparea:hover, You'll always be hovering the first droppable while dragging since you're hovering it's child.
We can fix this issue by setting highlight class on hover using the hoverClass option of draggable, but since you're removing the highlight during drag event, the class set on hover will be immediately removed. So we should not remove the class on drag.
Finally, You can use jQuery UI's position() utility method for center aligning the item on drop.
So you can achieve what you're trying to as following:
$(document).ready(function() {
$(".item").draggable({
scroll: false,
revert: 'invalid',
stack: false,
cursor: "pointer",
});
$(".droparea").droppable({
accept: ".item",
hoverClass: "highlight",
drop: function(event, ui) {
var $this = $(this);
$(".highlight").removeClass("highlight");
$this.addClass("highlight");
ui.draggable.position({
my: "center",
at: "center",
of: $this,
using: function(pos) {
$(this).animate(pos, 200, "linear");
}
});
}
});
});
.item {
position: relative;
margin: 0 auto;
width: 100px;
height: 100px;
border: 1px solid red;
}
.droparea {
width: 150px;
height: 150px;
float: left;
margin: 2px;
border: 1px solid #000;
outline: 1px solid transparent
}
.highlight {
border: 1px solid blue
}
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
<div class="droparea">
<div class="item"></div>
</div>
<div class="droparea"></div>
<div class="droparea"></div>
Also, I've to warn you that jQuery UI and CSS float have a bad history, which is evident if you visit bugs.jqueryui.com. You're better of using display:inline-block for this purpose, you can even avoid speciying margin manually.