When I set a width for my Konva stage, it doesn't seem to be taken into account:
https://codesandbox.io/s/vue-template-4g1b7?file=/src/App.vue
When you change the height, everything works fine, but the width seems stuck to the width of the page. Is there away to force the stage to fit the width we want?
Thanks in advance.
Thanks to Anton Lavrenov (https://github.com/konvajs/konva/issues/915), I had the explanation:
That is because your container has display: block in styles (default
for div). You may set it to display: inline-block.
I updated the sandbox.
Related
This functionality is available for the Pie Chart via the plotOptions size parameter, however after inspecting the Highcharts API the size isn't available for the Gauge.
size API entry for Pie Chart
Considering the likeness of the two charts (being circular), I was hoping there would be a similar option but the gauge always fills some subset of the container div that I am unable to control. Has anyone else run into this issue or found a solution?
By setting the spacing to zero, you can fill the entire space:
http://jsfiddle.net/mkremer90/3sngK/1/
Fiddle with the spacing parameters to change how much the chart fills. As for a percentage based like size option I can't find one either.
I know this is old, but if like me, you have borderWidth set to something greater than 0, you'll find yourself with the tag being positioned (e.g. x="5.5" y="5.5") off from the corner and width and height shrunk. Setting spacing and margin options won't help in this case.
The simple solution then is to avoid setting borderWidth to anything at all; just leave it default or set it to zero. Instead, set the border on the container element you're calling highcharts on.
Alternatively, you could set negative margins and increase size on the container element to compensate for position shift and size shrink on the graph. Might need to wrap the container in a div with style="overflow: hidden;".
am using jquerymobile for representing a two column radiobuttons in my project, the problem am facing is the contents of the block-a is lengther than the contents of the block-b so am getting a difference of div size the output is at (http://i40.tinypic.com/r0tt85.png) if u can lookat my out put the second question 6th option is small when compare to all the other ones the block size is based on the content how can i make same size for all the blocks without based on the content any help please needed
If you want all blocks to be the same height, you can set the height in CSS:
.ui-bar {
height: 100px !important;
}
I trying to create a fixed border to the site that dynamically change size with the browser window from this sprite (it isn't perfect I know.): http://fc07.deviantart.net/fs70/f/2011/269/7/0/bordersprite_by_nakos-d4ayzne.png
DEMO on jSFiddle
My problem as you can see is the vertical wall part. As the #falJ and #falB are height:100% they include the bottom wall's end too with the space between the two wall sprites. Is there a way to force backround-position to only use vertical wall part without bottom wall's end?
Thanks in advance.
Solution: http://jsfiddle.net/vonkly/Ld43B/
It's not the prettiest thing in the world, but it achieves what you want. Check out the source code & direct link for the background images to see what you'll need to do. It's currently set at 299px wide; I imagine you'll be using something wider.
I'd also suggest adding some padding around your content (either with a p tag, span, another div, etc.) - the way it is currently set up isn't what I'd recommend for readability.
EDIT
The only way I can imagine achieving a fluid width + height box with the borders that you have in the way that you want is to use a second image for the west and east containing divs. This should work with your current method.
I am using jQuery-ui slider for the first time and am confused by a rather basic issue. When setting my slider, I wish to do so without using a theme. When I slide from left to right, the right hand position of the slider handle steps 1 handle width past the slider. This is due to the slider css positioning the handle with left: 100%. I note many many other people using the slider without any difficulty, but can't see how they are getting round this issue.
Demo of issue
I assume I am missing something embarrassingly basic and would love to know what.
many thanks
Having read a bit more into this, it seems that the slider is designed to act in the way described, but with the handle offset to the left by 50% of its width. Thus the centre of the bar denotes to value - which makes total sense (when the slider denotes a value).
To use the slider as a scrollbar simply wrap the slider in a div which is padded left and right with 50% of the slider's width. I've updated my demo to reflect this.
If anyone has a better solution, without needing the extra div, I would like to see it.
I checked your demo. You are missing some css files. DID you also download the css files from jquery ui site. For instance ui-widget-content is the css that specifies the width of the slider bar and its missing in your slider. Get a css and link it to your page and you should be fine.
Set a left margin or minus half the width of the handle
It also helps to ensure that the values passed to the slider are integer. I had some issues with the pointer of the slider being in the wrong place but when I forced the value to be integer with parseInt() like so:
value: parseInt(whateverValue)
it worked fine.
I find css "translate" property the best option here...
.ui-slider-horizontal .ui-slider-handle {
-webkit-transform: translateX(-2px);
-moz-transform: translateX(-2px);
-ms-transform: translateX(-2px);
transform: translateX(-2px);
}
Adjust translate pixel value to your needs :)
I am new to jQuery I am facing a some problem with jQuery gradient image please give me some solution for this
I have one div divided vertically in three part left, middle,right.The div has a background images (that is gradient) .and there is some data in the div. I want that the image height should be increase when the user input more data in the div
Can we increase the height of the gradient image using jQuery. Please give me some reference site or some solution
I don't know that you need JQuery to do this for you; it will be fun to do it on you own.
As you know, you can style the div such that its height will increase as you add more content to it. So your question really is how to make the gradient background appear the way you want it: you might want the gradient to grow lighter and lighter at the bottom, say, as the div increases in height. It just so happens (lucky you!) that background-image CSS is rich and capable. That's why it's fun: it actually works!
Read about CSS background-position for some ideas. You might find that the effect you want is automatic.
-- pete