In a Flex application I'm building I have an Accordion with a Tile component as shown:
<mx:Accordion id="accordionShoppingBasket" width="100%" resizeToContent="true">
<mx:VBox width="100%" height="100%" >
<mx:Tile id="tileOutNow" width="100%" height="100%" horizontalGap="12" verticalGap="30" paddingLeft="20" paddingRight="20" paddingBottom="20" paddingTop="20" verticalScrollPolicy="off" />
</mx:VBox>
<mx:VBox width="100%" height="100%">
<mx:Tile id="tileThisWeek" width="100%" height="100%" horizontalGap="12" verticalGap="30" paddingLeft="20" paddingRight="20" paddingBottom="20" paddingTop="20"/>
</mx:VBox>
<mx:VBox width="100%" height="100%">
<mx:Tile id="tileFutureRelease" width="100%" height="100%" horizontalGap="12" verticalGap="30" paddingLeft="20" paddingRight="20" paddingBottom="20" paddingTop="20"/>
</mx:VBox>
</mx:Accordion>
The items I'm adding to the tiles are a canvas with an image inside that.
The data for the tile is added via the addChild method; and this works for the first 4 rows of children, the accordion control resizes to accommodate the tile control. After the first 4 rows the children are still being added but the accordion no longer resizes to fit the content.
I'm not 100% sure what's causing this, any ideas?
Cheers
Tony
Hmm, you want the Accordion resize to its content, BUT, you set the content size to 100% ... its look like an endless loop ...
Try removing the resizeToContent OR set a correct size for the children Tile(s) ...
Hmm, what do the parent(s) of the accordion look like? Meaning, could their height be restricting the height of the accordion?
Otherwise, posting more code might be necessary.
Related
I need to add only one image to the carousel through materialize css, but that image should stay in its position without moving when clicked on the space around the image.
<div class="carousel" >
<a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1"></a>
</div>
$(document).ready(function() {
$('.carousel').carousel();
});
I am able to display one image in the carousel but the image is hiding when clicked on the space around the image.
I use carousel component from https://vuetifyjs.com/en/components/carousels
<section v-show="artistImagesList.length > 0">
<v-carousel>
<v-carousel-item v-for="(nextArtistImage,i) in artistImagesList" :src="nextArtistImage.image_url" :key="nextArtistImage.id" :alt="nextArtistImage.image_url">
<div class="carousel_image_title">{{ concatStr(nextArtistImage.description, 100) }}</div>
</v-carousel-item>
</v-carousel>
</section>
Using it I need more options to control some images like
1) If images are too big in width/height I want to show images with size ratio of carousel size. Is it possibel?
2) How set max width/height for image area?
3) When I open page with seconds interval default I see empty carousel area and only after interval default seconds first image is opened.
I set valid list of images, without empty elements. But looks like some empty image is opened at first.
Is it wrapper of some library? Can I get access to its options? Please give reference to example how to make it...
Packages used
vue.js2.5.7
vuetify,1.0.8
For number 2) to set the carousel to 400px width and height, I'm currently using the following code. But to answer 1) you can set these values to whatever you want.
<v-flex xs12 style="width:100%; max-width:400px; margin: auto 0">
<v-carousel cycle hide-delimiters style="width:100%; max-height:400px" class="white">
<v-carousel-item v-for="(item,i) in images" :src="baseUrl+item.url" :key="i"></v-carousel-item>
</v-carousel>
</v-flex>
And for 3, if you're getting this error because you're loading images through axios (like i was) it can be fixed with adding a v-if to the carousel. v-if="myloadedimages.length > 0". This way the carousel will only be shown once the images have been loaded, and the first image will display.
I'm trying to use Skrollr to fix an element to the bottom of the viewport, if the bottom of the element hits the viewport bottom. This part is fine.
The problem is, after - lets say 1000px - of scrolling, i want to continue the scrolling, while i change the above mentioned fixed element to static again.
<div class="header">Header</div>
<div class="height-placeholder" data-anchor-target="#fixed-element" data-0-bottom="display:none;" data--0-bottom="display:block;"></div>
<div id="fixed-element" data-0="#class:;" data-bottom="#class:stuck;" data-1000="#class:;">Fixed at the bottom for a while</div>
<div class="content">
Regular content...<br>
</div>
http://jsfiddle.net/bkccg8x5/2/
So my idea was to create a placeholder above the fixed element and when the fixed element is stuck to the bottom, i simply add this element, so when i unstuck the fixed element, it would continue to scroll normal without any jump.
The problem with this solution is that i defined a fixed height for the placeholder, and this way it will only work correctly at a certain viewport height. Makes things more complicated, that every element on the site has a fluid height, so i need a solution that will work in every resolution.
Any ideas?
I solved this by creating a 1000px tall container and when the bottom of the container is hitting the bottom of the viewport, i change the fixed element to absolute.
<div class="header">Header</div>
<div id="height-placeholder" data-0="#class:;" data-bottom="#class:unstuck;">
<div id="fixed-element" data-0="#class:;" data-bottom="#class:stuck;">Fixed at the bottom for a while</div>
</div>
<div class="content">
Regular content...<br>
</div>
Here is the demo, works fine with any height:
http://jsfiddle.net/bkccg8x5/3/
How can I scale an inline PDF when it loads, rather than forcing the user to click one of the two scaling options at the bottom of the PDF?
The width of the parent div the object is in is 680px wide, so when the PDF loads it has horizontal scrolling that I would like to do away with.
<div class="content">
<object data="pdf_link.pdf" type="application/pdf" width="680" height="870">
<p> It looks like you can't view this PDF, but you can download it here.
</object>
</div>
Note: width="100%" doesn't do the trick
I have the following nested layout in a dojo 1.4 app:
BorderContainer 1
--> Stack Container 1
-->-->BorderContainer 2
-->-->BorderContainer 3
The StackContainer is sized with width and height 100%.
When I resize the browser window using maximise/restore, the StackContainer correctly resizes to the center region of it's parent BorderContainer.
The problem I have is that the StackContainer children (BorderContainer 2 and 3) do not get resized to the StackContainer's contentBox.
Is there something special you have to do to force a resize of StackContainer children?
I have tried calling StackContainer1.resize() but this makes no difference.
Thanks in advance.
Additional information:
Thanks for the reply peller. The widget hierachy that contains the StackContainer is actually a custom widget, so the StackContainer is not actually in a BorderContainer directly, but has its height and width explicitly set to 100%. This works and the StackContainer is resized correctly on browser maximise. The direct children of the stackcontainer are BorderContainers and it is these BorderContainers that do not get resized when the StackContainer is resized. The exact markup is:
<div dojoType="dijit.layout.StackContainer" style="height:100%;width:100%;">
<div dojoType="dijit.layout.BorderContainer" gutters="false" style="height:100%;width:100%;padding:0;" id="bcWrongSize">
</div>
</div>
It is the BorderContainer 'bcWrongSize' that does not get resized with the parent StackContainer. The inlined height and width specified on the BorderContainer are replaced with explicit pixel dimensions by the StackContainer. However, on browser resize, the StackContainer is resized to its parent widget correctly, but the explicit height and width on the BorderContainer are incorrect.
Incedentally, the layout method on the StackContainer is called, and it resizes the BorderContainer (being the visible child). However, the _contentBox dimensions that it passes to the BorderContainer are the dimensions of the StackContainer BEFORE its resize. The width and height computed by dojo.marginBox are incorrect (the offsetWidth and offsetHeight are the dimensions from before the browser maximise).
Maybe this issue is because the StackContainer is the subContainerWidget of a custom widget and so is sized with width and height 100%?
We had a similar problem on a project. Below is the snippet that worked for us. Note the use of region for the stackContainer (it's in a bordercontainer) and the lack of height/width on the inner border containers.
<div dojotype="dijit.layout.StackContainer" jsid="buttonStack" region="bottom" style="height: 180px">
<div jsid="selectionButtons" dojotype="dijit.layout.BorderContainer" gutters="false">
<div dojotype="dijit.layout.ContentPane" region="bottom">
<button id="btnClearSelection" dojotype="dijit.form.Button"
label="Clear Selection" disabled> </button>
<button id="btnClearAll" dojotype="dijit.form.Button"
label="Clear All" disabled> </button>
</div>
</div>
<div>