Setting height for grid layout cell

hai,
i am creating my own layout for my framework page.i am using grid layout tag presents in htmlb.i want to set height for my grid layout cell using taglib but there is no height attribute as per i know.is there any way for that.....
if anybody knows about it please tell me. if u have an sample code also please send me...
regards,
prasath

Hi,
Try the method setHeightPercentage in both GridLayout and GridLayoutCell classes.
GridLayout result = new GridLayout();
result.setHeightPercentage(100);
Greetings,
Praveen Gudapati
[Points are welcome for helpful answers]

Similar Messages

Border for Grid Layout

Hi Developers,
Does anyone know how to put border around each cell so that a gridlayout can look like a table? I used CSS to add border on the sides but what i exactly want to do is create a border around each cell so that when I run the report, I see a table instead of one big red box.
Thank you for all your help and suggestion!!
Raj

yes, like Mike already said.
Additionally I would put these into a class
myClass.sapUiMlt.zenControl { border: 2px red solid; }
and assign this class to each grid component you want to have the inside borders. otherwise automatically
all your grid cells will show borders.
Jeroen

Setting defaults for Compound Layout View in Answers

Hi All,
I need to change the default views in Answers from Title-Table View into 'Title-PivotView'. I have gone through the guide and created an xml file New.xml with the code,
<?xml version="1.0" encoding="utf-8"?>
<WebMessageTables xmlns:sawm="com.siebel.analytics.web/message/v1">
<WebMessageTable system="Answers" table="ViewDefaults">
<WebMessage name="kuiCriteriaDefaultViewElements" translate="no">
<HTML>
<view signature="compoundView" />
<cv signature="pivotTableView" />
<cv signature="titleView" />
</HTML>
</WebMessage>
</WebMessageTable>
</WebMessageTables>
and I have placed this file under C:\OracleBI\web\msgdb\customMessages and also C:\OracleBI\web\msgdb\l_en.
I restarted the services too,but I cant view the changes.
Am I missing anything !
Any ideas.
Thanks,
Princy
Edited by: user13049743 on Aug 30, 2010 12:07 PM

hi,
yes you have to do that also ,its a documentation bug
The method is given in the bookshelf. But unfortunately it does not work as specified due to a documentation bug. In order to make this work, go to >{OracleBI}\web\msgdb\messages folder and you would find a file called answerstemplates.xml. Copy this file to {OracleBIData}\web\msgdb\customMessages. If >you dont have this folder then create it. Now edit this file and search for kuiCriteriaDefaultViewElements.thanks,
Saichand.v

How do I make a Grid layout?

