Referencing cells in a grid layout

I am adding an extended component to a container with a GridLayout, in this case a 10x10 grid. Is it possible to reference an individual cell of the grid?

Why would you want to "reference" a particular cell in the grid? Wouldn't you just access the component in the cell?
If you're really trying to add negative (empty) space in your grid, you should use a GridBagLayout instead. You get much more control over the layout, particularly when you're dealing with a resizable frame.

Similar Messages

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.

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]

APEX Theme 25 - Responsive Grid Layout Question

Hi
What is the best way to control an item to be positioned right next to the other item on the same row.
I have a select list that I would like to have an edit button right next to it.
I created two items for example:
P_MY_SELECT_LIST Grid set New Line to Yes, Auto
P_MY_EDIT_LINK Grid set New Line to No, Auto
But it is not doing what I expected.. what am I missing?
When it was tables not divs I had no trouble but now I need to learn the kep to using the Grid.
When I hard code the edit in the Post Element of the item it works great with 2 spaces... but I can't control the item by the AUTH Scheme. I don't want them to show up unless you have the proper role.
Plus, I want to learn the new 4.2 way!
Thanks, Bill

Hi Scott, Bill,
Because Theme 25 relies on grid for most of it's positioning, it is difficult to do accomplish what was sometimes much simpler when using the tables approach for form layouts. This also happens to be one of the biggest issues with Theme 25: proper form and label positioning.
If we look back to using tables for form layout we would see that a structure would be created immediately when we started laying out items. Because of the way tables behave, whatever the size of your first label was controlled the width of that cell, and the cells below it. Meaning all of your labels would line up, but only take the space necessary to fit your label.
However, with a div-based grid, this is no longer possible. There is no structured set of cells that grow / contract together as there are in tables. Because of this, it is difficult to determine the width of a given container and apply that same width to others (for example, picking up your largest label, and applying the width of that label container to the other labels which are below).
One way to go around this problem, and what we've done in Theme 25, is to used fixed-width labels. So we explicitly set the width of labels, and that makes the layout much more predictable. We know that labels will always be a certain width, and that input fields that follow will begin from the same position. However, this is very different from how forms in tables work:
1. All labels are the same size, so even if a label is very small, or very large, it will take the same space.
2. We can no longer align two items be right next to each other without using grids.
3. When using grids, we have to be mindful of the label's fixed width as it can be larger than the column it is contained in.
We're working on a cleaner approach to this problem so creating responsive applications and laying form items is easier than it currently is. In the meantime, you can override several styles to help your particular use case.
Here are just a few styles you can apply to your page to get form alignment to behave (with a specified region static id):
1. Manually setting the widths of labels for a given region:
#my_region div.fieldContainer.horizontal>label {
    width: 80px;
#my_region div.fieldContainer.horizontal div.fieldControls {
    /* width above + 16px spacing */
    margin-left: 96px;
2. Set Label widths to only take up the space they need:
#my_region div.fieldContainer.horizontal>label {
    float: none;
    width: auto;
#my_region div.fieldContainer.horizontal div.fieldControls {
    margin-left: 0;
    display: inline-block;
3. You can allow fields to float left:
a. Add to your inline CSS:
#my_region div.fieldContainer {float: left;}b. Set grid layout attributes for your second item as follows:
Start New Row: No
Column: Automatic
New Column: NoYou can combine these together as well. For example, applying styles #2 and #3 will let you position elements side by side and immediately after each other.
Scott,
For some of your issues in particular, here are some possible ways to go around them:
1. Password field being cut off
In addition to setting the size of the field to 60, you can apply an inline style to control the width by setting the HTML Form Element Attributes field to:
style="max-width: 100%;"This will restrict the size of input field to be a maximum of 100% of it's container, and should no longer be hidden when your window is resized.
2. Customer Report obscured
You can add an inline style to your page header to set this region's content to scroll. For example giving it a static id of my_region and adding the following to your page's inline css field:
#my_region section.uRegion>div.uRegionContent {overflow: auto;} Hope this helps!
Shakeeb

Display only cell in ALV Grid in OO

