As the title suggests, is there any way to bottom-left align components?
An <HBox .../> nested in a <Canvas .../> doesn't work because the elements in the HBox are top-aligned instead of bottom aligned.
For example, I'd like my components to be aligned like this:
+-------------+ <-- container
| components |
| | V |
| V +--+ |
| +-+ | | |
| +-+ +--+ |
+-------------+
You just need to set the verticalAlign and horizontalAlign styles on the hbox ie:
<mx:Canvas>
<mx:HBox verticalAlign="bottom" horizontalAlign="left" left="0" bottom="0"> </mx:HBox>
</mx:Canvas>
Extend the HBox and/or Box to change the positioning. I suspect you'll probably have to override the updateDisplayList method to change the way components are positioned. Probably instead of setting the y value as "0" you'll want to set it to unscaledHeight-component.width.
Related
I have a situation like this:
+------------------------------------------------------------------------------+
| |
| +---------------------------------------------------+ |
| | | |
| <- fixed width -> | <- flexible width -> | |
| | | |
| +---------------------------------------------------+ |
| |
| <- flexible width -> |
| |
+------------------------------------------------------------------------------+
What this is supposed to represent is an outer DIV and its child (also a DIV) appearing in the browser. The outer div takes up, say, 90% of the viewable area (width: 90%). If the screen is resized it will resize. It's OK for it to have a minimum width.
The child div is meant to stay a fixed number of pixel from the left of the outer DIV (left: 200px).
I would like it to resize with its parent (i.e. childWidth = (parentWidth - 200) * .9).
Is it possible to do this with CSS / how?
Yes, just add right: 0px to the inner div in addition to left.
(also, try jsfiddle.net instead of ascii ;))
i have for example five divs, that has float:left and they are wrapped inside div, that has display:inline-block and width:auto. So result is one row with 5 divs and that row has width = sum of childs, because width:auto on div, that has display:inline-block results in width to fit content.
Then i have all wrapped inside div, that has width = width of one of that 5 divs and overflow:hidden, so only one of that 5 divs is visible.
But problem is, that 5 divs is not now in row, but is in column, because their parent is wrapped inside div with width = width of one of that 5 divs.
I need animate margin-left on first of that 5 divs, so the next div becomes visible. But when that divs are in column and not in row, the look and feel while animating is not what i want.
So how make something like this:
------1-------
| -----------|---------2----------
| | ----3--- | -----3-- --3----- |
| | | | | | | | | |
| | | | | | | | | |
| | -------- | -------- -------- |
| | | |
| -----------|--------------------
--------------
Only 1 must be visible.
1 has width = width of 3 and overflow: hidden, so only first of 3 is visible.
2 has display:inline-block and width:auto, so its width fit content.
3 has float left or display:inline-block.
Problem is when i wrap 2 into 1, then width of 2 is not to fit conent, but is width of 1 and becomes column and not row.
<div-1 style="overflow:hidden;width:64px;height:64px">
<div-2 style="display:inline-block;width:auto">
<div-3 style="width:64px;height:64px;float:left"></div>
<div-3 style="width:64px;height:64px;float:left"></div>
<div-3 style="width:64px;height:64px;float:left"></div>
</div>
</div>
Div-2 is row, but when i wrap it inside div-1, it becomes column and that is what is unexpected.
Sorry for my english.
First you should add clearfix to the div2 if you are floating its contents.
You could calculate the width with
var width = $('.div2').innerHeight();
$('.div2').css('width', width);
Here an example, set the .div1 { overflow: visible} to see the result:
http://jsfiddle.net/karameloso/Apz7B/
Have a look at the carouFredSel jQuery plugin, it automatically resizes the slider on the fly to fit the new slide's content.
Before I tackled this myself, I thought I pick the minds of the SO community.
Let's assume I have an Image that's used a button. By default, the image has no border around it. Clicking on this Image will cause another component be displayed beneath it or next to it. When the second component is displayed, I want to draw a joined border around the Image and the second component.
The second component would not be visible by default. It would only be visible after clicking on the Image by using the popupManager, PopUpAnchor, setting the visible property, etc.
Example before clicking:
+--------------------------------+
| |
| XXX <-- My Image |
| XXX |
| |
| |
| |
| |
| |
| |
| |
+--------------------------------+
Example after clicking:
+--------------------------------+
| +---+ |
| |XXX| <-- My Image |
| |XXX|_______________ |
| | | |
| | My Second | |
| | Component | |
| | | |
| | | |
| +-------------------+ |
| |
+--------------------------------+
How difficult would it be to create something like this?
If you are using flex4 / spark, then you should consider skinning (anyway, the borderSides style is available only in Halo).
here is a small sample to achieve the behavior shown at the images:
It uses a custom component with two states (collapsed and expanded).
The text is only attached in the expanded state, and so are the border skins.
For this you'll need two skin classes that will be applied to the image- and to the text component's parent.
The Application:
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:my="*">
<s:VGroup width="100%" height="100%" paddingLeft="20" paddingTop="20">
<my:ExpandableImage id="component" width="300" />
<s:Button label="{component.currentState}" click="component.changeState(event);" />
</s:VGroup>
</s:WindowedApplication>
ExpandableImage.mxml //the custom component with two states
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
verticalScrollPolicy="off" horizontalScrollPolicy="off"
verticalGap="0" width="100%"
currentState="collapsedState">
<fx:Script>
<![CDATA[
public function changeState(event:MouseEvent):void
{
if (currentState == 'collapsedState')
currentState = 'expandedState';
else
currentState = 'collapsedState';
}
]]>
</fx:Script>
<mx:VBox id="imgHolder" borderSkin="MyImageSkin"
width="50" height="50" includeIn="collapsedState, expandedState" cornerRadius="5"
backgroundAlpha="1" borderAlpha="0" backgroundColor="#FFFFFF" borderColor="#000000">
<mx:Image id="img" source="{IMyConstants.MYLOGO}"
width="48" height="48"
mouseEnabled="true" click="changeState(event)" />
</mx:VBox>
<mx:VBox id="txtHolder" borderSkin="MyDetailsSkin"
width="100%" height="100%" includeIn="expandedState" cornerRadius="5"
backgroundAlpha="1" borderAlpha=".5" backgroundColor="#FFFFFF" borderColor="#000000">
<mx:Text id="txt" text="{IMyConstants.LOREMIPSUM}"
width="100%" />
</mx:VBox>
<mx:states>
<s:State name="collapsedState" />
<s:State name="expandedState" />
</mx:states>
<mx:transitions>
<mx:Transition fromState="collapsedState" toState="expandedState">
<s:Parallel duration="500">
<mx:Resize target="{this}" />
<mx:SetStyleAction target="{imgHolder}"
name="borderAlpha" value=".5" />
</s:Parallel>
</mx:Transition>
<mx:Transition fromState="expandedState" toState="collapsedState">
<s:Parallel duration="500">
<mx:Resize target="{this}" />
<mx:SetStyleAction target="{imgHolder}"
name="borderAlpha" value="0" />
</s:Parallel>
</mx:Transition>
</mx:transitions>
</mx:VBox>
MyImageSkin.as //the skin to be applied on the image component's parent
public class MyImageSkin extends RectangularBorder
{
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
var cornerRadius:Number = getStyle("cornerRadius");
var borderColor:int = getStyle("borderColor");
var borderAlpha:Number = getStyle("borderAlpha");
var backgroundColor:int = getStyle("backgroundColor");
var backgroundAlpha:Number = getStyle("backgroundAlpha");
graphics.clear();
//border
drawRoundRect(0, 0, unscaledWidth, unscaledHeight,
{tl: cornerRadius, tr:cornerRadius, bl: 0, br: 0},
borderColor, borderAlpha);
//content
drawRoundRect(1, 1, unscaledWidth-2, unscaledHeight-1,
{tl: cornerRadius, tr:cornerRadius, bl: 0, br: 0},
backgroundColor, backgroundAlpha);
}
}
MyDetailsSkin.as //the skin to be applied on the text's parent
public class MyDetailsSkin extends RectangularBorder
{
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
var cornerRadius:Number = getStyle("cornerRadius");
var borderColor:int = getStyle("borderColor");
var borderAlpha:Number = getStyle("borderAlpha");
var backgroundColor:int = getStyle("backgroundColor");
var backgroundAlpha:Number = getStyle("backgroundAlpha");
graphics.clear();
//border
drawRoundRect(0, 0, unscaledWidth, unscaledHeight,
{tl: 0, tr:cornerRadius, bl: cornerRadius, br: cornerRadius},
borderColor, borderAlpha);
//content
drawRoundRect(1, 1, unscaledWidth-2, unscaledHeight-2,
{tl: 0, tr:cornerRadius, bl: cornerRadius, br: cornerRadius},
backgroundColor, backgroundAlpha);
//clear separator
drawRoundRect(1, 0, 49, 1, {tl: 0, tr:1, bl: 1, br: 1}, backgroundColor, 1);
}
}
i really hope this helps
Pretty sure you can do this with styles
Add a third container i marked with ****
turn the top and right borders off on my new container(***)
turn the bottom border off on your image container
turn the top border off on your second component
+--------------------------------+
| +---+**************** |
| |XXX| <-- My Image * |
| |XXX|_______________* |
| | | |
| | My Second | |
| | Component | |
| | | |
| | | |
| +-------------------+ |
| |
+--------------------------------+
All I'm trying to do is place a button inside of a panel, rotate that button (so it is vertical) and place it on the edge of the panel. I can;t seem to do this correctly. Here is my code:
<mx:Panel id="weekList" width="260" height="100%" x="-500" title="Weeks" >
<mx:List id="weekButtonList" width="260" borderVisible="false" contentBackgroundAlpha="0" dataProvider="{_data.mappoints.week.#number}" itemClick="onWeekClick(event);" >
<mx:itemRenderer>
<mx:Component>
<mx:Button buttonMode="true" right="20" width="260" height="50" label="Week {data}" />
</mx:Component>
</mx:itemRenderer>
</mx:List>
<mx:HBox id="closeButtonHolder" rotation="90" width="100" >
<mx:Button label="OPEN" click="weekListToggle()" />
</mx:HBox>
</mx:Panel>
If you look at the part of the script you will see I am trying to rotate it and move it to the left. I am just trying to move it somewhere, and nothing is working. Also, the text seems to dissapear when I rotate it on a 90% axis. Anyone know what I can do for this?
Use mx:Canvas and set its width to 100%, like so:
<mx:Canvas width="100%">
<mx:Button buttonMode="true" right="20" width="260" height="50" label="Week {data}" />
</mx:Canvas>
InvertedSpear has answered the other part of your question, so I won't repeat that.
In order to rotate text you have to embed the font. I'll play around and see if I can get you a more complete answer for your other issue.
OK, here are some of your problems.
1) The x of your panel is -500 so it is WAY off the screen, maybe you need that for some reason but in my test it just pushed out of view.
2) rotation requires embedding fonts
3) when you rotate any UI component within another the default pivot is on the upper left hand corner, so when the button rotates, it actually rotates out of view. This is not easy to understand when you read it so here's a visual, consider the upper left hand corner of the container as 0,0 in XY coordinates:
normal hbox/button layout:
0,0_________________________________
| ________________________________ |
| | | | <-container outside
| | UI component | |
| |______________________________| |
|__________________________________|
rotated layout:
___________0,0__________________________
| | |
| UI | container |
| component| |
| | |
| |___________________________|
| |
| |
| |
| |
|__________|
See how the button has rotated outside of the visible area (in your case it is no longer on the panel) Solution would be to use a canvas or something that will allow you to pull the HBox away from the edge of the panel.
I am new to CSS designing and not aware of most of the properties of CSS. I am creating a layout for a web page. I am using div in my layout.
My structure is somewhat like this
<div id="content1_bg">
<div>
<div class="content1_title_img_div"></div>
<div class="content1_title_txt_div"></div>
<div class="content1_dvider_div"></div>
<div class="content1_content_div"></div>
</div>
<div></div>
<div></div>
</div>
For this my CSS is
#content1_bg div{width:250px;height:220px;float:left;border:3px solid blue; margin:20px;}
.content1_title_img_div{width:50px;height:100px;}
.content1_title_txt_div{width:150px;height:100px;}
.content1_dvider_div{width:100%;height:10%;clear:both;}
.content1_content_div{width:100%;height:50%;clear:both;}
For this layout i was expecting my design to be like
----------------
|BOX1 BOX2 |
----------------
| BOX 3 |
----------------
| BOX 4 |
----------------
But on using my css layout is somewhat like this
--------------------
| | | | |
|BOX1| | BOX2| |
| | | | |
--------------------
| |
|BOX3|
| |
--------------------
| |
|BOX4|
| |
Basically i want my inner div's not to inherit the properties of outer div. How can i remove this inheritance relationship between parent div and child div
You have to override the properties in the child.
#content1_bg div
means that all the divs coming inside an element with id #content1_bg will have the said properties.
If you need to apply these properties only to a selected set of divs then you can assign a class to the selected divs and change your css definition as '#content1_bg div.some_class'.
Then assign the class some_class to the selected divs