I'm trying to bind two style properties within a json object to an element in my html. I've tried using pixels and percentages, written in various ways (I realize pixel coordinates shown below do not match where % coordinates would place something, this is just an example).
{left: 30 + 'px', top:25 + 'px'} {left: '30px', top:'25px'}
{left: 30 + '%', top:25 + '%'} {left: '30%', top:'25%'}
and I'm binding like:
`v-bind:style="objnamehere"
When I reload the page, the element is not positioned at those locations. I'm not sure what I'm doing wrong. One of those should have worked based off the official examples here: https://v2.vuejs.org/v2/guide/class-and-style.html
In my case work this:
<div class="caption-text" :style="{top:y + 'px',left:x+'px'}">
Y and X are props in my Vue component
'top' and 'left' are css properties
Hope it will help somebody
Related
I'm creating a visual T-Shirt designer where the user can add custom text to a specific position. I develop this tool with Vue.js.
For the drag actions for the custom text I'm using the "vue-draggable-resizable' package for vue.js (https://github.com/mauricius/vue-draggable-resizable) with the following code:
<div v-for="layer of getLayers" class="vconf-create-builder-layer" :key="layer.uid" :style="{ background: 'url(' + getLayerImage(layer) + ') center / contain no-repeat' }">
<template v-for="tile of layer.data">
<VueDragResize :key="tile.uid" v-if="tile.type=='typography'" :parentLimitation="true" :isActive="true" :x="tile.boxPositionX" :y="tile.boxPositionY" :w="tile.editBoxWidth" :h="tile.editBoxHeight" #resizestop="updateTypoBoxSize($event, layer, tile)" #dragstop="updateTypoBoxPosition($event, layer, tile)">
<h2 class="typographyTextPreview" :style="{'font-size': tile.fontSize + 'px', 'line-height': tile.lineHeight + 'px', color: tile.fontColor}">{{tile.text ? tile.text : "Please enter an initial text in the settings"}}</h2>
</VueDragResize>
</template>
</div>
To save the position of the text I'm using the dragstop event. There I get the x and y coordinates relative to the parent. My parent is the t-shirt itself, embedded in a DIV container as background-image with background-size: contain. You can see it in the code above.
So when I resize the browser window, the t-shirt becomes smaller proportionally. The problem: The text layer changes the position. It makes sense, because the x and y coordinates are static values in pixel.
Image examples with resized browser window:
What would be the right way to be sure that the text layer always has the same position relative to the parent with a background image embedded, without to define the image with static pixel size?
So I'm aware you can use a function to compute a css property in Cytoscape.js e.g.
cytoscape.stylesheet()
.selector('node')
.css({
'width': function(ele) {
return 12;
})
I'm also aware of the special value 'label' that can be the value of the property e.g.
cytoscape.stylesheet()
.selector('node')
.css({
'width': 'label'
})
What I'm wondering is is there any particular property I could use to scale the label by some factor, e.g. what I want is something like
cytoscape.stylesheet()
.selector('node')
.css({
'width': function(ele) {
return labelWidth * 1.5; //Where to get labelWidth from
})
Specially I want the ability to be able to calculate the height and width of an ellipse so that the label is completely contained within the ellipse (which can be computed using some math e.g. Ellipse bounding a rectangle).
But I haven't been able to find a way to get the labelWidth. I did manage to do it using rscratch but only if the node actually got rendered twice (e.g. multiple .selectors), any proper way to get the label width and height from a given element (or at least a way to calculate how it'll be rendered?).
If you want to do more sophisticated sizing, your calculations are going to have to be more sophisticated.
Options :
(1) Calculate the dimensions of the text yourself using a div.
(2) Use the auto sizing, and then adjust the size based on the current size.
(1) is cleaner than (2).
It doesn't make sense for Cytoscape.js to expose rendered calculated values for you in the stylesheet. Those values are calculated from the stylesheet, creating a dependency cycle.
If you just want the label inside your node, you could just set the padding attribute to make more space around the text.
How in jquery do I get/set the title attribute of a bootstrap tooltip.
<span data-toggle="tooltip" title="a,b,c,d">Something</span>
... and ...
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
$('.CustomToolTip').each(function () {
alert($(this).attr('data-toggle'));
alert('[' + $(this).attr('title') + ']');
//$(this).attr('title', $(this).attr('title').replace(/,/g, ','));
});
});
and I have tried:
...
$('.CustomToolTip').on('show.bs.tooltip', function () ...
...which implies I am using the incorrect attribute or code!!??!!
In reference to Why doesn't break word work on a long string with commas? my eventual purpose is because my title has no spaces and can be quite long I need to append to the comma a non-whitespace space (char U+2008 in Unicode, or ​) (the line I have commented out). In reality the title is set in the VB.NET code-behind and is a asp.net Label control that gets rendered as a span tag and if I do a replace in the VB.NET code a funny character appears (well at least in IE) in the front-end. So I decided to do it in jQuery client side as other's have suggested however, my title attribute is blank (NB: the first alert box call shows value of "tooltip" the second is blank between the square brackets)!
For e.g. say my tooltip is a fruit list "apple,banana,cherry,date" and my max-width is a width of 11 characters then my tool tip is rendered as:
apple,banan
a,cherry,da
te
however; what I wont is:
apple,
banana,
cherry,date
i.e. it does not break in the middle of a word.
My css is:
.CustomToolTip + .tooltip.right > .tooltip-inner {
max-width: 400px;
background-color: #333333;
color: #bbbbbb;
word-wrap: break-word;
border-radius: 8px;
}
.CustomToolTip + .tooltip.right > .tooltip-arrow {
border-right-color: #333333;
}
Can someone please point my mistake out for me - thanks?
Get title Attribute
$('[data-toggle="tooltip"]').attr("title");
Set title Attribute
$('[data-toggle="tooltip"]').attr( "title", "New Value" );
For Reference: http://api.jquery.com/attr/
If your goal is just to convert white space, a trick is to convert them (server side) to
Or actually change the CSS of the tooltip popup.
As usual if you search hard enough you find what you are looking for. Credit goes to #yann-chabot changing the title of a popover with bootstrap and jquery and I found this useful site that is all about uni-code space characters as well https://www.cs.tut.fi/~jkorpela/chars/spaces.html.
The solution was to use the 'data-original-title' attribute and not the 'title' as follows :
...
var newTitle = $('.CustomToolTip').attr('data-original-title');
newTitle = newTitle.replace(/,/g, ',\u200A');
$('.CustomToolTip').attr('data-original-title', newTitle);
I decided to use Unicode 200A for the space character because it gave me less space!! I believe it is something to do with the font you are using and it is giving me in my case approximately 1 pixel of space after the comma, enough for the "word-wrap: break-word" css to work - hooray!
I have an object like this:
edge
...,{\"data\":{\"label\":\"test\",\"source\":\"1\",\"target\":\"19\",\"extra\":
{\"color\":\"#000000\",\"width\":\"#000000\"}}},{\"data\":
{\"label\":\"1~20\",\"source\":\"1\",\"target\":\"20\",\"extra\":
{\"color\":\"#FF0000\",\"width\":\"5\"}}},...
I am able to parse it, read it and display my nodes and edges into cytoscape.js, but I cannot figure out how to access the extra components to set color and width.
Here:
.selector("edge")
.css({
"width": "mapData(weight, 0, 100, 1, 4)",
"target-arrow-shape": "triangle",
"source-arrow-shape": "circle",
"line-color": "data.extra(color)"//data(color)
})
I know how to acess the color property if it's outside extra, but I would like to use it inside the extra component, as one can see in the JSON example.
Please, how should I access my extra components to set the css color?
Any help is appreciated.
If you build from the trunk, I've pushed a fix to allow data(extra.color) style syntax in mappers.
I have two extjs items which are of variable height to be layed out vertically.
I am using Ext.container.Container for the vertical layout, using the following code.
Ext.create('Ext.container.Container', {
//height:50,
renderTo: this.renderTo,
layout: {
type: 'vbox'
},
items: [item1,item2],
//autoHeight:true
});
The problem is the items are not visible on the page unless the height of the container is specified. But, the height of the embedded widgets is not static.
Is there any way to fix this issue? Any other components I can make use of which can stretch automatically to the height of the items.
Instead of height, apply a flex of 1 to your child elements. If you wish the ratio to be different you can play with the flex number. For instance, if you apply flex: 2 and flex: 1 you will get 2 thirds fill on the first element, and 1 third fill on the second.
For reference: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.VBox-cfg-flex