Hi Folks,
Hope someone can help me with this little issue. I have a series of columns in my ALV grid that are editable, but I need to a) make some of the cells on specific lines uneditable and b) display time based fields on this line as blank (presently they shoe 00:00:00).
For problem a) I have set the layout style frame as 'cellstyles'
    es_layout-stylefname = 'CELLSTYLES'.
I have also set the edit flag in the field catalog for the individual columns to 'X' eg
     WHEN 'CUSTTS_DATE_N'.
          ls_fieldcat-edit = 'X'.
And coded:
       gwa_stylerow-fieldname = 'CUSTTS_DATE_N'.
      gwa_stylerow-style = cl_gui_alv_grid=>mc_style_disabled.
      APPEND gwa_stylerow TO gt_stylerow.
      wa_delivery_list-cellstyle[] = gt_stylerow[].
      APPEND wa_delivery_list TO it_delivery_list.
Yet, the ALV cells are still being displayed as editable. Can't for the life of me figure out what's missing. The only other thought I had around this is that the wa_delivery_list-cellstyle table is being set in the data extraction code, before the ALV grid is built, and that the cell formats are being overwritten/on not being called by the field catalog entries. Any thoughts on how to make these fields/cells display only when the ALV is first displayed would be greatly appreciated.
As for option b) I'm clueless, as the cell style commands are not being picked up (see problem a.). Again any thoughts would be appreciated, and points will be rewarded for solutions/suggestions that lead to solutions.
Cheers,
Stephen Keam

Hello Stephen
I have created a simple report ZUS_SDN_ALV_EDITABLE_1B which shows how to use editability on cell level.
The crucial parts of the coding for your requirements are shown below, followed by the entire report.
READ TABLE gt_fcat INTO ls_fcat
       WITH KEY fieldname = 'UPTIM'.
IF ( syst-subrc = 0 ).
    DELETE gt_fcat INDEX syst-tabix.
    ls_fcat-no_zero = abap_true. " suppresses 00:00:00
    INSERT ls_fcat INTO gt_fcat INDEX 7.
ENDIF.
*&      Form SET_CELL_EDITABLE
*       text
* --> p1        text
* <-- p2        text
FORM set_cell_editable .
* define local data
DATA: ld_idx      TYPE i,
        ls_outtab   TYPE ty_s_outtab,
        ls_style    TYPE lvc_s_styl.
LOOP AT gt_outtab INTO ls_outtab.
    ld_idx = syst-tabix.
    REFRESH: ls_outtab-celltab.
    " NOTE: if you change the year of column ERDAT to 2008 then two columns will become non-editable
    IF ( ls_outtab-erdat+0(4) = '2008' ).
      CLEAR: ls_style.
      ls_style-fieldname = 'UPDAT'.
      ls_style-style     = cl_gui_alv_grid=>mc_style_disabled.
      INSERT ls_style INTO TABLE ls_outtab-celltab.
      CLEAR: ls_style.
      ls_style-fieldname = 'UPTIM'.
      ls_style-style     = cl_gui_alv_grid=>mc_style_disabled.
      INSERT ls_style INTO TABLE ls_outtab-celltab.
    ELSE.
    ENDIF.
    MODIFY gt_outtab FROM ls_outtab INDEX ld_idx
      TRANSPORTING celltab.
ENDLOOP.
ENDFORM.                    " SET_CELL_EDITABLE
*& Report ZUS_SDN_ALV_EDITABLE
*& Thread: Display only cell in ALV Grid in OO
*& <a class="jive_macro jive_macro_thread" href="" __jive_macro_name="thread" modifiedtitle="true" __default_attr="765083"></a>
* Flow logic of screen '100' (no elements, ok-code => gd_okcode ):
**PROCESS BEFORE OUTPUT.
** MODULE STATUS_0100.
**PROCESS AFTER INPUT.
** MODULE USER_COMMAND_0100.
*& GUI-Status: ok-codes BACK, EXIT, CANC
REPORT zus_sdn_alv_editable_1b.
TYPE-POOLS: abap.
CONSTANTS:
gc_tabname       TYPE tabname VALUE 'KNB1'.
TYPES: BEGIN OF ty_s_outtab.
INCLUDE TYPE knb1 AS knb1.
TYPES: celltab    TYPE lvc_t_styl.
TYPES: END OF ty_s_outtab.
TYPES: ty_t_outtab    TYPE STANDARD TABLE OF ty_s_outtab
                      WITH DEFAULT KEY.
