I need the following JS Twitter widget to appear on the same line as the "TEST MESSAGE" texts, however it always creates a line break and this code appears as three lines.
TEST MESSAGE<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 10,
interval: 30000,
width: 370,
height: 500,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
},
tweets: {
background: '#e8e8e8',
color: '#000000',
links: '#005eff'
}
},
features: {
scrollbar: false,
loop: true,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'default'
}
}).render().setUser('ControllerShop').start();
</script>TEST MESSAGE
The Twitter widget renders as a <div>, which is a block element and so behaves this way by default (just like any other block element like <p> or <blockquote>). To make it display inline with the text try:
.twtr-widget {
display: inline-block;
}
You can see it in action in this fiddle (make sure the "Result" pane is wide enough to accommodate everything).
It's not really clear why you'd want to do this so I'm curious about your larger use case, but this does the job anyway.
Related
I'm using Chart.js with a React wrapper (react-chartjs-2). I want to upgrade to the latest major version of Chart.js (3.x) to remove the dependency on moment, among other benefits. There are lots of breaking changes in 3.x, and I've gotten nearly everything working again with all the breaking changes, except for this one infuriatingly small thing.
There is a tiny white border around the whole chart that I cannot for the life of me get rid of. The weird part is that it disappears when the data for the chart changes and it causes a re-render. This is what it looks like:
And this is what it's supposed to look like (seamlessly disappearing into the next div on the page):
It's probably one line in options that I need to change, but I can't figure out which line it would be. I thought it might be scale.[id].grid.zeroLineColor because the 3.x upgrade guide says this: "scales.[x/y]Axes.zeroLine* options of axes were removed. Use scriptable scale options instead." But I set color using the scriptable options like this:
grid: {
color: () => "transparent"
}
and that only fixed part of the issue. Because now the "zero line" isn't grey, but there still seems to be 1px of padding or something around the whole chart, on the bottom and on the right side.
I've set every other property I can think of.
Here's what the options look like right now:
const options = {
hover: { intersect: false },
borderWidth: 0,
clip: 0,
plugins: {
legend: {
position: "bottom",
align: "center",
display: false,
},
tooltip: {
intersect: false,
mode: "index",
callbacks: {
//This removes the tooltip title
// title: function () {},
label: ({ raw }) => {
return `$${formatNumber(raw)}`;
},
},
//this removes legend color
displayColors: false,
padding: 15,
position: "average",
pointHitRadius: 20,
pointRadius: 30,
caretSize: 10,
backgroundColor: "rgba(255,255,255,.9)",
borderColor: rgbaStringFromRGBObj(palette.Vibrant.rgb, 0.35),
borderWidth: 2,
bodyFont: {
family: "Satoshi",
size: 18,
},
bodyColor: "#303030",
titleFont: {
family: "Satoshi",
},
titleColor: "rgba(0,0,0,0.6)",
},
},
scales: {
y: {
ticks: {
backdropPadding: 0,
display: false,
},
stacked: false,
grid: {
drawBorder: false,
borderWidth: 0,
drawTicks: false,
color: "transparent",
width: 0,
},
drawBorder: false,
drawTicks: false,
},
x: {
padding: 0,
ticks: {
display: false,
padding: 0,
mirror: true,
backdropPadding: 0,
},
grid: {
drawBorder: false,
drawTicks: false,
display: false,
},
drawBorder: false,
drawTicks: false,
},
},
maintainAspectRatio: false,
}
and here's a pull request with all the code in context.
This problem was happening for me when responsive was set to true in the chart's options because the width and height that the chart assumes is set to the "ones" place - it doesn't include decimals. Example:
vs.
The canvas rendered by ChartJS ignores the decimal-level specificity of its parent wrapper... Whether by bug or by design.
Solution
In my case, the aforementioned bug resulted in a small white line at the bottom of the chart.
I got around the problem by setting the parent's style to display: flex; and flexing the chart to the end with flex-direction: column; and justify-content: flex-end. Since the chart was slightly shorter than the parent, flexing it to the end (bottom) of its parent wrapper effectively "removed" the white line.
Generally: Experiment with positioning the chart with knowledge that it's probably a fraction of a pixel less wide/less tall than its parent.
I'm facing a "strange" problem I'm not able to solve looking at vis.js documentation.
I created a network with a fixed hierarchy defining a specific level for each node.
Total number of nodes 51. This is the result:
If I add another node at the bottom of the network scheme (total 52) the layout changes, the spacial disposition of the nodes totally move trying to fill white space as you can see:
I tried several options without any success.
These are the options I'm using at the moment:
options = {
layout: {
improvedLayout: false,
hierarchical: {
enabled: true,
levelSeparation: 150,
nodeSpacing: 110,
treeSpacing: 200,
blockShifting: false,
edgeMinimization: true,
parentCentralization: true,
direction: "LR",
sortMethod: "directed",
shakeTowards: "roots"
}
},
interaction:{
tooltipDelay: 100
},
edges: {
font: {
size: 0
}
},
nodes: {
shape: 'circle'
},
physics: false
};
I hope you can give me some suggestion.
Thank you!
you can try to add a randonSeed to the layout in the options object.
layout: {
randomSeed: 1,
improvedLayout: false,
hierarchical: {
enabled: true,
levelSeparation: 150,
nodeSpacing: 110,
treeSpacing: 200,
blockShifting: false,
edgeMinimization: true,
parentCentralization: true,
direction: "LR",
sortMethod: "directed",
shakeTowards: "roots"
}
}
you can change the number (randomSeed: 1) until you get the requested layout.
hope it will help.
im trying to make a tooltip "persistent" for a specific amount of time until or unless the user clicks somewhere else or moves his mouse over another anchor associated with a tooltip..
basically the tooltip that appears will be "scrollable" so the user needs to be able to scroll it...
$(this).qtip({ content: {
text: 'wait.....',
url: '<?php echo site_url('welcome/get_event_tooltip');?>',
data: { id: tripID},
method: 'post'
},style: {
width: 300,
height:135,
padding: 5,
//background: '#A2D959',
color: 'black',
overflow:'auto',
textAlign: 'center',
border: {
width: 7,
radius: 5
// color: '#A2D959'
},
tip: true,
solo: true,
show: { ready: true, delay: 0 },
hide: {
fixed: true,
when: {
event: 'unfocus'
}
},
name: 'green' // Inherit the rest of the attributes from the preset dark style
}
});
To make the tip scroll with your page you can set the:
position: {
adjust: {
scroll: true
},
You already are closing the tip when it loses focus so the only other thing to accomplish would be the timed closing of the tip. My thought to do this would be in the show event you can set a timer to trigger the close of the qtip.
events: {
}, //render
show: function () {
//setup timer to close qtip......
I've got a a Tab panel with a few tabs inside. I'm using the iconCls property in the tabs to give each tab an image along with its title. I'm using the fam fam fam 16x16 icons and the default tab space is cutting the images off at the top/bottom.
I tried messing around with the icon's class by changing the margins but it's not helping. According to the documentation the ext.tab.Tab component has padding and height properties, but setting those is not having an effect on the tab at runtime.
Ext.define('AM.view.Tab.Standard', {
extend: 'Ext.tab.Panel',
alias: 'widget.TabStandard',
region: 'center', // a center region is ALWAYS required for border layout
deferredRender: false,
activeTab: 0, // first tab initially active
initComponent: function() {
this.items = this.buildItems();
this.callParent(arguments);
},
buildItems: function(){
var items =
[
{
padding: 10, // nope :(
title: 'Gantt',
autoScroll: true,
iconCls: 'gantt icon',
},
{
height: 10, // nope :(
title: 'Logs',
autoScroll: true,
iconCls: 'logs icon',
},
{
title: 'Help',
autoScroll: true,
iconCls: 'help icon',
}
];
return items
},
});
Perhaps I'm misunderstanding how those properties work, but the everything on the page looks the same.
EDIT: It appears I'm having the same problem with the "Headings" (the bar with the +/-) when used as an accordion panel.
You can customize tabs in a tab panel by using the tabBar property on tabPanel:
var tabpanel = new Ext.tab.Panel({
plain: true,
region: 'center',
tabBar: {
defaults: {
flex: 1, // if you want them to stretch all the way
height: 20, // set the height
padding: 6 // set the padding
},
dock: 'top'
}
});
With the rise of CSS3, I'd like to control the animation used by the mootools accordion class via css transitions, and I figure the best way to do that is to assign an active class to both the toggler and element parts of the accordion.
I've been able to do that for the toggler element, but after many attempts, I can't figure out how to give the element an active class.
The mootools code I've got so far is:
var myAccordion = new Fx.Accordion($$('.toggler'), $$('.services-element'), {
display: 1,
fps: 24,
duration: 400,
onActive: function(toggler) { toggler.addClass('active-accordion'); },
onBackground: function(toggler) { toggler.removeClass('active-accordion'); },
show: 0,
height: false,
width: false,
opacity: 0.3,
fixedHeight: 320,
fixedWidth: null,
alwaysHide: true,
initialDisplayFx: false
});
If anyone can help with this, I'd be most appreciative.
Thanks to the info provided by Johan, I've amended the onActive and onBackground rules as follows:
onActive: function(toggler, element) { toggler.addClass('active-accordion'), element.addClass('active-accordion') ; },
onBackground: function(toggler, element) { toggler.removeClass('active-accordion'), element.removeClass('active-accordion'); },
This gives me what I need.