I have a TitleWindow of dimensions 600 X 400. There are a bunch of VBoxes thrown in here that I want to occupy around 80% of the width of the title window in which they are contained.
But they don't seem to register the percent-width property. This is what one of the VBoxes looks like
<mx:VBox styleName="vboxes">
.vboxes
{
cornerRadius:4;
border-style:solid;
percent-width:80;
padding-left:5px;
padding-right:5px;
padding-bottom:5px;
padding-top:5px;
}
The other CSS properties such as border-style and corner-radius seem to register just fine but the percent-width property fails. As a side not, even the width style property fails in this case.
Does anybody know what's wrong here?
Bad news, width/height, percentWidth/percentHeight are not CSS attributes but properties in Flex 3.
Good news, Flex supports custom CSS, which means you can define your own style. This means you would need to override the styleChanged method of your VBox, for example:
override public function styleChanged(styleProp:String):void
{
super.styleChanged(styleProp);
if (styleProp == "percentWidth")
{
var val:Number = getStyle("percentWidth") as Number;
//set percent width logic goes here
}
}
Not every Flex property is available through CSS. In fact, I would say more are not than are. You cannot set dimensions of components via CSS for any component as far as I am aware. You are also using incorrect property names for the ones that are valid.
Please see the Adobe LiveDocs documentation of VBox styles here.
Related
I am looking for the next scenario in css where i will be able to check if a style is applied without using any javascript code. Example: If flex: wrap is applied add another style like gap: 5. All this computations should be done using only css. I inspected the documentation but i did not find something similar. Could somebody help?
You can directly use the "gap" css. If there is a flex property used, only then the gap property will work. So no harm in using the gap property by default. Why check for whether flex is used or not.
as far as I understand, to check a style is applied, it must use javascript code,
ex:
const box = document.getElementById('box');
// Check if CSS property is contained in Style
if (box.style.backgroundColor) {
console.log('value is', box.style.backgroundColor);
} else {
console.log('CSS property is not contained in style');
}
My code:
myTextItem = new TextItem();
myTextItem.setHint("Some text");
myTextItem.setShowHintInField(true);
myTextItem.setHintStyle("myTextItemHint");
My css:
.myTextItemHint {
color: gray;
}
My Problem:
My issue is that I can have that setShowHintInField(true) set OR my css getting applied, but not both.
I found more info about this on the link: http://forums.smartclient.com/showthread.php?t=14463 but I cannot come up with a common style / place for it, that would make the trick while the hint is inside the field.
My question:
What kind of css would I need in this case and how I tell the field to use it?
What I have tried:
With that setShowHintInField(true) line and without. Both cases: half of the solution is there. Not both halves.
FormItem has method setCellStyle() to set the style of specific cell.
Use
myTextItem.setCellStyle("myTextItemHint");
your CSS will look like this:
.myTextItemHint, .myTextItemHint input {
color: gray;
}
Override other properties also if needed
.textItem,.textItemFocused,.textItemDisabled,.textItemDisabledHint,.textItemError,.textItemHint
For more information on CSS, Please have a look at skin_styles.css that is already shipped along with standard skins in SmartGWT.
When using Telerik controls if e.g. I don't specify a width for a textbox, telerik adds the inline attribute
style="width: 125px"
Is there a way to stop telerik adding default values like this?
(NOTE: This isn't a default of Removing all CSS from telerik controls, which is asking how to remove default stylesheets rather than inline styles)
Here are some solutions from Telerik:
How to Remove the Default Width of RadInput TextBoxes or Set it with External CSS
I'm not sure, but you could try searching through the stylesheet(s) to find a default width specification for inputs. aside from that, you might be able to override the attribute and set the width using !important.
<telerik:RadTextBox ID="RadTextBox1" runat="server" style="width:200px !important;" ... >
EDIT
Try adding a style like this to your page or stylesheet. This might not be 100%, but it should be close:
.RadInput .RadInput_Sunset { /* replace "_Sunset" with whatever skin you're using */
width: auto;
}
EDIT
If you only need to style one control, try this:
#ClientID_OF_INPUT {
width: auto !important;
}
Here's a my eventual implementation, which works for RadInput and RadComboBox. The function needs adapting for each control as telerik put styles in varying places.
function removeWidths (sender) {
//remove only the width style from the inline style collection
sender._originalTextBoxCssText && (sender._originalTextBoxCssText = sender._originalTextBoxCssText.replace(/(^|[^-])width\s?:\s?[\w|\.]+\s?;/i, "$1"));
sender.updateCssClass && sender.updateCssClass();
if(sender.constructor.__typeName == "Telerik.Web.UI.RadComboBox") {
$(sender._inputDomElement).closest(".RadComboBox").removeAttr("style");
}
},
Had the same issue and I'm not a particular fan of !important overrides or JavaScript solutions.
Digging into RadInputControl I could see that Unit.Pixel(160) is the default Width but only if the RenderMode of the control is not Lightweight, so switching to Lightweight removes the explicit inline width, otherwise if that's not an option for the RadTextbox I found that if you set the Columns property to 0 it only outputs
style="width:;"
This doesn't look valid to me, so I'm guessing that most browsers will ignore this, but I haven't tested it extensively myself.
Using CSS, i can set the corner radius of the top corners of a tab in a tabnavigator:
<mx:Style>
.tabstyle
{
corner-radius: 10;
}
</mx:Style>
<mx:TabNavigator tabStyleName="tabstyle" />
However, I also want the bottom corners to have a radius. Does anyone know how to do that??
Assuming that the items you're putting in the TabNavigator are part of the standard Flex control set, you can have them use a custom programmatic skin that draws their background/border to match your desired look. Luckily, it's relatively easy to make a programmatic skin that grabs style information (like the corner-radius value) and uses that to control how the graphics are drawn -- just poke around the internet, and you're bound to find tutorials on skinning in Flex 3.
The answer by ZackBeNimble worked well, but I actually had the additional requirement that any layout should be easy to change. So what I've done now is set the skin of the tabs to an image that has the corner-radius I want.
<mx:Style>
.tabstyle
{
skin: Embed(source="../images/corner_radius_tabs.png", scaleGridLeft="44", scaleGridRight="45", scaleGridTop="1", scaleGridBottom="2");
padding-left: 44;
padding-right: 44;
}
</mx:Style>
<mx:TabNavigator tabStyleName="tabstyle" />
expanding on the answer from #ZackBeNimble
It might be easier to use degrafa:
skin component:
<degrafa:GraphicBorderSkin xmlns:degrafa="namespaceLovin">
<degrafa:geometry>
<degrafa:GeometryComposition>
<degrafa:RoundedRectangleComplex topLeftRadius="0" topRightRadius="0" bottomLeftRadius="5" bottomRightRadius="5"
height="{skinHeight}"
width="{skinWidth}"
fill="{someFill}" />
</degrafa:geometry>
</degrafa:GraphicBorderSkin>
you'll need a fill. also, skinWidth and height are degrafa internal vars that they added in the beta -- you'll have to override updatedisplaylist if you're using an older version to get the unscaledwidth and unscaledheight.
then in the component you're skinning, set this style: borderSkin="package.class.location"
Might be a bit quicker if you're not familliar with traditional programmatic skinning... i'm more a fan of el degrafa.
You can skin a RadioButton in Flex by setting the following values in CSS:
upSkin: Embed(...);
overSkin: Embed(...);
ownSkin: Embed(...);
disabledSkin: Embed(...);
selectedUpSkin: Embed(...);
selectedOverSkin: Embed(...);
selectedDownSkin: Embed(...);
selectedDisabledSkin: Embed(...);
But, it will still display the little circle icon inside your skin. You can change the icon by setting the following styles:
upIcon: Embed(...);
overIcon: Embed(...);
etc...
My question is, how can I set these icons to nothing? Rather than a 1x1 pixel transparent image or something? How can I give it an empty style?
Edit:
In actionscript I can do it like:
button.setStyle("icon", null);
In CSS I've tried:
icon: none;
icon: null;
But neither worked.
Accepted Answer:
Suggestions one & two both worked, but I prefer the cleaner solution of:
upIcon: ClassReference(null);
Thanks for both answers (wish I could mark both as the answer!)
Try this:
ClassReference(null);
I don't think it's possible to set the skin as null in Flex CSS. In fact, some Flex component must have something set for the skin, and they will throw runtime errors if you use setStyle("skinName", null). I usually use a declaration like this when I want no skin:
RadioButton
{
upIcon: ClassReference("mx.skins.ProgrammaticSkin");
}
The ProgrammaticSkin class displays nothing and implements IFlexDisplayObject (which is often a requirement for skins in Flex), so I think it's the best choice for when you want a blank skin.
If its standard CSS, you can use the following. I'm assuming the styles are classes, if they're IDs replace the . with a #:
.upSkin
{
background: none;
}
The background property can be used to set color, positioning, and repeating; if you need to specifically target just the background image use:
.upSkin
{
background-image: none;
}