DATA:
gd_okcode        TYPE ui_func,
gd_repid         TYPE syst-repid,
gt_fcat          TYPE lvc_t_fcat,
gs_layout        TYPE lvc_s_layo,
gs_variant       TYPE disvariant,
go_docking       TYPE REF TO cl_gui_docking_container,
go_grid          TYPE REF TO cl_gui_alv_grid.
DATA:
gs_outtab        TYPE ty_s_outtab,
gt_outtab        TYPE ty_t_outtab,
gt_outtab_pbo    TYPE ty_t_outtab.
DATA:
gd_answer        TYPE c.
*       CLASS lcl_eventhandler DEFINITION
CLASS lcl_eventhandler DEFINITION.
PUBLIC SECTION.
    CLASS-METHODS:
      handle_data_changed
         FOR EVENT data_changed OF cl_gui_alv_grid
             IMPORTING er_data_changed.
ENDCLASS.                    "lcl_eventhandler DEFINITION
*       CLASS lcl_eventhandler IMPLEMENTATION
CLASS lcl_eventhandler IMPLEMENTATION.
METHOD handle_data_changed.
    " Just trigger PAI followed by PBO
    CALL METHOD cl_gui_cfw=>set_new_ok_code
      EXPORTING
        new_code = 'REFRESH'
*        IMPORTING
*          rc       =
ENDMETHOD.                    "handle_data_changed
ENDCLASS.                    "lcl_eventhandler IMPLEMENTATION
START-OF-SELECTION.
SELECT * FROM (gc_tabname) INTO CORRESPONDING FIELDS
                              OF TABLE gt_outtab UP TO 99 ROWS.
gt_outtab_pbo = gt_outtab. " set PBO data
PERFORM init_controls.
* ok-code field = GD_OKCODE
CALL SCREEN '0100'.
END-OF-SELECTION.
*&      Form INIT_CONTROLS
*       text
* --> p1        text
* <-- p2        text
FORM init_controls .
* Create docking container
CREATE OBJECT go_docking
    EXPORTING
      parent = cl_gui_container=>screen0
      ratio = 90
    EXCEPTIONS
      OTHERS = 6.
IF sy-subrc <> 0.
*   MESSAGE ID SY-MSGID TYPE SY-MSGTY NUMBER SY-MSGNO
*              WITH SY-MSGV1 SY-MSGV2 SY-MSGV3 SY-MSGV4.
ENDIF.
* Create ALV grid
CREATE OBJECT go_grid
    EXPORTING
      i_parent = go_docking
    EXCEPTIONS
      OTHERS   = 5.
IF sy-subrc <> 0.
*   MESSAGE ID SY-MSGID TYPE SY-MSGTY NUMBER SY-MSGNO
*              WITH SY-MSGV1 SY-MSGV2 SY-MSGV3 SY-MSGV4.
ENDIF.
" NOTE: not required
* set handler:
*    lcl_eventhandler=>handle_data_changed for go_grid.
* Build fieldcatalog and set hotspot for field KUNNR
PERFORM build_fieldcatalog.
PERFORM set_layout_and_variant.
PERFORM set_cell_editable.
*§3.Optionally register ENTER to raise event DATA_CHANGED.
*   (Per default the user may check data by using the check icon).
CALL METHOD go_grid->register_edit_event
    EXPORTING
      i_event_id = cl_gui_alv_grid=>mc_evt_enter.
SET HANDLER: lcl_eventhandler=>handle_data_changed FOR go_grid.
* Display data
CALL METHOD go_grid->set_table_for_first_display
    EXPORTING
      is_layout       = gs_layout
      is_variant      = gs_variant
      i_save          = 'A'
    CHANGING
      it_outtab       = gt_outtab
      it_fieldcatalog = gt_fcat
    EXCEPTIONS
      OTHERS          = 4.
