Dynamic Grid layout

hi experts..
I am facing problem with Dynamic grid layout .
sample code ,and valuable inputs are well appreciated.
Thanks in advance,
Kranthi

Hello Kranthi,
Could you please elaborate what are you trying to achieve.
Any UI element created dynamically would include the layout property as well.
Regards
Anurag Chopra

Similar Messages

Dynamic Grid Layout Dreamweaver CS6

The Dynamic Grid Layout is the main reason for purchase new version of Dreamweaver .
Dynamic Grid Layout in Dreamweaver CS6 does not work nice, columns are not modify with the mouse, jumps back to the old postition. On You Tube it all looks so very easily, but in practice is all very sloppy about ...
Ask the forum, Do I have to drag a button to hold...
If I adjust the width on the left side of the div, I left a red band that set ....
Where is a make proper manual to find ....

Thanks for our suggestions, i keep trying, but Easy NO…..
Geert
Van: Nancy O. [email protected]
Verzonden: donderdag 10 mei 2012 17:11
Aan: Geertskigek
Onderwerp: Dynamic Grid Layout Dreamweaver CS6
Re: Dynamic Grid Layout Dreamweaver CS6
created by Nancy O. <http://forums.adobe.com/people/Nancy+O.> in Dreamweaver - View the full discussion <http://forums.adobe.com/message/4394107#4394107

Too much spacing in grid layout

Hello,
I have a grid layout in a tootlbar of my table, it has too much spacing in it, the lowest span I could get was "L1" for large screen which is all I care about.
I have 3 buttons and I want them next to eachother instead of all that spacing inbetween them and then I want the daterangescroller on the far right but its as far right as I can get it to be without disappearing, is this normal?
Here is a screenshot below:

