i'm a new Yiier, i have a question that how could creat 2 colume layout with yii 1.1,
i means the width 190px of left div is for menu, the right is for body,the width of right is 100%,and i need a div as footer under the body div,height is 50px.
Thank you very much for your Help.
If you are using default Yii layout and style.
You should enable column2 layout in the controller of the views where you need 2 column. Or if you need it project wise do it in protected/components/Controller.php as every Controller extends this one.
So the property declartion is:
public $layout = "column2";
This file can be found under protected/views/layouts/column2.php
In this file you will find two divs with classes span-5 and span-19. If you open screen.css you will see widths of those classes 190px and 750px respectively. In the div with class-5 you can find widget CMenu in a Portlet which you should use for your menu, it is getting item list from property $menu which is simple associative array.
Similar property declaration as before:
public $menu = array(array("label"=>"Hello", "url"=>"world.com"));
Now that you have set up this, you will find your menu on the right side, you can easily rearange this. Put the div with class span-5 under the div with class span-19 and move class last from span-5 to span-19
The div footer doesn't have property height defined which means it expands but you can easily add your own style with property height set to 50px and maybe add overflow: hidden which will hide everything that goes beyond 50px. You add these properties in your own file under ../protected/css/ directory and call it with
Yii::app()->clientScript->registerCssFile(Yii::app()->request->baseUrl."/css/yourFileName.css","screen, projection");
Related
In my app I have a deeply nested components structure. I have a component with a very long form which is scrolling vertically. Inside that scrolling block I have components with a 'cog' icon. When you click that icon, a popover should appear next to it (inside the scrolling block).
However, the popover should consider the height of that scrolling block. And depending on the position of the 'cog' icon should appear either to the bottom or to the top of it in order to fit within the scrolling block.
So, to summarise, I somehow need to know the innerHeight of the scrolling block contents and its absolute position (getBoundingClientRect) in order to position my popover properly.
Right now I've done it using the html element id. And then simply find element by id in the popover component constructor:
constructor(#Inject(DOCUMENT) private doc: Document) {
this.scrollingBlock = doc.getElementById('scrollingBlock');
}
And then simply get the properties I need from it. Like the following:
this.scrollingBlockHeight = (this.scrollingBlock.firstChild as HTMLElement).scrollHeight;
this.scrollingBlockRect = this.scrollingBlock.getBoundingClientRect();
Although, everything works now, I believe it's not very elegant/Angular-way solution. I'm using Angular 6 for my app. Is there any better way to achieve the same result?
I have 2 custom components and . I want to appear to the left of the component in order to make it horizontal scrollable. However even after using several js file and tutorials I am unable to do so. As a last resort I defined a class floatleft with the property float : left;. But it is still being placed vertically, one component after the other.
I am building large application in Starling and one of my main problems is who should I layout first: the parent or the children?
What is the default behavior in starling and also in flash:
By default Sprite will get his size based on his children after they have been added to stage.
What if I want to layout the children based on the parent? For example: What if I want to set one of the children to be at position of 20 pixels from the bottom, like bottom menu?
In this case I should:
Add the children
Determine their sizes. If you are building your application cross platform, you need to support many screens, and many times you come to have complicate logic for calculating the scale percentage of your components, which is their size.
Determine your size and layout yourself.
now the bottom menu could be layout at 20 pixels from the bottom. Also it doesn't matter if you place this logic inside the bottom menu or it's parent.
But this not always the case, sometimes you want to layout the parent based on his children. A common example if one of the children is the parent background. In this case you should:
Add the background.
Determinate background size and layout it.
Now you can layout the parent.
But what if I got both of the cases? If one of parent children is background and the other is bottom menu? What if the bottom menu got his own background and other children that need to be layouted base on the parent?
What solution can be used so I will not get lost inside all of this, and can Gazman SDK help here?
What you need is to create layout dependencies between all the components. Each Sprite should have an event that tells us when its layouting is complete.
Now if you have some layouting logic inside the parent that cannot start until its background child is complete layouting, you should create a dependency between the background and the parent. The parent should listen to LayoutComplete event from the background and then he can layout himself, and when he complete layouting he can dispatch LayoutComplete event, and now its child bottom menu can layout himself.
You can implement it yourself or use Gazman-SDK that do exactly that. If you choose Gazman-SDK your code will look like this:
public class ParentClass extends Group
{
private var background:Background = new Background();
private var bottomMenu:BottomMenu = new BottomMenu();
override protected function initialize():void
{
// check if not already added to stage
if(!background.parent){
addChild(background);
addChild(bottomMenu);
}
// Create dependency for background. If background have not
// been initialized yet the subscription will succeed
// And this.initialize() will be called again once
// background initialize is complete
if (subscribeForInitilize(background)){
return;
}
// do layouting logic here
}
}
public class BottomMenu extends Group
{
override protected function initialize():void
{
// Create dependency for parent. If parent have not
// been initialized yet the subscription will succeed
// And this.initialize() will be called again once
// parent initialize is complete
if (subscribeForInitilize(parent as Group)){
return;
}
// do layouting logic here
}
}
I am new to flex and i am trying to create a title window with no padding whatsoever on the sides. In the adobe documentation http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/containers/TitleWindow.html it says that the title window has a 4px padding. I was wondering if i could get rid of it by overriding the updateDisplayList function and set the padding to 0 (I have been trying this but I cant seem to find the right attribute to set). Basically what i want to do is to have a button on the bottom left corner of the title window and the edge of the button should be 0px from the border of the window.
PS: I only need to do this for title window. There is probably another way of doing it with a Panel or some other component which im not interested in.
The link to the TitleWindow docs has a styles section. It has styles for paddingTop, paddingBottom, paddingLeft, and paddingRight.
CSS styles are set a little differently in Actionscript versus MXML. Since css styles are not properties of the object, you have to use the setStyle() method in Actionscript. You can also use a style sheet.
MXML:
<mx:TitleWindow paddingLeft="0" paddingRight="0" />
Actionscript:
var tw:TitleWindow = new TitleWindow();
tw.setStyle("paddingLeft", 0);
tw.setStyle("paddingRight", 0);
How do I overlay widgets in Qt?
I want to create some widgets and place them out-of-layout, but rather tweak their size and position when some other widget's geometry is changed.
Something like the buttons on the screenshot:
You just need to create your QPushButton (or any QWidget), indicate its parent QWidget and then display it.
Don't add it to the parent layout else you will not be able to move it as you want.
Don't forget to indicate its parent else it will be displayed as independant QWidget.
In these conditions your QPushButton will be considered as child of the QWidget but not member of the parent's layout. So it will be a "floating" child and you must manage it's behaviour when resizing parent's QWidget.
If you want a unified behaviour for all overlay buttons, you should subclass QLayout and redefine members bahaviour.
If they're child of a widget without a layout, you should be able to move them around as you please, I think.
I needed a widget like this for a project I'm working on, so I took Patrice advice and wrote this code (Python) PyQt4 Widget Overlay