IF sy-subrc <> 0.
*   MESSAGE ID SY-MSGID TYPE SY-MSGTY NUMBER SY-MSGNO
*              WITH SY-MSGV1 SY-MSGV2 SY-MSGV3 SY-MSGV4.
ENDIF.
* NOTE:
* Documenation of I_SAVE ("An Easy Reference for ALV Grid Control")
*I_SAVE
*Determines the options available to the user for saving a layout:
*? 'X': global saving only
*? 'U': user-specific saving only
*? 'A': corresponds to 'X' and 'U'
*? SPACE: no saving
* Link the docking container to the target dynpro
gd_repid = syst-repid.
CALL METHOD go_docking->link
    EXPORTING
      repid                       = gd_repid
      dynnr                       = '0100'
*      CONTAINER                   =
    EXCEPTIONS
      OTHERS                      = 4.
IF sy-subrc <> 0.
*   MESSAGE ID SY-MSGID TYPE SY-MSGTY NUMBER SY-MSGNO
*              WITH SY-MSGV1 SY-MSGV2 SY-MSGV3 SY-MSGV4.
ENDIF.
ENDFORM.                    " INIT_CONTROLS
*&      Module STATUS_0100 OUTPUT
*       text
MODULE status_0100 OUTPUT.
SET PF-STATUS 'STATUS_0100'.
* SET TITLEBAR 'xxx'.
ENDMODULE.                 " STATUS_0100 OUTPUT
*&      Module USER_COMMAND_0100 INPUT
*       text
MODULE user_command_0100 INPUT.
" NOTE: retrieve changed data from frontend (grid control) into
"       the backend (itab in ABAP)
go_grid->check_changed_data( ).
CASE gd_okcode.
    WHEN 'BACK' OR
         'EXIT' OR
         'CANC'.
      SET SCREEN 0. LEAVE SCREEN.
    WHEN 'REFRESH'.
      PERFORM set_cell_editable.
      " NOTE: Refresh required
      CALL METHOD go_grid->refresh_table_display
*        EXPORTING
*          is_stable      =
*          i_soft_refresh =
*        EXCEPTIONS
*          finished       = 1
*          others         = 2
      IF sy-subrc <> 0.
*       MESSAGE ID SY-MSGID TYPE SY-MSGTY NUMBER SY-MSGNO
*                  WITH SY-MSGV1 SY-MSGV2 SY-MSGV3 SY-MSGV4.
      ENDIF.
    WHEN 'SAVE'.
      IF ( gt_outtab = gt_outtab_pbo ).
        MESSAGE 'No data changed' TYPE 'S'.
      ELSE.
        CLEAR: gd_answer.
        CALL FUNCTION 'POPUP_TO_CONFIRM'
          EXPORTING
*             TITLEBAR                    = ' '
*             DIAGNOSE_OBJECT             = ' '
            text_question               = 'Save data?'
*             TEXT_BUTTON_1               = 'Ja'(001)
*             ICON_BUTTON_1               = ' '
*             TEXT_BUTTON_2               = 'Nein'(002)
*             ICON_BUTTON_2               = ' '
*             DEFAULT_BUTTON              = '1'
*             DISPLAY_CANCEL_BUTTON       = 'X'
*             USERDEFINED_F1_HELP         = ' '
*             START_COLUMN                = 25
*             START_ROW                   = 6
*             POPUP_TYPE                  =
*             IV_QUICKINFO_BUTTON_1       = ' '
*             IV_QUICKINFO_BUTTON_2       = ' '
          IMPORTING
            answer                      = gd_answer
*           TABLES
*             PARAMETER                   =
          EXCEPTIONS
            text_not_found              = 1
            OTHERS                      = 2.
        IF sy-subrc <> 0.
