Defining a component width using CSS

Hi,
I am using CSS to completely define the layout of my applications. I was able to remove all layout coding from the MXML/AS files (which is great!!), except one minor thing - which, unfortunately, is very important -: component size (width and height).
I can define positioning and "some" sizing using constraint layout (left="10", right="10"). But there are some cases where I need to explicitely say: "I want this component 10 pixels far from the right border, and I want it to have 100 pixels of width, no matter what happens with it's container size". In those cases I am forced to put "skinning" code in the middle of my MXML, which sucks.
Isn't there an easy way to set component dimensions using CSS? I find this a major problem with skinning applications using CSS. Or is there another proposed solution?
Thanks,
João Saleiro

I normally post my ER's & bugs in Jira. I just wanted to make sure that there weren't other solutions before filling an ER.
Thank you.
For other people looking for this subject, my ER can be found here: https://bugs.adobe.com/jira/browse/SDK-21805

Similar Messages

Setting column widths using CSS...

Hi guys,
I am using a simple 2 column table to layout pictures and
text. The problem I'm having is that I'm not sure how to set the
column widths and as such when you flick from page to page the
column widths and don't stay exactly equal to each other as I'd
like them too.
This can clearly be seen through clicking and comparing the
following two pages.
http://www.fyrne.com/mb_food_and_drink.html
http://www.fyrne.com/mb_television.html
Any advice on how I can resolve this would be much
appreciated.
Cheers, J

Hi James,
I see the scrollbars now but now I also see what you mean :(
I think the easy fix is to create a class and apply it to
every single
td that has the text/image/heading to give them a fixed
width! (Maybe
only applying it to the top td's would do the trick... I'm
really no
good with tables)
Hope it made some sense
JamesFryer skrev:
> Hi Kim,
>
> Thanks for posting this link. I think it was Nadia who
previously suggested I
> implement the suggest edcode line to auto add the
vertical scroll bar and avoid
> an overall site shift problem I was having.
>
> However I have now implemented this and am still getting
the shift problem -
> you will notice it is not the overall site (ie the
bordered area) which is
> shifting but the internal table columns. I believe I
have set these column
> widths in DW design view but this often proves
problematic (pushing out the
> width of the main table for no reason although this does
not actually show when
> previewed).
>
> As such I hoped I would be able to control this through
CSS - I don't believe
> it's the same as the shifting problem...
>
> Thanks again, J
>
Kim
http://www.geekministry.com

Automatically Sizing Table Cell Width Using CSS

How can I get my CSS sheet to automatically size the width of
the table cells where text is located?
Example
Page

quote:
Originally posted by:
Newsgroup User
That's how table cells work with no prompting from you, if
they have no
width assigned at all.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"rmiman" <[email protected]> wrote in
message
news:ev0h1o$a4j$[email protected]..
> How can I get my CSS sheet to automatically size the
width of the table
> cells where text is located?
>
>
http://www.rminc.com/test_examples/test3.html
I know but let's say I want to have a table with a width of
600px and 5 columns, 2 of those colums have content and the other 3
don't. I want those 2 columns with content to automatically size
themselves but since my table has a width of 600px it won't
work.

Input widths - use CSS or size property?

Hi,
what's the best way to add width to form input?
Should i do it by creating class and applying it to the input
or should i just set in the actual HTML via the SIZE attribute
I see didn't methods used throughout the web

I'd take option 1.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"baxxy2000" <[email protected]> wrote in
message
news:ehj0u9$ea5$[email protected]..
> Ok,
> Murray you always seem to be the one to answer my dumb
questions, and i'm
> glad
> you still have the patience.
>
> Now just to clarify, which option is best
>
> 1) Put all global styling on the base input ( i.e
border, background
> color,
> width)
> and then add a seperate class to checkboxes and radio
buttons so that they
> don't inherit that formatting.
>
> 2 )Give every input a unique class
>
> 3 ) A better option?
>
>

Setting the preferred width or height of a ListView using css ?