Here should be an easy question for someone who knows Java, but for a newbee like me, it is difficult.
I'm using a tutorial with Eclipse as my platform. Wherever possible I'm using the visual editor to make my code.
The tutorial calls for Grid layout with 3 rows and 1 column. Eclipse says to right click on the graphic element and use Customize layout. This works, but Customize layout tells me "No layout options to customize on the current selection".
My question is: what do I need to add (manually?), in order to get the Grid layout?
Thanks,
Ilan
import javax.swing.JFrame;
public class FirstAppl extends JFrame {
     public static final long serialVersionUID = 1;     // needed for compiler
     public FirstAppl() {
          super();
          initialize();
      * This method initializes this
     private void initialize() {
        this.setSize(new java.awt.Dimension(171,100));
        this.setDefaultCloseOperation(javax.swing.JFrame.EXIT_ON_CLOSE);
        this.setTitle("First Swing Application");
        this.addWindowListener(new java.awt.event.WindowAdapter() {
             public void windowClosing(java.awt.event.WindowEvent e) {
                  System.exit(0);
      * @param args
     public static void main(String[] args) {
          FirstAppl frame = new FirstAppl();
        frame.show();
} // @jve:decl-index=0:visual-constraint="10,10"

First of all, thanks for the reply, which did indeed help.
I pushed on, trying my best to use the visual editor if possible.
I failed in all attempts to drop the jButtons onto the jFrame.
The only way I could get it to work was to drop the jButtons onto the white area which wasn't being used. Then at least I could add an event via the visual editor, which was good. I don't know if this is possible, but if I could add a "ContentPane", then I could drop the buttons onto it. I see again and again that I need "getContentPane()". Is this possible, or do I have to wait until I know Java better to answer this one?
Thanks,
Ilan
import java.awt.GridLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
public class FirstAppl extends JFrame {
     public static final long serialVersionUID = 1;     // needed for compiler
     private JButton jButtonTop = null; // @jve:decl-index=0:visual-constraint="59,180"
     private JButton jButtonBottom = null; // @jve:decl-index=0:visual-constraint="41,224"
     public FirstAppl() {
          super();
          initialize();
      * This method initializes this
     private void initialize() {
        this.setSize(new java.awt.Dimension(180,131));
        this.getContentPane().setLayout(new GridLayout(3,1));
        this.setDefaultCloseOperation(javax.swing.JFrame.EXIT_ON_CLOSE);
        this.setTitle("First Swing Application");
        this.getContentPane().add(new JLabel("Swing components act like AWT"));
        this.getContentPane().add(getJButtonTop());
        this.getContentPane().add(getJButtonBottom());
        this.addWindowListener(new java.awt.event.WindowAdapter() {
             public void windowClosing(java.awt.event.WindowEvent e) {
                  System.exit(0);
      * This method initializes jButtonTop
      * @return javax.swing.JButton
     private JButton getJButtonTop() {
          if (jButtonTop == null) {
               jButtonTop = new JButton();
               jButtonTop.setText("Top");
               jButtonTop.addActionListener(new java.awt.event.ActionListener() {
                    public void actionPerformed(java.awt.event.ActionEvent e) {
                         System.out.println("top");
          return jButtonTop;
      * This method initializes jButtonBottom
      * @return javax.swing.JButton
     private JButton getJButtonBottom() {
          if (jButtonBottom == null) {
               jButtonBottom = new JButton();
               jButtonBottom.setText("Bottom");
               jButtonBottom.setSize(new java.awt.Dimension(75,26));
               jButtonBottom.addActionListener(new java.awt.event.ActionListener() {
                    public void actionPerformed(java.awt.event.ActionEvent e) {
                         System.out.println("bottom");
          return jButtonBottom;
      * @param args
     public static void main(String[] args) {
          FirstAppl frame = new FirstAppl();
        frame.show();
} // @jve:decl-index=0:visual-constraint="10,10"

How to set the cell size in grid layout where each cell is a panel

Hi,
I am using a grid layout where each cell is a panel. Here I want to
set size of each panel to be equal irrespective of any. But it is not obliging the setSize().
no of row in grid - 4
no of columns - 4
each cell is a panel. each panel has a label.
panel.setSize(parent.getWidth(), parent.getWidth()/4); // not working. Size is adjusting to the length of the label.
I want to force the size of the panel to our preferred size.
Note: In swing we can use JPanel.setPreferredSize(). Unfortunately I cannot use Swing components. Requirement is awt only.
Any help in this is highly appreciated.
Thanks
Kishore

I observed it is same behavior with gridbag layout. Infact it is gridbag layout only with 4 cells, where first cell should be of constant width (it is base for other cell widths) and other cells are variable (some integer*base width of first cell). I want to set the size of first cell width to be constant.
Though it is redundant I once again say that it works perfect with setPreferredSize of JComponent.
But I should not use any swing component/api. This is sytem requirement.
Any help is appreciated.
Thanks
Kishore

The grid layout and different cell sizes

Hi all
is it possible to use a grid layout but specify the height of each cell in the grid
lets say i have a grid 2x5
label1 | TextBox
label2 | ComboBox
label3 | TextBox
label 4 | checkbox1
checkbox2
checkbox3
label 5 | TextBox
the above is how i want it to work but it is appearing like this
label1 | TextBox
label2 | ComboBox
label3 | TextBox
label 4 | checkbox1
checkbox2
checkbox3
label 5 | TextBox
and i assume this is because the grid cell with the checkboxes in is setting the height for all the other cells
so i want to say basically all cells equal say 20 pixels but label 4 and checkbox cells to equal say 50 pixels
can this be done?

is it possible to use a grid layout but specify the
height of each cell in the gridNo. Use GridBagLayout.

How do I get my Fluid Grid Layout page to resizes from portrait to landscape for iPhones?

Starting in portrait on my iPhone 4, the fluid grid layout page does not resize when I turn to landscape. After I refresh / resize to fit the page on landscape and then turn the iPhone to portrait, the page resizes just fine. Everything seems to be working just fine on the desktop, ignoring IE. Could it be my media query tags?
If anyone knows a solution, it would be much appreciated. Thanks.
Here is my test page: http://www.bedroomandmore.com/1_b_fluidGrid.html
Here are my media query tags (the first set of rules does not have the media query tag and becomes the default):
@media only screen and (max-device-width: 480px) and (orientation : landscape) {
@media only screen and (min-width: 481px) {
@media only screen and (min-width: 769px) {
Here is most of my media query CSS:
@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/
img, object, embed, video {
          max-width: 100%;
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
          width:100%;
/* Mobile Layout: 480px and below.(smartphone portrait) */
.gridContainer {
          width: 95.4184%;
          padding-left: 0.5907%;
          padding-right: 0.5907%;
#header {
          clear: both;
          float: left;
          display: block;
          margin-left: 0%;
          width: 72%;
          max-height: 0%;
          display: -moz-box; /* Firefox */
          display: -webkit-box; /* Safari and Chrome */
          display: box;
          border: none;
          top: auto;
          padding-top: 0.25em;
#menuHorizontal {
          clear: both;
          float: left;
          width: 118%;
          height:100%;
          margin-left: auto;
          position:relative;
          top:-1em;
          display: block;
#slides {
          clear: both;
          float: left;
          margin-left: 0.1em;
          width: 119%;
          position: relative;
          top: -1em;
          display: block;
                    /*Slides container: Important: Use position:relative; with top:-1em; together to position div.
                              Set the width of your slides container
                              Set to    display: none     to prevent content flash*/
.slides_container {
          clear: both;
          width: 100%;
          display: block;
                    /*Each slide: Important:
                              Set the width of your slides
                              If height not specified height will be set by the slide content
                              Set to     display: block     for original setting
                              slide_container is container size
                              slides_container div set the size of the image inside--adjust to fit image in it so it is not cropped*/
.slides_container div {
          clear: both;
          width: 69%;
          display: block;
          /* Mobile Layout: 480px. (smartphone landscape)
                              Inherits styles from Mobile Layout 480px.
                              Set to clear:none; to allow div to shift up
                              Or set to clear:both; to take a whole row of the screen*/
@media only screen and (max-device-width: 480px) and (orientation : landscape) {
.gridContainer {
          width: 95.4184%;
          padding-left: 0.7907%;
          padding-right: 0.7907%;
#header {
          clear:both;
          float: left;
          display: block;
          margin-left: auto;
          width:100%;
          display: -moz-box; /* Firefox */
          display: -webkit-box; /* Safari and Chrome */
          display: box;
          border: none;
#menuHorizontal {
          clear:both;
          float: left;
          width: 110%;
          margin-left:auto;
          display: block;
#slides {
          clear:both;
          float: left;
          margin-left: 0%;
          width: 68%;
          display: block;
                    /*Slides container: Important:
                              Set the width of your slides container
                              Set to    display: none     to prevent content flash*/
.slides_container {
          clear:both;
          float: left;
          width: 100%;
          display: block;
                    /*Each slide: Important:
                              Set the width of your slides
                              If height not specified height will be set by the slide content
                              Set to     display: block     for original setting*/
.slides_container div {
          clear:both;
          width:69%;
          display: block;
                    /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout.
                              Set to clear:none; to allow div to shift up
                              Or set to clear:both; to take a whole row of the screen*/
@media only screen and (min-width: 481px) {
.gridContainer {
          width: 95.9456%;
          padding-left: 0.5271%;
          padding-right: 0.5271%;
#header {
          clear:both;
          float: left;
          display: block;
          margin-left: auto;
          width: 100%;
          display: -moz-box; /* Firefox */
          display: -webkit-box; /* Safari and Chrome */
          display: box;
          border: none;
#menuHorizontal {
          clear:both;
          float: left;
          margin-left:auto;
          display: block;
#slides {
          clear:both;
          float: left;
          margin-left: 0%;
          width: 70%;
          display: block;
                    /*Slides container: Important:
                              Set the width of your slides container
                              Set to    display: none     to prevent content flash*/
.slides_container {
          clear:both;
          float: left;
          width: 100%;
          display: block;
                    /*Each slide: Important:
                              Set the width of your slides
                              If height not specified height will be set by the slide content
                              Set to     display: block     for original setting*/
.slides_container div {
          width: 100%;
          display: block;

I found the problem. There is a bug in Safari for iPhone 4. Use code to fix found at http://stackoverflow.com/a/6379407

CSS height property use in Fluid grid layout

Hi, I'm totally new to fluid grid layout and just got started in it. I have a div tag that has 5px height and I sucessfully applied that and seem fine only on Tablet landscape (1024x768) and Small tablet landscape (800x600), nevertheless it isn't even displaying on Mobile portrait (320x480), Mobile landscape (480x320), Small tablet portrait (600x800) and Tablet portrait (768x1024).
My coding is below
index.html
<!doctype html>




<html class="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="fluid.grid.layout/boilerplate.css" rel="stylesheet" type="text/css">
<link href="fluid.grid.layout/style.css" rel="stylesheet" type="text/css">


<script src="fluid.grid.layout/respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1"></div>
</div>
</body>
</html>
boilerplate.css
@charset "utf-8";
* HTML5 ✰ Boilerplate
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
* Detailed information about this CSS: h5bp.com/css
* Dreamweaver modifications:
* 1. Commented out selection highlight
* 2. Removed media queries section (we add our own in a separate file)
* ==|== normalize ==========================================================
/* =============================================================================
   HTML5 display definitions
   ========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
/* =============================================================================
   Base
   ========================================================================== */
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Force vertical scrollbar in non-IE
* 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 13px; line-height: 1.231; }
body, button, input, select, textarea { font-family: sans-serif; color: #222; }
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate
* Also: hot pink! (or customize the background color to match your design)
/* Dreamweaver: uncomment these if you do want to customize the selection highlight
*::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
*::selection { background: #fe57a1; color: #fff; text-shadow: none; }
/* =============================================================================
   Links
   ========================================================================== */
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }
/* =============================================================================
   Typography
   ========================================================================== */
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* =============================================================================
   Lists
   ========================================================================== */
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
/* =============================================================================
   Embedded content
   ========================================================================== */
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/e
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
* Correct overflow not hidden in IE9
svg:not(:root) { overflow: hidden; }
/* =============================================================================
   Figures
   ========================================================================== */
figure { margin: 0; }
/* =============================================================================
   Forms
   ========================================================================== */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }
* 1. Correct color not inheriting in IE6/7/8/9
* 2. Correct alignment displayed oddly in IE6/7
legend { border: 0; *margin-left: -7px; padding: 0; }
* 1. Correct font-size not inheriting in all browsers
* 2. Remove margins in FF3/4 S5 Chrome
* 3. Define consistent vertical alignment display in all browsers
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
* 2. Correct inner spacing displayed oddly in IE6/7
button, input { line-height: normal; *overflow: visible; }
* Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
table button, table input { *overflow: auto; }
* 1. Display hand cursor for clickable form elements
* 2. Allow styling of clickable form elements in iOS
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
* Consistent box sizing and appearance
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
* Remove inner padding and border in FF3/4: h5bp.com/l
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
* 1. Remove default vertical scrollbar in IE6/7/8/9
* 2. Allow only vertical resizing
textarea { overflow: auto; vertical-align: top; resize: vertical; }
/* Colors for form validity */
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
/* =============================================================================
   Tables
   ========================================================================== */
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
/* ==|== primary styles =====================================================
   Author:
   ========================================================================== */
/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */
/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
@media print {
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
style.css
@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/
img, object, embed, video {
          max-width: 100%;
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
          width:100%;
          Dreamweaver Fluid Grid Properties
          dw-num-cols-mobile:                    4;
          dw-num-cols-tablet:                    8;
          dw-num-cols-desktop:          10;
          dw-gutter-percentage:          25;
          Inspiration from "Responsive Web Design" by Ethan Marcotte
          http://www.alistapart.com/articles/responsive-web-design
          and Golden Grid System by Joni Korpi
          http://goldengridsystem.com/
/* Mobile Layout: 480px and below. */
.gridContainer {
          margin-left: auto;
          margin-right: auto;
          width: 85.5%;
          padding-left: 2.25%;
          padding-right: 2.25%;
#LayoutDiv1 {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          height:5px;
          display: block;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
          width: 97.5%;
          padding-left: 1.25%;
          padding-right: 1.25%;
#LayoutDiv1 {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          height:5px;
          display: block;
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
          width: 98%;
          max-width: 1232px;
          padding-left: 1%;
          padding-right: 1%;
          margin: auto;
#LayoutDiv1 {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          display: block;
          height:5px;
          background-color:#FBB829;
respond.min.js
/*! Respond.js v1.0.1pre: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs */
(function(e,h){e.respond={};respond.update=function(){};respond.mediaQueriesSupported=h;if(h){return}var u=e.document,r=u.documentElement,i=[],k=[],p=[],o={},g=30,f=u.getElementsByTagName("head")[0]||r,b=f.getElementsByTagName("link"),d=[],a=function(){var B=b,w=B.length,z=0,y,x,A,v;for(;z<w;z++){y=B[z],x=y.href,A=y.media,v=y.rel&&y.rel.toLowerCase()==="stylesheet";if(!!x&&v&&!o[x]){if(y.styleSheet&&y.styleSheet.rawCssText){m(y.styleSheet.rawCssText,x,A);o[x]=true}else{if(!/^([a-zA-Z]+?:(\/\/)?)/.test(x)||x.replace(RegExp.$1,"").split("/")[0]===e.location.host){d.push({href:x,media:A})}}}}t()},t=function(){if(d.length){var v=d.shift();n(v.href,function(w){m(w,v.href,v.media);o[v.href]=true;t()})}},m=function(G,v,x){var E=G.match(/@media[^\{]+\{([^\{\}]+\{[^\}\{]+\})+/gi),H=E&&E.length||0,v=v.substring(0,v.lastIndexOf("/")),w=function(I){return I.replace(/(url$)['"]?([^\/$'"][^:\)'"]+)['"]?(\))/g,"$1"+v+"$2$3")},y=!H&&x,B=0,A,C,D,z,F;if(v.length){v+="/"}if(y){H=1}for(;B<H;B++){A=0;if(y){C=x;k.push(w(G))}else{C=E[B].match(/@media ([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1;k.push(RegExp.$2&&w(RegExp.$2))}z=C.split(",");F=z.length;for(;A<F;A++){D=z[A];i.push({media:D.match(/(only\s+)?([a-zA-Z]+)(\sand)?/)&&RegExp.$2,rules:k.length-1,minw:D.match(/$min\-width:[\s]*([\s]*[0-9]+)px[\s]*$/)&&parseFloat(RegExp.$1),maxw:D.match(/$max\-width:[\s]*([\s]*[0-9]+)px[\s]*$/)&&parseFloat(RegExp.$1)})}}j()},l,q,j=function(E){var v="clientWidth",x=r[v],D=u.compatMode==="CSS1Compat"&&x||u.body[v]||x,z={},C=u.createDocumentFragment(),B=b[b.length-1],w=(new Date()).getTime();if(E&&l&&w-l<g){clearTimeout(q);q=setTimeout(j,g);return}else{l=w}for(var y in i){var F=i[y];if(!F.minw&&!F.maxw||(!F.minw||F.minw&&D>=F.minw)&&(!F.maxw||F.maxw&&D<=F.maxw)){if(!z[F.media]){z[F.media]=[]}z[F.media].push(k[F.rules])}}for(var y in p){if(p[y]&&p[y].parentNode===f){f.removeChild(p[y])}}for(var y in z){var G=u.createElement("style"),A=z[y].join("\n");G.type="text/css";G.media=y;if(G.styleSheet){G.styleSheet.cssText=A}else{G.appendChild(u.createTextNode(A))}C.appendChild(G);p.push(G)}f.insertBefore(C,B.nextSibling)},n=function(v,x){var w=c();if(!w){return}w.open("GET",v,true);w.onreadystatechange=function(){if(w.readyState!=4||w.status!=200&&w.status!=304){return}x(w.responseText)};if(w.readyState==4){return}w.send(null)},c=(function(){var v=false;try{v=new XMLHttpRequest()}catch(w){v=new ActiveXObject("Microsoft.XMLHTTP")}return function(){return v}})();a();respond.update=a;function s(){j(true)}if(e.addEventListener){e.addEventListener("resize",s,false)}else{if(e.attachEvent){e.attachEvent("onresize",s)}}})(this,(function(f){if(f.matchMedia){return true}var e,i=document,c=i.documentElement,g=c.firstElementChild||c.firstChild,h=!i.body,d=i.body||i.createElement("body"),b=i.createElement("div"),a="only all";b.id="mq-test-1";b.style.cssText="position:absolute;top:-99em";d.appendChild(b);b.innerHTML='_<style media="'+a+'"> #mq-test-1 { width: 9px; }</style>';if(h){c.insertBefore(d,g)}b.removeChild(b.firstChild);e=b.offsetWidth==9;if(h){c.removeChild(d)}else{d.removeChild(b)}return e})(this));
I really do appreciate your efforts to help me solve this problem... Thank you in advance

Height is determined by content. I can't think of a single reason to have a div height of 5px because almost nothing will fit inside that small a space without problems.
As to why it doesn't show up in other devices, you must have put that style into the Tablet CSS code instead of the default Mobile CSS code.
Fluid Grids build up from Mobile (applied to everything) with specific rules for Tablets, then Desktops.
Best advice, use Fluid Grids for layout only. Use a separate CSS file for content styles.
Hope this helps,
Nancy O.

How to set up fixed height in ADF layout component

I try to create a page by having my main content at the center of page within a box using a fixed height. The idea is when the content is too long, a vertical scrollbar should show up for that box instead of stretching that box. I tried to use trh:tableLayout and set height attribute for trh:cellFormat component. However, instead of showing a vertical scrollbar, it just stretches table cell. Does anyone have a solution to this issue? Thanks.

Thanks for your fast reply. Yes, I already tried layout="vertical" which is not help. I am using JDeveloper 11.1.1.2.0. Actually what I want to do is I will display a block of information in a box area at the center of screen. If the information become too big for that box, I want a scrollbar to show up for that box instead of stretching that box to fit the content.

Apex 4.2 theme 25 grid layout setting.

Hi
I know this is silly question but i had to ask you because i have i tried enough , i have done this before but it not working for me right now. :(
I have 4 region on page .
Region 1 Grid Layout
Start New Row     Yes
Column          Automatic
Column Span     Automatic     Region 2 Grid Layout
Start New Row     Yes
Column          1
Column Span     4Region 3 Grid Layout
Start New Row     NO
Column          5
Column Span     4Region 4 Grid Layout
Start New Row     YES
Column          1
Column Span     8In Region 4 I have 11 number field items with setting.
New Line YES
New Field YES
Width 11
Height 1
Column Span null(default)
Row Span    null(default) I want to arrange first 6 in column 1 last 5 in column 5
I played around the setting by changing column on item to start with 1 and 5 respectively and and set the NO to start new row.
But it justs move little away to right not really to actual 5 column in grid.
Your Input is appreciated.
Thanks

BUG in 4.1 application theme 25

Setting overall styles in DW CC fluid grid layout

I have just watched this tutorial on Adobe TV about fluid grid layout in DW CC: http://tv.adobe.com/watch/learn-dreamweaver-cc/create-fluid-responsive-web-pages-in-dreamw eaver/community#community
This is a great start, but I need to know more!
Where do I set the body text, background, background tile and drop shadows, plus the H1 to H4 and a link attributes? Is it in the <div class="gridContainer clearfix"> or do I do i somewhere else? I saw another video on fluid grid layouts that briefly mentioned using a separate css stylesheet for fonts as 'it was better' but no more detail was given.
Also where can I change the a link attributes in a div if I want different a link styles in that div to the rest of the website? I can't see an area in the properties panel where I can change a link behaviour.
Thanks so much.

Generally, when you are building a website, you want your styles in a separate style sheet (a CSS document). With respect to the tutorial, he details that he is creating a CSS document he calls "style.css" and saves it in the local root folder. I usually place my style sheets in a /css/ folder but, for the purpose of his demonstration, placing it in the root of the defined site in Dreamweaver is just fine.
Now, once he has saved his initial HTML file, Dreamweaver CSS tells him that his document needs two more documents that Dreamweaver will pull in from the Dreamweaver library. One is a JavaScript document, respond.min.js, that handles figuring out what to do on a cell phone, versus a tablet, versus a desktop and the other is "boilerplate.css" that handles fluid grids. If you look at the HTML document, you'll see links to these three files in the root of the defined site.
Now, you'll notice when he's creating the header (id="top") and doing the centering of the logo image, he tells you to select the corect stylesheet, namely "style,css."
Here's the essential problem with the way he's showing you how to do this. You're not actually working in the code. He's demonstrating all of these panels and entry areas for Adobe's Dreamweaver that actually hide the code from you. In fact, he encourages this by switching you from "Split" view to Design (only) view for centering the logo image.
I think this is disingenuous. Everyone here in this forum will tell you, "You need to learn HTML and CSS." And they're absolutely correct. Dreamweaver's fluid grid layout gizmo may not ever define body text, background, background tile, drop shadows or your "h" tags at all. Or, they may be defined, but you are never taken to the code that shows you those definitions.
Open the CSS document that is the basis of the tutorial, which is style.css. In that document, you should see a "body" definition like this:
body {
          background-color: #FFFFFF;
color: #000;
          font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
          margin: 0px 0px 30px 0px;
In English, this means your background color is white and your text color is black. You're using Lucida Sans Unicode or Lucida Grande as your typeface, defaulting to sans-serif if those are not available. You have a 30-pixel bottom margin, no margins for either top or sides.
If you need to create a background color or tile, you would change the background-color attribute or, if you are tiling a background, you would place the following in the body definition in CSS:
background-image: url("images/tile.jpg");
This assumes you have a file in your /images/ folder in the root of your defined site called tile.jpg. Since you did not include a background-repeat command, your tile will repeat x and y.
And if you don't want a tiled background in your body and do want it in a different div, you simply look for the name of the div in your CSS and put it there.
As to your heading styles, you may find them all ready defined in your CSS document. You may redefine them or create new header styles.
This should get you started. The key is to open the CSS document, "style.css" and see what's there.
-Mark

DW CC Fluid grid layout how to change px width for desktop layout

Hi there,
I have been going through the various tutorials about fluid grid layout and setting up our bureau's website in a responsive layout.
The width of the original design was 960 px and the hero pic and others have been exported at that size.
The first divs in the design look fine, header with the 960 px pic in it, and also the BC menu which is set to 960 wide.
However the body text goes out to the right, past the 960 px and this is because, right at the start, when starting the file in DW the desktop screen width is set to 1232px.
How can you change this setting when starting a new fluid grid layout?
I have tried changing the number of columns, or the percentage, and the width for desktop remains at 1232px.
Why is this?
Not all of our clients want a site 1232px wide on a pc.
Thanks so much.

Hi Ben and Nancy,
Thanks for your replies, but maybe you both don't realise I am asking specifically about DW CC and setting up a responsive design using a fluid grid layout?
I have been following the recent videos from Adobe on this.
As far as the width of 960 goes, Nancy I am only shortchanging myself, as this is the website for our agency. The original design is 960px wide as I did read somewhere that this width is recommended now that responsive is coming, as it is easily divided into a grid layout. I also am quoting for a client at the moment who wants a responsive design for their website, and they have specifically requested that the site have a maximum width of 960 px. So I would like to find out if this is possible in DW CC at the moment when doing a fluid grid layout.
So what I am trying to do here is follow the Adobe tutorials on responsive design, using DW CC and I am using the current design for our agency website as a trial to set this up and try and get it working as a responsive website.
It does not seem to me that many other people are doing this, as most people are recommending that I try Github or Bootstrap.
However, I am not a coder and I am used to using DW, so I would like to get the DW CC responsive design features working if possible.
Ben the CSS you are looking at is being generated by DW CC as I follow the steps in the Adobe demonstration videos to set up a fluid grid layout in DW CC.
One of the things they say in the videos is that you can't program the CSS directly when doing a fluid grid layout, or you break the CSS and it all stops working. So I am using the new panels in DW CC to set up the layout. One thing I cannot get access to is the ability to set a maximum width for the site. It seems to be set in concrete when you start the fluid design up in DW CC.
Here is a pic of the screen I am talking about that sets the maximum width:
I cannot click in the pixel width at the top and change it. Also if I adjust the number of gridlines or the percentage for the pc layout, the default maximum pixel width does not change.
If you click on the preferences button and go into the Window sizes screen, there does not seem to be a way to set the maximum pc width here either, so I am a bit stumped.
Maybe I just have say to my clients that if you want a responsive design then the max width for pc can only be 1232px? It does seem strange to me that this cannot be changed.

In Fluid Grid layout, I have hidden 2 div for mobile layout. How do I unhide them?

In Fluid Grid layout, I have hidden 2 <div> for mobile layout. How do I unhide them?

Hi there,
I visited your site using Dreamweaver CC and tested it using the default Desktop, Tablet and Mobile sizes, followed by the Smart Phone Size.
The CSS you currently have sets the featurest <div> to 'display: none' when viewed on screen sizes lower than 480px:
Another helpful way to find out what is going on with your CSS is to test the site with Firefox using Web Developer Tools to inspect the element (or alternatively, Adobes Inspect tool). You can right-click the image and "Inspect Element" then resize the browser window so you can see exactly which CSS rule is being applied and overrided.
My suggestion would be to add an additional media query in Dreamweaver to handle all screen sizes below 480px and then set divs or elements you want to hide or show display property to visible.
Hope this helps!

Setting a minimum height for a dyanmic subform

I am creating a form that is reading in a set of instructions from XML. I would like to limit the instructions to 2 per page. Is there a way I can set a minimum height for the subform, so it will at least be 1/2 the page?

Hi,
If that's the case, then you could size each field in the Design view so that each field takes up have a page. Then in the Layout tab select "expand to fit height" (should also have allowed multiple lines in the Object / Field tab).
Then when you import the XML, short instructions will appear two per page, while longer ones will flow onto following pages. If the fields are set to half a page then you should not get more than 2 on a page.
Hope that is of help,
Niall

Would 100% width on a Fluid Grid Layout be bad for any reason?

I was thinking of setting 100% width on my Fluid Grid Layout (for all media queries) so I wouldn't have to go outside the fluid container for my header and footer bar. Would this be bad for any reason? I feel like they probably preset sizes below 100% for a reason.

If you are talking about desktop version then NO provided you assign margins, paddings and borders to html tags rather than the Divs. This is because borders, margins and paddings are all part of the box model and so the overall width could possibly exceed 100%.
Hope this helps for you to search for box model and how it works on W3C website.
Good luck.

Setting height for grid layout cell

Similar Messages

Maybe you are looking for