*       MESSAGE ID SY-MSGID TYPE SY-MSGTY NUMBER SY-MSGNO
*               WITH SY-MSGV1 SY-MSGV2 SY-MSGV3 SY-MSGV4.
        ENDIF.
        IF ( gd_answer = '1' ). " yes
          MESSAGE 'Data successfully saved' TYPE 'S'.
          gt_outtab_pbo = gt_outtab. " update PBO data !!!
        ELSE.
          MESSAGE 'Action cancelled by user' TYPE 'S'.
        ENDIF.
      ENDIF.
    WHEN OTHERS.
ENDCASE.
CLEAR: gd_okcode.
ENDMODULE.                 " USER_COMMAND_0100 INPUT
*&      Form BUILD_FIELDCATALOG
*       text
* --> p1        text
* <-- p2        text
FORM build_fieldcatalog .
* define local data
DATA:
    ls_fcat        TYPE lvc_s_fcat.
CALL FUNCTION 'LVC_FIELDCATALOG_MERGE'
    EXPORTING
*     I_BUFFER_ACTIVE              =
      i_structure_name             = gc_tabname
*     I_CLIENT_NEVER_DISPLAY       = 'X'
*     I_BYPASSING_BUFFER           =
*     I_INTERNAL_TABNAME           =
    CHANGING
      ct_fieldcat                  = gt_fcat
    EXCEPTIONS
      inconsistent_interface       = 1
      program_error                = 2
      OTHERS                       = 3.
IF sy-subrc <> 0.
* MESSAGE ID SY-MSGID TYPE SY-MSGTY NUMBER SY-MSGNO
*         WITH SY-MSGV1 SY-MSGV2 SY-MSGV3 SY-MSGV4.
ENDIF.
ls_fcat-edit = abap_true.
MODIFY gt_fcat FROM ls_fcat
      TRANSPORTING edit
    WHERE ( key NE abap_true ).
READ TABLE gt_fcat INTO ls_fcat
       WITH KEY fieldname = 'UPTIM'.
IF ( syst-subrc = 0 ).
    DELETE gt_fcat INDEX syst-tabix.
    ls_fcat-no_zero = abap_true. " suppresses 00:00:00
    INSERT ls_fcat INTO gt_fcat INDEX 7.
ENDIF.
READ TABLE gt_fcat INTO ls_fcat
   WITH KEY fieldname = 'UPDAT'.
IF ( syst-subrc = 0 ).
    DELETE gt_fcat INDEX syst-tabix.
    INSERT ls_fcat INTO gt_fcat INDEX 7.
ENDIF.
LOOP AT gt_fcat INTO ls_fcat.
    ls_fcat-col_pos = syst-tabix.
    MODIFY gt_fcat FROM ls_fcat INDEX syst-tabix.
    IF ( syst-tabix > 10 ).
      DELETE gt_fcat INDEX syst-tabix.
    ENDIF.
ENDLOOP.
ENDFORM.                    " BUILD_FIELDCATALOG
*&      Form SET_LAYOUT_AND_VARIANT
*       text
* --> p1        text
* <-- p2        text
FORM set_layout_and_variant .
CLEAR: gs_layout,
         gs_variant.
gs_layout-cwidth_opt = abap_true.
gs_layout-zebra      = abap_true.
*§3.Provide the fieldname of the celltab field by using field
*   STYLEFNAME of the layout structure.
gs_layout-stylefname = 'CELLTAB'.
gs_variant-report = syst-repid.
gs_variant-handle = 'GRID'.
ENDFORM.                    " SET_LAYOUT_AND_VARIANT
*&      Form SET_CELL_EDITABLE
*       text
* --> p1        text
* <-- p2        text
FORM set_cell_editable .
* define local data
DATA: ld_idx      TYPE i,
        ls_outtab   TYPE ty_s_outtab,
        ls_style    TYPE lvc_s_styl.