Is it possible to set the preferred width and height of a Node (a ListView) using css ?
Just in case I tried with:
.my-list {
-fx-pref-width: 130;
-fx-pref-height: 100;
but it does not seem to work.

Not that I know of. Searching for "prefWidth" in the CSS documentation yields no results. JavaFX layout is typically not managed by CSS, but by FXML and/or Java. You can set the prefHeight and prefWidth as attributes in the FXML file:
<ListView fx:id="..." prefWidth="130" prefHeight="100" ... />or in Java:
ListView<String> listView = new ListView<String>();
listView.setPrefWidth(130);
listView.setPrefHeight(100);

JTable - getting component width

Hello
I've come across a small problem I can't overcome as I'm new with Swing.
I would like to set the initial sizes of JTable column headers using a values from array that indicate the percentage size of JTable container for every header e.i.:
int[] columnsWidth = new int[]{20,70,5,5};   //4 columns //20%,70%,5%,5% of   JTable width
//in MyTable constructor
                TableColumn column = null;
          for(int i =0; i<dm.getColumnCount();i++){
               column = getColumnModel().getColumn(i);
                  double width = (columnsWidth/100.0)* getWidth();
               column.setPreferredWidth((int)width);
unfortunately JComponent:getWidth() returns 0, probably because its in JTable constructor, but where can i get correct component width ?
Thanks for your help!

I have some code that does something close; but I don't think it's completely what you want.
First, in our table model, we define some widths:
private final static int[] widths = { 10, 20, 20, 10};Then, in our table class, we for each of these columns. We essentially take the width of 10, multiple by some value, and use that value. I was tryign to be able to specify widths in characters, assuming a fixed width font.
    private void setPreferredColumnWidths() {
        for (int i = 0; i < getColumnCount(); i++) {
            TableColumn col = getColumnModel().getColumn(i);
            int w = getColumnWidth(i);
            col.setPreferredWidth(w);
            col.setWidth(w);
    }We disable the resize on the table columns, as we want fixed width columns within a scrollable pane. However, if you enable auto sizing:
setAutoResizeMode(JTable.AUTO_RESIZE_ALL_COLUMNS);You'll find that the EXTRA space is alloted relative on the preferred size of those columns. It doesn't result in the exact % width you are looking for, so I don't know if that's close enough for you.

How do I scale a lot of images using CSS in HTML5 and CSS3

I have a CSS image gallery that displays a larger photo with descriptive text below it, when a thumbnail image is hovered on.
Each photo has code like that following:
<a class="thumbnail" >
<img src="thumbs1/paradethumbs/DSC_0073.jpg" alt="thumbnail picture" />
<span><img src="pics1/paradepics/DSC_0073.jpg" alt=" " /><br /> 19 - a black faced sheep.</span>
</a>
The first source is a thumbnail, image stored at a size of 72 by 48.
The second source is an image stored at 600 x 400.
When the thunbnail is hovered on, the larger photo is displayed at its full size using css.
There are 20 or so thumbnails in this gallery, and different numbers in other galleries that use the same code.
The example above is number 19 from 20.
This works fine on tablets and larger displays.
When I wish to show it on an Iphone or similar, with a display that is 480 or less wide, I need to scale the larger photo down to 300 wide.
As the Iphone will have a lower quality of image than a larger display, it will not matter too much if the 600x400 photo is scaled down, and having tried it by giving it an ID with CSS like
#imagescale{ width:300px; } it looks acceptable. However, as IDs are supposed to be unique, then thats a no go area for the remaining photos.
My problem is how do I select the second image source shown in bold above, and scale it and the span text by 50%.
The text is not too important as it can be changed to fit - the image is the main problem.
I need someting like "if the display is less than 600 and the image is in the pics directory, display it at 300 wide".
The browser will hopefully take care of the height.
Any suggestiosn would be appreciated.
Howard Walker

Thanks Nancy. The general idea and the link to the article helped a lot.
However, the css using using a percentage had unpredictable results when selecting repeated images.
The first one scales to 50% and then the next scales to 50% of the last one (25%) and so on ad infinitum, unless you click on another object that is not an image.
Using a pixel size like 280px rather than a percentage did the trick, but it also involved changing lots of other items before I could get everything to fit.
Now I have a better knowledge of media queries and how to set them up.
Best of all, all my image galleries work fine just using css and html. Never thought that would happen.
Take five stars!
And the same to David Powers for his great article.
Howard Walker

Use css file in oracle 10g report builder

hi every one
i am using oracle 10g report buidler. i want control paramform by usign css file.
any body have idea how can i use css file in oracle report builder 10g and how can i modify it's path and i how can i manage any css class on a perticular field.

Thanks Billy.
Yes you are right.
Here why I discarded that option is,
I may get the source files with changing layouts.
My Actual scenario is as follows.
Initially we developped all the things using PL/SQL packages. Its working fine.
But as per the inputs we received from requirements group, the file structure changes dynamically. and we would able to consider those new columns also. We should be able to changes the rules dynamically.
Lets say, we doing fullouter join on Src_A and Src_B. on columns col1_A and col1_B.
Now the requirement changes in a way that, the join should be done on Src_A and Src_C. on columns col1_A and col_C.
For this I need to define a new package.
Instead of that, I would like to do everything dynamically based on configuration parameters given as input.
Thank you,
Regards,
Gowtham Sen

Problem regarding the creation of Table using CSS.

Hi ,
Here I have a Problem regarding the creation of Table using CSS.
In My Application i have a table with multiple rows(Rows are Dynamically added to the table).First i am setting the table with the following properties:
width:900px;
height : auto,
Overflow : visible,
Max-height: : 200px.
If I use above properties,I'm getting a table with 5 or 6 rows(height upto 200px).After that i am getting the Vertical ScrollBar.
The problem is when a table has many columns, Vertical and Horizontal Scrolls are coming at the time of setting the table. The table height is not Increasing dynamically.
How can i use "height" property in CSS? (I want the table height to be increased when the columns are more.)
Thanks & Regards
Madhavi

Hey humble user. Errr I'm trying to understand what ur trying to do. U want to create a section of a region destructively from an existing region right? If so select the option convert to new region (opt-comm-R or selecting it by right clicking). Check your audio bin to make sure. Whats the "merge" function? Are u refering to the glue tool?

Type '[component name]' in CSS selector '[component name]' must be qualified with a namespace

I've recently upgraded my SDK to allow me encorporate other features such as the Text Layout Framework and such. To avoid issues i've had to make Flash player 10 as required, which is where the problems are occuring in my main project.
We knew the switch would cause some issues, and we now have a lovely batch of 100+ Warnings, that are all along the lines of
Type '[component name]' in CSS selector '[component name]' must be qualified with a namespace
all the warnings are on line locations that have no reference to the component they are talking about.. so i'm kinda stumped on what to do. Anybody else run into this issue before?
cheers

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/halo" >
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";
Button
    // The warning
</fx:Style>
<s:Button label="提交" textAlign="center" height="30"/>
</s:Application>
I think you have use flex4.
Please change the code to :
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/halo" >
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";
s|Button
    // ok. The is style for spark button }
mx|Button
    //ok. The is style for halo button
</fx:Style>
<s:Button label="提交" textAlign="center" height="30"/>
</s:Application>

Displaying linked pages in an area of the screen, using CSS?

Imagine that I have a column on the left of the page that has a list of links to other pages. When you click on any of those links, then to the right the linked page is shown.
I know how to do this with frames, but I'm trying to figure this one out using CSS.
Can anyone point me in the right direction?
Below is a code sample that if your save and then view in a browser will show you (hopefully) what I am trying to achieve.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Test site</title>
<style type="text/css">

div.header {
height:4em;
width:auto;
border:0;
padding:0;
text-align:center;
background-color:#6CF;
div.sidebar {
width: 15em;
float:left;
text-align: left;
border-bottom:0px;
padding-top: 1em;
padding-right: 1em;
padding-bottom: 1em;
padding-left: 0em;
    background-color:#390
div.footer {
width:auto;
border:0;
padding:0;
text-align:center;
background-color:#6CF
-->
</style>
</head>
<body>
<div class="header">
   header goes here
</div>
<div class="sidebar">

   Link to page 1<br />
   Link to page 2<br />
   Link to page 3<br />
   etc...<br />
</div>

This is the area where the pages linked to should be displayed.<br />
So, if you click on the "Link to page 1" link, to the left, the contents of page 1 will be shown here.<br />
If you click on the link to the left that says "Link to page 2" then the contents of page 2 will be shown here, etc.<br clear="left" />
<div class="footer">
footer goes here
</div>
</body>
</html>

Thank you Nancy! Your solution is (I believe) 99% of the way to being exactly what I want.
The code fragment below:
<div class="sidebar">

   <a href="../Test/About.html" target="Frame1"> About</a><p>
   <a href="../Test/FAQ.html" target="Frame1"> FAQ</a><p>
   <a href="../Test/Contact.html" target="Frame1"> Contact us</a><p>
</div>
<iframe name="Frame1" id="Frame1" src="../Test/About.html" height="auto" width="auto" allowtransparency="true" border="0" margin="0" scrolling="auto" > </iframe>
but I want the window that contains the 'imported' code to expand to be the same height as the sidebar and wide enough to stretch to the rightmost side of the visible screen.
I was guessing that
height="auto" width="auto"
would have done the trick, but it would seem not. Any ideas?

Is a user defined for component AF - error ?

Hi All,
In my RWD > Component Monitoring - I have an alert showing up on the Adapter Engine, for the Self-Test Status. The error is on "Is a user defined for component AF?"
Any ideas how to resolve this ??
Thanks
Shane

If this is in "Is a user defined for component AF" in red click on the details next to it ...it will show up what the problem is...
Usually XI uses XIAFUSER to connect to AF....Check whether these user is specified in exchange profile and then also check whether this existing and not locked...
Hope this helps...
Regards,
Ravi.
PS. Please post the solution once you solve your problem, so that it helps others and also close the question.

No monitors pulled for self defined logical component

Hi,
I have defined a system landscape in smsy and created solution landscapes in the sm. For some systems I had to create a new logical component.
My problem: Although RFC destinations work fine, for all systems within the new logical component no monitors are pulled out of rz20.
If I use a SAP-defined logical component it works.
I use Solution Manager 3.2.
Is there any documentation for this problem or does anybody know a solution for this?
Thank you and best regards,
Tim

Hi again,
I thought about the problem and tried several things. The problem is not the self defined logical component. The problem is the product definition. I can`t monitor systems, which I created as product SAP ERP in smsy. The check "SAP System ..." doesn`t appear when I want to setup System Monitoring.
Does anybody have an idea what I do wrong?
Regards,
Tim

Resizing image using CSS - not working in IE

Hello,
I have a standard report with couple of columns one of which a image column. The images are of varying sizes and I manged to resize them to a fixed width & height by using CSS code in page header as below:
td[headers="ITEM_PICTURE"] img {
display: block;
width: 70px;
border: 1px solid #999;
padding: 4px;
background: #f6f6f6;
}The CSS does the trick in Chrome & Firefox but does not work in internet explorer. Is there a way to make this CSS code IE friendly?
Cheers for help.

William Wallace wrote:
I am using Apex 4.2.1 (had this issue in 4.1.1 as well) and using theme 10.Ah, the Sludge Sand theme. In 4.x that's a legacy theme only really included to allow applications to run on IE6. It's therefore intended to run in quirks mode, meaning in Internet Explorer terms there's no support for anything that didn't work in IE6 (for certain values of "work"). This means no CSS3, no support for a lot of useful CSS2.1 stuff (like attribute selectors), and probably problems with jQuery which requires standards mode. Adding a DOCTYPE to the page templates to trigger standards mode Interactive Report: how can I display carriage returns?. In 4.2 you really should switch to one of the latest Standard themes, or at least one of the standards mode Legacy themes (those not marked with a "*").
If you must use theme 10, and there are no other images in this report (like edit icons) then you could add a static ID to the region and use a more basic selector like:
#static-id td.t10data img {
display: block;
width: 70px;
border: 1px solid #999;
padding: 4px;
background: #f6f6f6;
}However, it appears that one of IE's quirkier quirks mode quirks is that CSS padding is not supported on images, so the presentation you want is not possible using theme 10 in IE and CSS alone.
Switching to a modern theme is recommended.
Edited by: fac586 on 02-Mar-2013 10:31

Buttons using CSS not working properly

I am using Dreamweaver CS4.
I can't get buttons to work properly using CSS.
The buttons are supposed to have a red border around them when inactive (a:link).
Hovering over the button causes it to change its appearence (this works).
Clicking the button works.
Do this then click the BACK arrow.
Buttons no longer have red border.
I have tried this with FireFox, IE 7, IE 6 and Safari. They all do the same thing.
You may see it in action at www.justforso.net/buttons.htm
What am I doing wrong???
     ..... Thanks for your help
Here is the code:
/* CSS Document */
Theme Name: Buttons Test
     margin: 0;
     padding: 0;
body {
     font: 80%/1.6 Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
     color: black;
a.example1:link
   font-size:14px;
   font-weight:bold;
   text-decoration:none;
   border-style:outset;
   border-color:red;
   border-width:5px;
   background-color: #FFFFCE;
   width:125px;
   color:navy;
a.example1:hover
   font-size:14px;
   font-weight:bold;
   text-decoration:none;
   border-style:inset;
   border-color:red;
   border-width:5px;
   background-color: #FFFFCE;
   width:125px;
   color:maroon;
/* CSS Document */
/* HTML Document */
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Buttons Test</title>
<link rel="stylesheet" href="buttons.css" type="text/css" media="screen" />
</head>
<body>
<p> </p>
<p> </p>
<A href="http://www.sitepoint.com/" class="example1"> Beginners </A>
<A href="http://www.sitepoint.com/" class="example1"> Promotion </A>
<A href="http://www.sitepoint.com/" class="example1"> Site Point </A>
</body>
</html>
/* HTML Document */

It's because you have created styles only for the :link and :hover pseudo-classes. Your buttons revert to the default state when the link is active (being clicked) or has been visited. You need to assign properties to the :visited and :active pseudo-classes as well.
Another point about your CSS is that you're failing to make use of the cascade. There's no need to repeat values that don't change. I have rewritten your CSS like this:
a.example1
   font-size:14px;
   font-weight:bold;
   text-decoration:none;
   border-width:5px;
   border-color:red;
   background-color: #FFFFCE;
   width:125px;
   color:navy;
a.example1:link, a.example1:visited {
     border-style:outset;
a.example1:hover, a.example1:active
   border-style:inset;
   color:maroon;
This applies common rules to the basic a.example1 selector, and sets the overrides for the pseudo-classes.
One other point. You're using an XHTML DOCTYPE. All tag names MUST be in lowercase to be valid. This is wrong:
<A href="http://www.sitepoint.com/" class="example1"> Beginners </A>
The opening and closing <a> tags should be in lowercase.

Defining a component width using CSS

Similar Messages

Maybe you are looking for