I've got two formpanels I need to stack vertically. When I put both in a panel with layout 'fit', they render on top of each other. If I use a VBox, flex:1 on both splits them by percentage, when I need one form after the other. What's the right way to do this?
Do not put any layout and they will fit themselves automatically. By default, a container has AutoContainerLayout. Add vertical scrolling only to the parent container
Related
My goal is to have two sidebars on the left that are fixed and collapsible, and having the main content on the right to "follow" the sidebars when they collapse/expand.
Illustration of the possible positions for sidebars and content:
But let's proceed step by step.
I want a fixed sidebar on the left that is collapsible, and the main content (on the right of the sidebar) to be expanded when the sidebar is collapsed.
The thing here is that the sidebar has a fixed position, so the content on its right has to be pushed right (with a left margin) to avoid overlap.
I know the width of the sidebar so it's not a problem to play with CSS/JavaScript, and I have a working example here: https://jsfiddle.net/Pawamoy/yamm7eLh/2/
Basically, when you click on the sidebar (bottom part), active class is toggled on the sidebar and expand class is toggled on the content. These classes will change the width of the sidebar and the left margin of the content.
$(document).ready(function() {
$('#sidebar').on('click', function(e) {
if ($(e.target).is("#sidebar")) {
$('#sidebar').toggleClass('active');
$('#content').toggleClass('expand');
}
});
});
I want to add a second fixed and collapsible sidebar, at the right of the first one.
But playing with toggled CSS classes will not be enough since I need to calculate which sidebar is active or not, to be able to set the left margin of the content. The left margin would be 160px when both sidebars are collapsed, 320px when only one is collapsed, and 500px when none are collapsed. Not only that but the second sidebar itself needs to be pushed back and forth on the right depending on the first sidebar width.
Solution as I imagine it: the content could just "follow" the element on its left (the second sidebar), without changing its left margin value. Is there a way to do that, knowing that both sidebars are fixed (they stay at the same position on the screen when the user scroll the main contents)? In other words, how can I position the second sidebar relative to the first one, and the content relative to the second sidebar, and at the same time have both sidebars "fixed"?
I solved this by thinking with boxes. Instead of trying to accomplish complex resizing between three side-to-side elements, I used one more layer of div. See the idea on the image below: on the left is what I was trying to do. On the right is how I solved it. I even managed to add a fixed navigation bar. I just took what I already had and used it a second time in a sub-div.
The key here is to NOT specify the left CSS positioning value for your fixed elements. Here is the updated fiddle: https://jsfiddle.net/Pawamoy/yamm7eLh/3/
I have hbox layout, where in the left it shows tree and on the right
it shows tabs.
But the problem is I should not use hbox, but I should use border
layout.
When I use two column layout code is breaking.
Providing my code with hbox layout.
Can you guys tell me how to make the below code work in border
layout.
https://docs.sencha.com/extjs/4.1.3/#!/api/Ext.layout.container.Border
I am trying to change border in the below part of code
var createTreeAndContentPanel = function(tree) {
var retval,
contentPanel;
According to docs, if you are using a "Border" layout, at least one of the child panel has to use region : "center".
So you need to apply region : center on your panel containing tabs, and region : west to your panel containing tree.
Finally you need to add these 2 panels inside a parent panel with a layout: border
From doc :
Any Container using the Border layout must have a child item with region:'center'. The child item in the center region will always be resized to fill the remaining space not used by the other regions in the layout.
I would like to float a set of divs to make a fluid layout. And I would love to do it with pure CSS and no js if possible for performance/complexity reasons.
Currently, we have 3 divs per row and the surrounding element stretches vertically to accommodate the the tallest div. But of course when I make the page narrower or wider, I always have 3 divs per row.
With floated divs that don't have row containers, it looks great as long as all the divs have the same height. But if the 2nd div in a 2-div row is shorter than the first, then the next row's 1st div gets 'stuck' to the right of that 1st taller div, leaving the first spot in the 2nd row empty.
A solution might be to bring back row divs and use javascript to shuffle item divs between them, but that might be complicated and error-prone. But maybe that's the only possibility.
The one thing I can't do is use fixed height for the item divs, because that would require setting the fixed height large enough for the largest possible item div, which would leave a bunch of empty space for every other div.
I guess another possibility might be using fixed height, then use js to adjust those heights to eliminate extra space.
Make the display:inline-block and remove the float. Height will become optional as well, they'd just align to the tallest one.
If possible try switching to flexbox. https://css-tricks.com/snippets/css/a-guide-to-flexbox has great visuals to illustrate how various flex styles work.
For example, you could use flex-wrap: wrap; to handle the case when the page becomes too narrow, and use align-items: stretch so they all have the same height
I have a panel in a ExtJs Viewport with BorderLayout .
It is really taking a huge space on the screen. If I change the layout to
card from fit it does not make a difference. I have to scroll down to see the buttons.
http://jsfiddle.net/fastcodejava/VvKck/7/embedded/result/
check my update to your code where was some wrongly used minWindth, removed layout fit on top and missing some parts and needed to add MaxWidth to bottom part. You can check the full code on the fiddle link
layout: 'border',
maxWidth : 400,
I am struggling to use dojox.mobile.ScrollableView for scrolling horizontally: I have a
<div data-dojo-type="dojox.mobile.ScrollableView" scrollDir="h">
which contains several div elements which float left. However, in this case the elements are not displayed in one single row:
http://jsfiddle.net/wf6NZ/
I could place another div in the ScrollableView with a width set to the sum of all widths plus margins:
http://jsfiddle.net/N7MrD/
However, this requires calculation of the resulting width of all elements which I want to avoid.
So the question is: Is it possible to achieve the results of the second link without the helper div?
Try to define the style 'white-space: nowrap' in any container div.
For example,
<div id="view" style="white-space:nowrap" data-dojo-type="dojox.mobile.ScrollableView" scrollDir="h">