I'm using Videogular. I want to set Height & Width dynamically. how do i set the value
videojs.options.width = sizeWidth;
videojs.options.height = sizeHeight;
is this right way to set width & height for videogular?
If you want to automatically resize Videogular in a responsive website you can set vg-responsive="true" and Videogular will fit in its container.
However, if you want to change manually the size you must change the properties that you've binded to vg-width and vg-height, like you're doing in your code. Maybe your HTML is wrong, so this is how it should looks like:
<videogular vg-width="videojs.options.width" vg-height="videojs.options.height" vg-responsive="false" vg-theme="config.theme.url">
<video vg-src="videojs.options.sources" preload='metadata'>
<!-- You can also have sources here and remove vg-src="videojs.options.sources" -->
</video>
</videogular>
Related
I am creating a dialog with MUI which contains three types of content whose width is very different.
First, I need to upload an image and in the second content I need to crop it and third I have to be able to add a caption for it. So how do I set the width for the dialog such that even if images of varied dimensions are chosen it is completely shown?
For that dialog, add sx = {{ width:'fitContent' }} and try if that works
I have been working on a Bottom Tab Navigator and try to make tab bar items being highlighted with a circle shape around the icon when they are selected. I tried to set the height and width inside tabBarItemStyle, however, only height changes while width does not change. Is there something else I missed? How can I set the width so that the highlighted part is in a circle shape?
Here is a demo of the tab bar I am working on.
https://snack.expo.dev/qLi7s9qAA
The issue is because the width value is being overridden by the containers flexbox property.
A quick easy fix is to use the maxWidth property instead of width in tabBarItemStyle properties.
There's a nice article here: https://mastery.games/post/the-difference-between-width-and-flex-basis/ that explains it.
I am developing an application which shows images in ons-list (each image in one ons-list-item)
Each image has different height, so I cannot set the height of the item to something fixed, as well as I cannot set the height of the ons-list-item to be dynamic. I've tried setting overflow:auto but i doesn't affect. Any Idea?
I found the solution in case of others having same question
setting display style on list-item as below
<ons-list-item style="display: table;"></ons-list-item>
Showing charts in Bootstrap popover directive. I am providing height and width.
It is working as anticipated in Firefox but in Chrome its getting cut. Once I am play around with chart it would re-size to my given height and width. Anyone has idea what must be wrong. I am using ng-repeat as i may have multiple chart in popover.
below is HTML.
div class="chartHolder" ng-repeat="chart in rawdata"
nvd3-line-chart data='chart' width="425" height="400" showXAxis="true" showYAxis="true" tooltips="true" interactive="true" useInteractiveGuideline="true" yaxislabel ="Form Y" yaxislabeldistance = "35" legendradiobuttonmode="false" xaxislabel ="Form X" isArea="false" transitionDuration= "350" showLegend="true" objectEquality="true" margin="{left:50,top:25,bottom:50,right:40}">
/nvd3-line-chart
The problem is probably that since the chart is not on the screen when the page loads, so it has a width and height of 0.
When the popover appears, even though the width is 425 and height is 400, the chart still thinks it is width 0 and height 0 until you move the page in which it resizes and gains the correct size.
The trick I have used in the past is using an ng-if directive to force the chart to instantly render to the correct width and height and never be set to 0 height and 0 width. This works because ng-if makes sure the chart never is in the DOM when it resolves false.
So just make a boolean that determines whether a chart is shown or not and then use ng-if to hide/show the chart.
Hope this helps.
I put my carousel in container item.
In portrail mode, I set height 150, the images display fullscreen in carousel.
But when I change to landscape orientation, there are two white blank in two side of images.
I want change size carousel by setting another value of height. Can you help me solve this problem?
You need to catch the orientationchange event
(http://docs.sencha.com/touch/2.0.2/#!/api/Ext.viewport.Default-event-orientationchange) and upon catching it call a function which will resize your container.
You can try something like this:
Ext.Viewport.on('orientationchange', 'handleOrientationChange', this);
Then in the handle function set your desired size of component:
handleOrientationChange: function(){
Ext.getCmp('idOfMyContainer').setWidth('480px'); //or setHeight() depending on the real problem
}
You could also set the width and height according to the real size of screen, which you can get by calling these methods. Note that orientation change doesn't affect the return values of these so you would need to switch it manually:
Ext.Viewport.getWindowWidth();
Ext.Viewport.getWindowHeight()