LOOP AT gt_outtab INTO ls_outtab.
    ld_idx = syst-tabix.
    REFRESH: ls_outtab-celltab.
    IF ( ls_outtab-erdat+0(4) = '2008' ).
      CLEAR: ls_style.
      ls_style-fieldname = 'UPDAT'.
      ls_style-style     = cl_gui_alv_grid=>mc_style_disabled.
      INSERT ls_style INTO TABLE ls_outtab-celltab.
      CLEAR: ls_style.
      ls_style-fieldname = 'UPTIM'.
      ls_style-style     = cl_gui_alv_grid=>mc_style_disabled.
      INSERT ls_style INTO TABLE ls_outtab-celltab.
    ELSE.
    ENDIF.
    MODIFY gt_outtab FROM ls_outtab INDEX ld_idx
      TRANSPORTING celltab.
ENDLOOP.
ENDFORM.                    " SET_CELL_EDITABLE
Regards
Uwe

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

Panel Grid Layout: Column Span unexpected behavior.

Whenever in a Panel Grid Layout, when i give a cell to span over multiple columns(2,3,4 or any), the cell is spanned over the entire row only.. Why does this behavior happens? In JDeveloper, the spanning is shown correctly in design tab and preview tab.

Hi Amanda,
I believe I have discovered the cause of the issue you are facing.
The problem is with the "Alert Region" region template and that it does not have any display points specified so indicate the number of grids that can fit in its region body. Without having any display points, the grid layout system attempts to use all columns available to its container. However, because the Alert Region has additional padding within, the columns will not fit and wrap to the next line.
To fix this issue, you will have to modify the "Alert Region" region template, go to "Display Points" and click Add Row. You will need to enter the following fields:
Name: Region Body
Template Substitution: BODY
Grid Support: Checked
Maximum Fixed Grid Columns: -1
This will fix the issue for you. I've logged a bug within our bug system to track this so we can fix it in a future release of APEX.
Best,
Shakeeb

ALV Summation button is not working when GRID layout is specified

Hi,
I have created a report with Field: ALV Grid Layout. When i dont select anything in ALV GRID Layout. and execute the report. The outout is displayed in ALV Grid. and if i select amt column and PRESS SUMMATION button. im getting the total. Thats fine.
When i select any of the saved layout in ALV Grid Layout field.and run the report, the output is geeting displayed. and if i select amt column and press SUMMATION Button, im getting info message in the popup saying "Desired operation cant be performed for Column 'amt'"
Whts te problem ?
Thanks in Advance.
Jhovee.

PART-II
FORM f_display_data.
TYPE-POOLS: slis.                    " ALV Global types
DEFINE m_fieldcat.
    add 1 to ls_fieldcat-col_pos.
    ls_fieldcat-fieldname   = &1.
    ls_fieldcat-ref_tabname = 'VBAK'.
    ls_fieldcat-do_sum      = &2.
    ls_fieldcat-cfieldname = &3.
    append ls_fieldcat to lt_fieldcat.
END-OF-DEFINITION.
DEFINE m_sort.
    add 1 to ls_sort-spos.
    ls_sort-fieldname = &1.
    ls_sort-up        = 'X'.
    ls_sort-subtot    = &2.
    append ls_sort to lt_sort.
END-OF-DEFINITION.
DATA: ls_fieldcat TYPE slis_fieldcat_alv,
    lt_fieldcat TYPE slis_t_fieldcat_alv,
    lt_sort     TYPE slis_t_sortinfo_alv,
    ls_sort     TYPE slis_sortinfo_alv,
    ls_layout   TYPE slis_layout_alv.
m_fieldcat 'VKORG' '' ''.
m_fieldcat 'KUNNR' '' ''.
m_fieldcat 'VBELN' '' ''.
m_fieldcat 'NETWR' 'X' 'WAERK'.
m_fieldcat 'WAERK' '' ''.
m_sort 'VKORG' 'X'.                  " Sort by vkorg and subtotal
m_sort 'KUNNR' 'X'.                  " Sort by kunnr and subtotal
m_sort 'VBELN' ''.                   " Sort by vbeln
ls_layout-cell_merge = 'X'.
CALL FUNCTION 'REUSE_ALV_GRID_DISPLAY'
       EXPORTING
            is_layout   = ls_layout
            it_fieldcat = lt_fieldcat
            it_sort     = lt_sort
       TABLES
           t_outtab    = gt_vbak.