Thanks Michael, that was basically what I was looking for but that's fixed positioned and the screen sizes will be changing so I need something dynamic, so I started using a splitter layout as its all percentage based.
//create a horizontal Splitter
var oSplitterV = new sap.ui.commons.Splitter("splitterV");
oSplitterV.setSplitterOrientation(sap.ui.commons.Orientation.vertical);
oSplitterV.setSplitterPosition("86%");
oSplitterV.setMinSizeFirstPane("20%");
oSplitterV.setMinSizeSecondPane("33%");
oSplitterV.setWidth("100%");
oSplitterV.setHeight("200px");
oSplitterV.addFirstPaneContent(
new sap.ui.commons.Button("createb",{
id: "createb",
text : "Create",
press : function() {
oController.doCreate();
}), new sap.ui.commons.Button({
text : "Save",
press : function() {
oController.doUpdate();
}), new sap.ui.commons.Button({
text : "Delete",
press : function() {
oController.doDelete();
oSplitterV.addSecondPaneContent(oDateRangeScroller);
This is exactly starting to looking like what I want but it is only showing the very first button, not showing the second or third, and the daterangerscroller is exactly where I want too, if I could get to the 2 other buttons to show that would be exactly what I want.

Grid Layout in theme 26

Hi,
I am using Oracle Apex 4.2.1
I have been following a Youtube Video from Oracle Learning: http://www.youtube.com/watch?v=dPgQZTsdSBI
The video demonstrates an example of grid layout for regions. The layout has 12 columns and and 4 regions, the regions using 3 columns each. In the video the regions align perfectly.
I have tried to recreate this in theme 26 but it does not work. I have set theme 26 to reference the page templates for theme 25. However, this does not work and the regions appear next to each other using 1 grid each with no spacing.
Any ideas on how to fix this in theme 26?
Thanks,
JIM

JIM wrote:
Hi,
I am using Oracle Apex 4.2.1
I have been following a Youtube Video from Oracle Learning: http://www.youtube.com/watch?v=dPgQZTsdSBI
The video demonstrates an example of grid layout for regions. The layout has 12 columns and and 4 regions, the regions using 3 columns each. In the video the regions align perfectly. The video demonstration uses theme 25, which has page templates set up for a CSS grid system with 12 fixed-width columns.
I have tried to recreate this in theme 26 but it does not work.The theme 26 page templates are configured to use HTML table layout with a dynamic, variable number of columns. HTML tables expand to fit their contents, so the width of the columns is also variable.
I have set theme 26 to reference the page templates for theme 25.Don't know what you mean by this. Please explain in more detail.
However, this does not work and the regions appear next to each other using 1 grid each with no spacing.
Any ideas on how to fix this in theme 26?Basically there's nothing to "fix". This is how the table-based layout used in theme 26 works. The regions only appear to use "1 grid each" because their content is all the same size. If you add different content to the regions (as I have) then the table columns change width to fit it. You could use CSS to apply fixed widths to the columns, but that kind of defeats the purpose of using table-based layout.
The themes in APEX 4.2 don't appear to specify spacing between regions when using HTML table layout, but this can be controlled using CSS.
Why are you trying to use theme 26 rather than theme 25 as shown in the video demo? They don't look that different.

Creating a grid layout

Hi All,
I am completely new to ADF UI part. I am looking for creating a grid layout of static/dynamic image content. just like the one that is there in suppose 'ebay search'.
can somebody please tell me about how to go about this.
Regards,
ND

For this you can use an af:table and put an af:image in a column.
Check out this blog http://jobinesh.blogspot.com/2010/06/decorate-ui-with-view-row-attributes.html for a start.
Timo

Add grid rows in panel grid layout in adf UI page

I'm using panel grid layout in adf UI page. I need to add a dynamic grid row in panelGridLayout. Or in simple way programatically I need to add grid rows in panel grid layout in adf UI page.Timo Hahn Frank Nimphius Shay Shmeltzer-Oracle

Hi Shay,
It is a dynamic grid.
there can be one dropdown, two dropdown.... n dropdown.
Please tell me if there is any specific method to add children.

Dynamic Page Layout - Opportunity Product Revenue

Hi gurus,
I am trying to setup a dynamic template for "Opportunity Product Revenues"
I set it up successfully in the object. However, this data is exposed only as a related list of Opportunity and not directly. Now, when I go into the "Opportunity" customization, it only allows me to set up static page layouts, with no option to setup the Dynamic page layouts through the Related list.
Please help..

Hi Jonathan,
Many thanks for your response.
Our CTE is already on R19. We want to experiment and be ready when our PROD is upgraded to R19.
Can you help me with the requirement, if you have an idea please? I would really appreciate the help.
Thanks

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.

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

How to setup a default direction for new divs in fluid grid layout in dreamweaver?

Hi,
how to setup a default direction for new divs in fluid grid layout in dreamweaver? I am an RTL interface user, I need my new divs to be inserted from right to left not Left to Right! could it be in dreamweaver?
Thanks.

This may get me into strife, but my experience is that you are better off finding another platform for your RWD.
The framework that I tend to use is by Zub-Foundation http://foundation.zurb.com/.
A commercial product that I have come to appreciate can be found here http://www.projectseven.com/products/tools/composer/index.htm. Please do not mention me if you happen to choose this product.

How to setup a default size for new divs in fluid grid layout in dreamweaver?

Hi,
how to setup a default size for a new divs in fluid grid layout in dreamweaver? I don't need the default size for new divs as a 100% width, I need them 13.69% as a one coulmn width only (7 coulmns fluid grids layout for desktop size 1000w).
This problem I've faced when I intended to insert dozens of fluid grid divs in the layout.

Sorry, I don't believe that you have had a good look at the Foundation framework. I'll now hold your hand while we go through the basics.
Here is the specific page http://foundation.zurb.com/docs/components/grid.html
The default values are
Em-base : 16px
Row width: 62.5em (62.5em x 16px = 1000px)
Columns per row: 12
These and other default values can be changed. The fact of the matter is that if you stipulate a section width of 2 or 3 or 12 columns, the widths will automatically be calculated for you.
In your case, if you want 7 columns, all you need to do is change the number of columns per row and the rest is done for you.

Dynamic Grid layout

Similar Messages

Maybe you are looking for