Having an issue with an app that has huge dependencies on Highcharts+Highstocks. The issue is that the labels for simple bar charts aren't tucked neatly under the bars but instead are skewed to the left way too much. I have too many theories as to why it happens to even mention but if you look at the image I attached you'll see right away (also it's noted in the image).
I've done quite a bit of research and experimentation on this and --- I saw some promise on the API side of things - to really muscle those labels around looks like it might be embedded in the Highcharts js codebase, to which access & forcing overrides is a little bit tricky in the way we implemented Highcharts + Highstocks.
Has anyone encountered this before? If so would you mind a comment or two as to how you managed to get those labels to align under the bars themselves? In a perfect world I'd have those MMM-YY labels centered right beneath the centerline of the bars.
Thank you in advance for your time and for reading this! Any ideas are appreciated and welcomed!
This is the issue I'm referring to:
According to documentation:
HTML labels that can be positioned anywhere in the chart area.
Use CSS to position those labels, either:
text-align: center;
or
margin: 0 auto;
Depending on how the code is structured. If you post your code I can give a more specific fix.
Related
I wanted to ask you for your help. I fought with it for quite a long time but I couldn't come up with good solutions. This is my first project in Django and HTML/CSS/js so I am sorry in advance :P
I created two images that will help me explain my problem:
In this case, I have three images, png with alpha. The actual image is in red "I-1". The darker border is actual image size. By default they of course stack like that. And yellow is other stuff.
When I place them ether by position relative or absolute it looks like that:
And it is also quite logical why this happens. This is kinda what I want to achieve. But there are two/three problems:
1.1 - Other stuff for the website is way down, this looks weird and I don't like that.
1.2 - My jumbotron also is stretched way down.
2 - I have a different amount of images in various cases. Sometimes there are 3 of them and sometimes 5 of them. And each one of them I need to place a little bit different. That is a big problem for me.
I managed to create three types of them, when first(1) and last one(5) are always the same so it is cool, but 2, 3 and 4 in the middle needs a little bit different position.
I am new in Django, CSS, and HTML so to be honest, I don't even know how I should google that. I will be very grateful for any help and tips.
Thanks and Cheers!
I searched internet and experimented for some time. And right now my best solution is css "scale".
I went with for example:
#head {
scale: 3.5;
z-index: 5;
}
And it is working quite well! First I add small images (like 100px) and then scale them up in CSS. This way they are aligned nicely and also don't take much space below them. By scaling up my "I-1", "I-2" etc. from my examples are next to each other and they don't take space around them.
It is certainly not an very elegant solution but it works :)
I am having an extremely odd issue creating a template for my zencart ecommerce website.
I find that many times I load the website my menu will break up and split over two lines as shown below.
The reason I find this behavior odd is that if I refresh the page it correctly displays.
Now I could understand how to fix this if it was consistently one way or the other but it seems to vary between the two with no obvious difference in the code... I am not sure if this is some sort of technical bug with chrome as I haven't been able to replicate it in other browsers however even if it is I really need a way of working around it. So I am curious as to whether anyone has had this issue before and if so how they got around it.
Link to live site: http://digitalmatrixonline.com.au/
Thanks Jason
If you add
white-space:nowrap;
To the div that contains the list it should prevent this, not sure why it's happening though.
Edit: here is a jsfiddle showing the technique http://jsfiddle.net/RM4S2/
Edit: No floats http://jsfiddle.net/BsGfu/2/
This is a really strange problem, and I was able to recreate the quirkiness in Chrome. While I don't know the direct cause of the issue, I think I found one way that works.
If you set the width of the second div within 'navEZpagesTop' that you are floating right that is wrapping,to 'width:485px;'. This seems to give the section room and does not wrap. If you want to leave more room for this expand without modifying the css you could set it to a much larger size, and float all the links inside of this to the right(instead of the left).
Hi guys, in the above image there is a screenshot of a UI I am working on for the purposes of a college assignment which involves manipulating the DOM using JQuery.
Currently I have the logic working and I am now trying to tidy my code and enhance the UI. I'm not sure if this is the correct place to ask this question as strictly speaking I do not think it is a programming issue but I thought I'd take my chances!
For some reason the slider in the image above is being pushed out of place and I have no idea why. Does anyone know what might be causing this??
The stylesheet is huge so I don't want to include it, unless you need to see a certain part.
Any help is much appreciated.
In the image the circle shows the slider trailing off the UI. The arrow points to where It should be located. The underlined slider is how it should also be appearing.
I am currently working on recreating Apple's iOS 5 Toggle Switch in HTML5 and CSS3. The key is that due to requirements, the composition cannot be made up of any images whatsoever. I have been able to achieve almost everything that I wanted, however there seems to be an issue with cropping the container box so that it only displays half of the toggle at a time.
Here's a screenshot to help explain what I mean:
Notice that the pink border (added only for development purposes) is rounded, but the content which extends past it seems to break out of the border-rounding. Can anyone suggest a suitable method by which I can prevent the content from expanding past the border-radius - effectively cropping the content of that div to fit inside the rounding?
I am currently thinking that this could be achieved using the -webkit-mask-box-image property, and image data URLs (for example somethin like: data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7). Is there a better solution, or can anyone offer help on creating these data URLs?
I hope that makes sense, and any help gratefully received.
Unfortunately I believe this is a design flaw with webkit. The content is never clipped to the border radius. As for base64 encoding, I've found this tool helpful
I've been tasked with creating an HTML5 demo that basically consists of a rotateable cube. Each face should have different text on it, and then when you tap a face it should animate itself so that the face expands to fill the entire screen.
Are there any good (simple) tutorials out there that show how to do this? Everything I've found so far is excessively complex and appears to contain a great deal more code than just what I need. I have a basic understanding of HTML elements and javascript.
Check out whats going on at http://www.htmlfivewow.com/slide44 which tackles most of your cube needs. Hit right key a few times and you'll see it going. You should be able to work from that. It's all just <div>s.