ENDFORM.                               " F_DISPLAY_DATA

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

Can I control column color in fluid grid layout?

The columns in fluid grid layout are gray in CC; they used to be pink. I highly prefer pink, as I almost never design with that color, and I frequently design with gray.
Is there a way to set a preference for grid column color in CC?
Thanks.

NO NO NO NO NO!
Never make your navigation editable or you will shoot
yourself in the foot
when it comes time to change a link there and you would have
to touch every
page. <sheesh>
Give each of those links a unique ID, e.g.,
<a href="page1.html" id="link1">Page 1</a> |
<a href="page2.html"
id="link2">Page 2</a>....
Then in the head of each child page, add this to the Editable
Region called
"head" -
<style type="text/css">
a#link2 { color:whatever; otherstuff:whatever; }
</style>
Now you would just edit the embedded stylesheet to change
a#link2 to a#link3
or whichever button you wanted to affect on that page.
Alternatively, you can go here -
http://www.divahtml.com and get
their
DivaGPS extension.
DO NOT MAKE YOUR NAVIGATION EDITABLE.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"malcster2" <[email protected]> wrote in
message
news:ga5dev$e89$[email protected]..
> make those links editable regions on the template, and
apply the
> neccessary styles in the individual html pages

How can I convert my web page from a fixed width layout to a fluid grid layout?

I'm taking a web design class (I'm using Dreamweaver CS6, btw) wherein the professor started us out building our websites in a fixed width layout but now I want to change my site into a fluid grid layout. My "site" so far is just one long page, and I've already designed it with fluid grid adjustments in mind (most things are centered in the layout) so it shouldn't need excessive tweaking.
Is there a way to duplicate the site folder that holds my first page, re-open a new document in fluid, then copy the code in and tweak the width parameters for the different layouts?
Did I just answer my own question? Help - I am new at this!!
Thanks all,
KC

