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>
Related
I have a project that includes text fields, buttons and a certain form design. I'm using Vuetify to achieve this but there's one problem that I'm not sure how to handle: Vuetify components dimensions seemed not changable.
For example :
I want v-text-field, v-select and v-btn to have the same height and <v-select> to be a bit wide relative to the button.
Is there a way to achieve this in Vuetify ? Or is it handled by CSS superimposition ?
Here is one way, using flexbox to keep items in a row, with one child taking up all the remaining space. Flexbox has a nice ability to override the child width and give you predictable results.
<div style='display:flex'>
<div style='flex:0 0 auto'>Item 1</div>
<div style='flex:1; background-color: yellow'>Item 2</div>
<div style='flex:0 0 auto'>Item 3</div>
</div>
in terms of the height, there is a height property for inputs and button
checkout here : https://vuetifyjs.com/en/api/v-input/#props-height
Basically I took this, https://vuetifyjs.com/en/examples/layouts/googleContacts.
I don't like float containers, I want everything to fit into usual fixed-width centered v-container on a large screen. That's what I'm trying to achieve:
But I met a number of obstacles with toolbar: it's float but it's content is centered and has fixed width. I pasted v-container inside v-toolbar, but it was not centered since v-toolbar__content > *:first-child and last-child have margin:0. Then added v-flex before v-container and that caused height collapse so the v-toolbar buttons were not occupy full toolbar height anymore. Then added v-layout to expand height and some v-flex inside but still haven't got any success. The question is how to properly work with v-toolbar and v-container to make the toolbar's content fixed width and centered.
Apply to v-toolbar this style:
<v-toolbar :class="{ 'my-toolbar': $vuetify.breakpoint.smAndDown }"> </v-toolbar>
<style>
.my-toolbar { width: 80%; left: 10%; }
</style>
You will have to play a bit with the % to keep it inline with v-container elements. You can also look into a computed property to check different breakpoints.
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/
I am attempting to put a weekly agenda in a row of thumbnails using Fullcalendar, but the resizing doesn't seem consistent.
1) On my work monitor, the agenda table renders correctly at full screen width, then changes to being taller than the neighboring thumbnails when the screen is narrowed, and then returns to correct rendering at full width. It also renders correctly when in mobile emulation and the row switches from horizontal to vertical configuration. The screen resolution is 1920x1080.
2) At home, the agenda renders initially as taller than the neighboring thumbnails at full width, then remains taller as the horizontal dimension decreases, renders correctly in mobile emulation, then renders correctly when the screen is restored to full-width. Screen resolution is 1366x768.
The base dimensions of the neighboring images are 465x300.
Relevant code bits. The jQuery calling the calendar (in the $(document).ready() section).
$('#calendar-index').fullCalendar({
defaultView: 'basicWeek',
height: $("#imgSource").height(),
width: $("#imgSource").width(),
windowResize: function(view) {
this.height() = $("#imgSource").height();
this.width() = $('#imgSource').width();
}
});
The HTML section:
<div class="row">
<div class="col-md-4">
<div class="thumbnail text-center"><div id="calendar-index"></div>Button Text</div>
</div>
<div class="col-md-4">
<div class="thumbnail text-center"><img id="imgSource" src="image1.png">Button Text</div>
</div>
<div class="col-md-4">
<div class="thumbnail text-center"><img src="image2.png">Button Text</div>
</div>
I've got a feeling that connecting it to a $("#imgSource").load() rather than $(document).ready() call would work, but I'm avoiding using deprecated functions if possible.
http://jsfiddle.net/sidhenimh/63e0h54o/
I found a fix for this, in case anyone else runs into a similar issue; it doesn't work perfectly, but it does at least make the horizontal scaling a lot more stable. There's a free jQuery plugin called "Datatables" that enables automatic horizontal scaling. Vertical scaling doesn't work still, but the table at least displays correctly initially regardless of monitor resolution/size.
Datatables Plugin
I have a DOJO Editor that is movable
<div id="dnd" dojoType="dojo.dnd.Moveable">
<div data-dojo-type="dijit/Editor" height="120px" width="250px"
id="editor3"
data-dojo-props="plugins:['bold','italic']">
<p>This instance is created with customized toolbar/ plugins</p>
</div>
</div>
I would like to know :
1- why changing the width attribute does not make any difference in the Editor's width
2- why the Editor resizes itself only when dragged for the first time(to the appropiate height)
I use DOJO 1.9.1
Use the style attribute on the div and not height and width and dojo will honor that.
<div id="editor3"
data-dojo-type="dijit/Editor" style="width:250px;"
data-dojo-props="plugins:['bold','italic'], height: '120px'">
<p>This instance is created with customized toolbar/ plugins</p>
</div>
The height will be auto-determined (be as small as possible and expand as required), but there is a minHeight property and a height property (shown above) you can assign in your data-dojo-props if you require height control