How to construct ExtJS4 layout - layout

Can't program quite not complicated structure so be so kind as to prompt me how can I solve this problem. I have tabPanel and on the first tab I want to place three panels but in specific order:
enter image description here
Panel 0 (layout vbox) consist of Panel 1, 2 and 3 each are constructed with form fields and one grid. This is working properly. But when I try to add Panel 4 I receive empty tab.

Regarding your image the Panel 0 should use layout 'hbox' in my understanding.
I didn't worked with ExtJS 4, so I don't know the layouting mechanism, but what I saw is that the elements in my fiddle disappear when I remove the flex property.
Possibly the following fiddle is what you want:
https://fiddle.sencha.com/#view/editor&fiddle/3cog

Related

Webflow grid layout

I cannot find how is this done, I want to take the layout straight, I mean no one box above the other.enter image description here
I tried to check the grid and flex customizations
In that screenshot you're likely seeing alternating item layouts.
My guess is the odd-numbered items have a margin-top styling.
See the Webflow-U docs on this to change that setting to whatever you like.

How to enable "position:fixed" for elements that are within an isotope item?

I am currently using isotope to organize my portfolio. I found that if I decided to place elements inside an isotope item and make these elements' position as fixed, they will not displace fixed on screen. Instead, these elements will use the isotope item's x and y position as the initial screen position. For instance, if I place an element as position:fixed and left:0; top:0; this element will not display on the top left corner of the screen. Instead, it will display on the top left corner of the isotope item.
Another issue I encounter is that the z-index of the element inside of the isotope item is not independent. If I give the element a greater z-index than other isotope items, say if the element has the z-index of 100, and all isotope items have the z-index of 10, the "portfolio_display" will still display behind all isotope items.
To explain what I am trying to achieve:
I want to make the isotope items become clickable, and when it is being activated, a full screen portfolio display will show up and take over the screen.
I do know plugin such as lightbox 2 will work. However, I like to have my portfolio display have much richer functions than lightbox 2. I want to put case study, images, videos, in the full screen mode, and each screen can be format like web page. So my method is to put multiple formatted divs into an isotope item, and use javescript (written by myself) to control their visibility and scrolling. This method works until I started integrate isotope to my portfolio.
I imagine isotope created a little "web page" inside of the bigger "web page" so it dictates the z-index and the position inside of its own. I like to know if I can disable isotope's dictation to its sub elements without breaking its great functionality.
Thank you.
For your full-window display purposes, you can change the modal overlay technique in this demo to your purposes. No plugin needed, you can put whatever you want to show in there, not just use it as an easy self-made modal.

What is the best way to achieve the following customized layout?

I am kind of wondering what the recommended method is for a customized UI. I have about 5 screens, which will share some of the same elements. One is a topbar, kind of like the navigationbar but different. It has the title on the left, no back buttons, a background image and a logo on the right. The other is a menu at the bottom containing and UIImageView for the bar, 3 UIButtons a the moment opening 2 different screens and one opens the Camera. I want to reuse the top bar and bottom bar on all 5 screens. Sort of like one would use a UserControl on ASP.NET.
Currently I have created 5 ViewControllers, which gives me 5 XIB files that I have to put the same elements on and I have to hook up the same events. I would want to create 2 elements (top and bottom bar) which I can reuse across all screens. Or is there a simpler solution to all of this like e.g. 1 screen pushing different middle parts into it or something like that? Quite the beginner at MonoTouch for that matter, so I'd love to know what the way-to-go for something like this is?
If you are not able to customise / reuse the standard UINavigationController etc, you could -
Create a custom UIView in Xamarin / Monotouch for each of your reusable elements, then insert them into each ViewController (programmatically is probably easiest) as required. This would give some code reuse and is akin to the UserControl example you mentioned.
Alternatively for IOS5+ you could create a Custom ViewController Container which has all the common parts in one place and have a single container UIView which you would then switch the rest of your Content ViewControllers as you need to.
I have actually just finished a github example of this which may help -
https://github.com/wickedw/ViewControllerContainer

How to stretch and scale a single child in a container(e.g. panel, groupbox) to fit different resolution screen? C#.net

Basically, I have an usercontrol as main container, inside which I have a few groupboxes and buttons. But, my interface controls will not be resized and positioned properly as what I expect in design interface.
I've already tried to change the anchor and dock properties but none of them serve my purpose.
I searched online and found something called viewbox in WPF, I'm wondering if there is something like "viewbox" in visual studio 2010?
Please help!
Try using TableLayoutPanel container and put your controls in it. It is similar to the idea of table in HTML where it is divided to rows and columns each one of them can be set to either a set of pixels or a percentage. Usually if you want to use re-sizable form, usually you should have a control that will give you good results when stretching such as image, multiline textbox etc... In addition, put the dock property to fill to get the stretching you want.
I hope this info was useful for you.

I'm having problems using jquery-masonry in a drop down menu

I'd like to use jquery masonry within a drop down menu, to organize the dynamic menu item blocks (images and text) in a complex drop down menu.
I'm having a couple of issues.
First of all, if I start with display:none then masonry doesn't do any position calculations. Since I'm using masonry with a drop down menu, I can't open the page with the drop down visible.
Secondly, the menu container has to be position:absolute so that the drop down opens Over the continuing page and doesn't push down the text below the menu. Masonry pushes the rest of the page down.
Thirdly, with IE 8 and 9 (didn't try 7 yet), when the I hide and show the dropdown, the blocks of items start off unorganized and then instantly switch to the organized masonry layout. It's the flash on every hide and show that I don't understand and can't get rid of.
Has anyone successfully used jquery masonry within a dropdown menu?
Thanks
According to the first issue, just use visibility:hidden and in hover event visibility: visible instead of display:none & display:block.

Resources