Herbert2001 wrote:
A bit off-topic, but Osgood: have you ever used SASS or LESS? When you are building your own grid systems it can save you a tremendous amount of time, and it's a lot of fun.
Take the following simple example - it generates all the 23 css classes automatically for a 12 grid system. And simply changing one variable allows you to create and calculate any number of columns!
//variables
$desktop: 1025px;
$large-columns: 12;
@media only screen and (min-width: $desktop) {
     //regular grid span classes
    @for $i from 1 through $large-columns {
        .span-large-#{$i} {
            width: percentage($i/$large-columns);
     // push classes
    @for $i from 1 through (($large-columns)-1) {
        .push-large-#{$i} {
            margin-left: percentage($i/$large-columns);
No, not explored it yet, and may never....I don't know. I don't really make much money out of web design. It's becoming more and more difficult to find the desire to learn new techniques when the opportunities aren't really there to put them into practice on as regular basis as I would like. I've got a very good handle on css, php, html, jQuery - I'm not sure I want to add another layer at the moment, given I'm never quite sure how long I will continue to 'bang my head against the wall' . I'm getting to the stage where I keep asking myself do I really need the problems associated with learning new stuff to the point of being comfortable with it if the financial rewards at the end don't equate to the efforts of learning it.
I don't really enjoy web development if truth is known. I come from a Graphic Design background which I much prefer but somehow got side tracked and pushed in this direction and there's no way back now, lol. Whilst I concede Web Development is much more exciting its also 100 times more complex/difficult and the skills needed are considerably more.
Your example looks interesting and I should think I could pick it up reasonably easily given I work with php which uses variables on a similar basis.

HOW TO GET VALUE OF A PARTICULAR CELL IN ALV GRID

I HAVE 2 ALV GRID. IWANT WHEN I DOUBLE CLICK ON ANY PARTICULAR CELL OF FIRST GRID I WILL GET THE VALUE DISPLAYED ON THAT PARTICULAR CELL.
THANKS IN ADVANCE

Hi,
If you are using a class alv, you only need to create a local class to control event and, before setting the screen to present the alv, you need to assign the class as a handler, like this:
    CREATE OBJECT event_handler.
    SET HANDLER event_handler->double_click FOR alv_grid.
This event handler was defined before like below and a object was created for it:
CLASS cl_event_handler DEFINITION.
PUBLIC SECTION.
    METHODS double_click FOR EVENT double_click OF cl_gui_alv_grid
      IMPORTING e_row e_column.
ENDCLASS.                    "cl_event_handler DEFINITION
Then you need to implement this class, creating the method double click and do a READ TABLE to the itab you presented in the alv to recover the data, like this:
    READ TABLE itab INTO wk_itab
      INDEX e_row-index.
The e_row structure was sent to the method by the handler, setting it with the line index that you double clicked in the alv. After that, you can manipulate the data that you selected in your internal table to generate the data to the other ALV.
Best Regards,
-h

Problems with fluid grid layout live site only showing phone view in Chrome and Firefox Feb 2015

Hi all,
I have done a complex fluid grid layout using DW 2014 CC. The site has now gone live on the web masters server setup.
Up until now the layout of the site has been working fine and responding to screen size.
Early this morning in the USA the site stopped working. The layout for some users, not all, is only showing the phone view, and takes a long time to load.
This is happening in Chrome and Firefox, but IE is displaying the site properly.
So it looks like the CSS media queries are not working on all browsers.
I am using BC for the test site, and one user having this problem can see that version of the site OK.
I noticed that Chrome has done some updates recently Chrome Releases
Has anyone else come across this problem with Chrome and Firefox with their responsive layouts?
Thanks for any help given.

Hi Ben,
Yes, thanks for this link. The Travel Health Website is one of ours, hosted on BC, and no reported problems so far. We also have another large BC website with ga code in it and users are not reporting problems with it. The Headless Way
However the problem website is hosted elsewhere on a different platform to BC. We have been developing it for three months now, and no problems so far until yesterday. The problem of the site taking ages to load, and timing out seems to be happening with about 10% of users in the USA. http://www.harrisonassessments.com/
The web developer found a user in NZ who was experiencing the slow display problem. They looked at the site with Chrome, Firefox and IE. The site would only display on IE. When the developer removed the google analytics code, the site displayed fine on all browsers for the NZ user. We are waiting for users in the USA to wake up and test the site.
So the problem definitely is related to the ga code and the responsive layout that was done by me in DW2014.1 fluid grid layout. So the related problem of DW2014.1 not being able to load htm files with ga code in them looks to be a good clue to what is going on here.
As there was a bug report for DW2014.1 and google analytics code made in the other thread, I would be interested to know if that was ever solved.
It is interesting that you are pushing Bootstrap and Foundation on me. (Big square websites here I come! lol)
I wonder if DW is going to persist with fluid grid layout then? I certainly hope so, as I have spent 12 months blood sweat and tears learning how to do it in DW.

Dreamweaver CC has "internal error... while resizing a view" when asked to creat a fluid grid layout

Excited for expanded fluid grid layout features it had, I got Dreamweaver Creative Cloud SPECIFICALLY for that feature.
Sign up, download, install went smoothly. Open Dreamweaver CC, create new fluid grid layout, hit OK, name and desigante location of .css file and get the following error.
"An internal error occurred while resizing a view. (Cview::ResizeFrameBy)" OK
I click OK and nothing happens. App freezes. No css, no files. No nothing.
Have tried restarting, re-installing, different names and destinations for .css file. I'm running Mac 10.8.2
Literally, this is the first thing I've done w/ an ACC app and I am displeased and frustrated. Getting customer service either via forum or offshore phone call less than ideal.
(apologies for spelling error in subj. can't edit it)

Can you try the steps mentioned on the thread: http://forums.adobe.com/message/5420680
Verified Fix :
For all the Dreamweaver crashes on opening Fluid Grid pages , Closing Documents or opening files
Please make sure the default system fonts are all enabled - especially Verdana
On MAC -
Open Font BOOK from Applications
Activate VERDANA FAmily of Fonts
-Harshit yadav

Referencing cells in a grid layout

Similar Messages

Maybe you are looking for