The arrow of each combobox is displaced in all browsers (i tried firefox, chrome, opera). Does anybody know what the problem could be? Any help is appreciated.
See http://www.sencha.com/forum/showthread.php?168487-ComboBox-selection-arrow-is-displaced&p=703835 for further details to this issue (as im currently not allowed to upload a screenshot here.)
See also the below code that causes the issue.
public class MyApp implements EntryPoint {
#Override
public void onModuleLoad() {
LayoutContainer container = new LayoutContainer();
final SimpleComboBox<String> combo = new SimpleComboBox<String>();
combo.setEmptyText("Select an item...");
combo.setDisplayField("item");
combo.setWidth(150);
combo.setTriggerAction(TriggerAction.ALL);
combo.add("Value1");
combo.add("Value2");
container.add(combo);
container.setBorders(true);
container.layout();
RootPanel.get().add(container);
}
}
Ok I found out why this is happening. I'm using the Maven GWT plugin in my project, thus I used this plugin to generate the archetype. I have a MyApp.css file that was automatically generated in order to introduce custom css layouts. However, I never looked into that css file. This generated css file contained, amonst others, a top margin for all images. And of course this margin was causing this issue. I think this thread can be closed then.
img {
margin-top: 20px
}
Related
Having a strange issue while using SVGs in TornadoFX. I have a few SVGs strings stored in an enum I'm using as background images in my program. When I view the exact same SVG path in an online viewer, there is no distortion and it appears correctly:
but when I use the same path in TornadoFX as a svgpath node content, it appears like so:
Note the strange thinning of the lines in the top and bottom middle sections.
It's easier to see with the second svg:
Online viewer:
TornadoFX program:
I'm not quite sure what could be causing this. In everything else I view the SVGs in (web, illustrator) they appear fine, but as soon as I load them as a string in a svgpath node, they appear distorted.
I'm initializing them like this:
class mView : View() {
override val root = stackpane {
svgpath("M910.7,329.8a446.43,446.43,0,1,0,35,173.23A443.52,443.52.. etc") {
addClass(SvgStyle)
}
//..
}
Any ideas what would be causing this strange distortion? I'm pullin my hair out here.
edit: a fiddle of the curvy SVGs
TornadoFX doesn't affect the SVG rendering in any way, so I can't see any other explanation that this being a bug in the SVG rendering capabilities of JavaFX. Perhaps you're using a path expression not supported by JavaFX?
For the sphere, can you try setting the stroke on the SVGPath object as in the following example?
stackpane {
svgpath("M107 380c40,-101 80,-102 120,-1m-1 -4c39,101 79,102 120,1m-1 4c39,-101 79,-101 120,-1m-1 -2c39,100 79,101 120,1", FillRule.EVEN_ODD) {
fill = Color.WHITE
stroke = Color.BLACK
strokeWidth = 16.0;
}
}
In the curves part of the question, can you post the full SVG path? I suspect there's something in the path source telling JavaFX to render the thinner segments.
I have a project due for University that involves SVGs, however mine won't load. All I get is:
"Ignoring image tag.
The width and/or height is not readable in the svg tag of this file."
Please help? I'm trying to load an SVG that has colour in it. This is the code:
PShape m;
void setup() {
size(1280, 720);
m = loadShape("mountain.svg");
}
void draw(){
background(102);
shape(m, 110, 90, 50, 50);
}
And if you need the SVG or something, let me know.
Thanks
I think I solved it.
just make sure that your artboard is bigger that your illustration.
For instance, If you set the artboard to fit bounds, then processing would mostly likely give you this message.
Another thing that I realised is that if you're using illustrator 2015, your SVG file will be moved to the left of the processing screen, and sometimes outside of it.
A workaround would be to put your illustration towards the top right of the screen, then save as an SVG file.
OR, you could just download illustrator 2014, you can do that from the creative cloud app on your computer. Just remember to always leave plenty of space for your illustration in the illustrator dartboard before you save.
I hope that helps!
I am working on an educational tool that mainly uses the D3js library. To make parts of my code reusable, I want to put as much code as possible inside a constructor, so that I can work with instances of that constructor. However, a very weird bug shows up when I try to update parts (for instance the border-color) of the graphic: only a small part of the border changes color and, for extra weirdness, the rest of the border changes when I switch to a different in my browser and then come back.
This jsfiddle shows the problem. Upon loading the canvas border is black. When "Red"/"Blue" is clicked, the border should turn red/blue. In Firefox this works fine, but in both Chrome and Safari only a small part of the border changes color…
The code I use is the following:
var Canvas = function(B, H){
this.canvas = d3.select("#holder").append("svg:svg").attr("width",B).attr("height",H)
.style({'border':'5px solid black'});
this.red = function(){this.canvas.style({'border':'5px solid red'});};
this.blue = function(){this.canvas.style({'border':'5px solid blue'});};
}
var Canvas1 = new Canvas(200,70);
Click "Red"/"Blue" class the red/blue functions that should change the color:
$("#red").click(function(){Canvas1.red();});
$("#blue").click(function(){Canvas1.blue()});
Since this works fine with Firefox I suppose the problem has something to do with the Webkit, but I have no idea how to fix it…
Any help is much appreciated!
Hi in Drupal 7 I am using autocomplete search. In search input it displays part of ajax loader animation all the time even when the input is not focused. Bug is marked with red square .
Any suggestions please why there is this bug. (I am using boostrap theme)
Thank you for help.
It's not a twitter bootstrap error.
See your drupal installation's misc/throbber.gif file. You will see that it's actually a sprite and when the ajax request is in progress, it changes its position to show the animated throbber.
You will need to create a new one and adjust CSS accordingly to workaround this issue. Your text field has a relatively higher length than this sprite's
Add the following CSS to your theme's css file. These styles are defined already, so you will only need to override them. See inline comments.
html.js input.form-autocomplete {
background-image: url("/misc/throbber.gif"); // Enter a new thribber image here.
background-position: 100% 2px;
background-repeat: no-repeat;
}
html.js input.throbbing {
background-position: 100% -18px; // Adjust this -18px to the height of your new throbber.
}
I would like to put a custom icon in a p:menuButton, is this possible?
Yest it is possible. All you need to do is to override primefaces css classes generated for the p:menuButton.
Approach:
In the rendered web page you can right click on the generated p:menuButton and -> inspect element. There you can inspect all of the related css classes.
You can try to experiment with them (which I would advice, if you have time) for better understanding of css selectors and so on ...
The .ui-menubutton .ui-state-default .ui-icon are the classes that you need.
So now when you know which css classes are related to the icon you can override them :
Add .ui-menubutton .ui-state-default .ui-icon rule to your stylesheet (I assume you have one and it is sucesfully imported and working. If not check here.)
yourStyles.css :
.ui-menubutton .ui-state-default .ui-icon {
background: orange; /** insert your background image **/
}
This will override icons of all p:menuButtons used in your project. If you want to reduce it to some particular p:menuButton then add its ID to the style definition.
#menubID.ui-menubutton .ui-state-default .ui-icon {
background: orange; /** insert your background image **/
}