Issues with max width in fluid grids

I'm playing with menu design in fluid grids,
I have a menu that switches from a vertical to a horizontal based on media queries, (I didn't write the original code for the menu but I have styled it to match my mock design, the original code was taken from here: http://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/?about# ) I was interested to see how I might implement a more complecated version of the menu as a seperate style sheet within a fluid grid site and I have uploaded my experiment here: http://paulaskimin.com/test/index2/index2.html
I'm experiencing a couple of problems depeding on browser and I am also hindered by a lack of access to a screen larger than a 13" macbook.
All of the problems are with the desktop version of the site, when the menu switches from vertical to horizontal. In Chrome it seems not to centre, in Safari, the content extends beyond the max screen width which I think is set to 1232px everywhere that makes sense to me.
I'm pretty comfortable with the basics of html and css but I'm only just starting to understand media queries ehich is why I'm using the fluid grad option for now. I'm hoping that someone with more experience can find the faults in my code so that I can get the functionality that I'm hoping for. I know that my code is very bloated, I've been trying not to mess with the generated style sheets and I've been playing wirh the page for a while so I think there is plenty that could be removed in theory.
Any insight or advice would be appreciated.
Thanks

Have you looked at MeanMenu?
http://www.meanthemes.com/plugins/meanmenu/
I have an example of it working in a FluidGrid Layout below. When expanded, MeanMenu doesn't obscure other content on the page as yours does.
http://alt-web.com/FluidGrid/Fluid2.html
You can use any other desktop menu you like. MeanMenu only appears in mobile device widths which you set in the JS file.
Nancy O.

Similar Messages

How to get 100% width in fluid grid layout CC

I'm currently getting to grips with dreamweaver's fluid grid layout and cant seem to get a div to go the full 100% width across the screen. Ive created a div outside of the grid container as a non fluid div, and entered in the CSS myself in code view since Dreamweaver doesnt seem to allow you to add a class or ID to non fluid elements in design view. I have done this and all though i thought i had achieved success i noticed when looking closely in live view and when previewed in chrome that there is still a tiny gap between the div and the edge of the screen. Its very small, but its definitely there. Ive enetered width to be 100% and its definitely not simply 100% width of the grid container as its wider. I just cant account for the tiny gap which seems to be about 1 pixel wide. Any ideas whats causing this gap?

Depending on your project goals, there are plenty of other Responsive Frameworks you can use.
Foundation Zurb
http://foundation.zurb.com/templates.php
Skeleton Boilerplate
http://www.getskeleton.com/
Initializr (HTML5 Boilerplate, Responsive or Bootstrap)
http://www.initializr.com/
DMX Zone's FREE Bootstrap extension for DW
http://www.dmxzone.com/go/21759/dmxzone-bootstrap/
Project Seven's Page Packs (Commercial CSS Templates)
http://www.projectseven.com/products/templates/index.htm
Adobe Edge Reflow
http://tv.adobe.com/watch/adobe-edge-reflow/introduction-to-reflow/
PS. I don't work for Adobe. I'm just a product user like you.
Nancy O.

100% Width on Fluid Grid layout?

I am working on a site for a school project and my mockup looks like this: http://i.imgur.com/DLz1T3S.jpg
Each section is 100% width and with varying images/patterns in the background.
I have searched a lot about this and it seems what I found was that fluid leaves a small margin on the sides even when set at 100%.
The only solution I've found is to put my div OUTSIDE of the fluid div, which would work fine for my header and maybe my top picture, but since basically my whole site is divs of 100%
I know this has been aswered through my searches but I wanted to check if Adobe had made any updates on this or if I should just ditch the whole fluid grid layout workflow because of this?
Any enlightenment on this or any suggestions of an alternate way to make this work would be appreciated.
Thank you,
J

If you think about it, 100% width takes up the entire viewport which can look pretty bad in mobile devices when content butts up too close to the browser's edges or chrome. You need some wiggle room so readers don't feel like they're being wedged into a submarine.
I custom coded something similar to your mockup a while back. View source to see the code.
Responsive example: Alt-Web :: Sectioned CSS Layout
Nancy O.

How can I have a fluidarea with max width set?

I have a design where I want a div with the background set to full width - hence 100%
<div id="ContentArea" style="width:100%;background-color:#F55; >
<div id="FIXEDCOLUMN" style="width:60px; >
some content goes here
</div>
<div id="FLUIDAREA" style="width:MAX900;background-color:#FFF; >
some content goes here
</div>
</div>
I want to be able so set the div FLUIDAREA to a max width of 900
I want FIXEDCOLUMN to the left of FLUIDAREA (using float left or something)
I want the columns FIXEDCOLUMN and FLUIDAREA to be centred within the ContentArea (setting margin width to auto I assume???)
How can I achieve this?
Do I need another div around these to max 960 to wrap them up?
Thank you.

As simple as that!!!
Hmmm.
I've been searching with google for that but getting all sorts of answers.
Thank you for all your help.
Terry

FR Studio - Is there a workaround for the issue with referencing data from a grid with a different DB connection and different # of dimensions?

Hi,
I am trying to reference a column in a different grid with a different database connection. I did some research in the forums, and it seems like this is a known issue with FR Studio. The issue is that if the 2 different database connections have different # of dimensions, then the reference will throw an error.
For example, what I'm trying to do is below:
In grid2.column[A], I have the following formula:
grid1.column[A]
The result is an error.
The ultimate goal is to have a basic variance formula in the grid between grid1 and grid2, which have different database connections with a different # of dimensions. Is there a workaround at all to this bug? The example of the basic formula is below:
grid1.column[A] - grid2.column[A]
Any help is much appreciated!
Thanks,
Tiffany

Thanks for the detailed response Mike.
The issue with trying it in Grid1 vs Grid2 is that Grid1's DB connection has more dimensions than Grid2's DB connection. I can't change the DB connection to a database with more dimensions because you have to be able to map all dimensions from the existing DB connection (Grid1) to the new DB connection (Grid2). This isn't possible, so instead I have to map Grid2 (less dimensions) to Grid1 (more dimensions). It just ignores the extra dimensions from Grid1. Does that make sense?
Thanks again for your responses. It's very much appreciated.
Tiffany

Using PNG format with max width without clipping top and bottom of image?

I am using PNG format to preserve the transparency and drop shadow I am trying to incorporate to give the illusion that this slab object is floating above the other layers. I first tried file>place to position the menu object on edge of header/beginning of content. Doing that leaves no options to force the image to span the width of whatever screen. I need that so I've tried using object>fill> and then clicking the max width of the rectangle (which does solve the max width problem), but I am now dealing with a clipping problem of the top and bottom of the image. The next thing I can think of is to go back to Photoshop and distort the image so it isn't as tall. I feel there has to be a simpler way to accomplish this that won't also give my image a unnatural look. Thoughts? Thanks in advance.

Thanks, that helps. I also found that I cropped to much of the canvas. After increasing the canvas area AND setting to fill all is well now. I think your suggestion may help with the scrolling affect problem I'm having when using different resolutions. I am going to try to set the size in one dimension (height) so that different resolution screens see the same scroll actions. Thanks Mylenium!

How to bind a WrapPanel's items with different width to respective Grid's ColumnWidth??

I have a Grid which has two columns. Inside the grid there will be WrapPanel which starts from column 0 and has columnspan of 1. This WrapPanel has two children. I want one children's width to be the width of col0 and other to be the width of col1. I have
tried something(code below) but it is not working.[Initially I implemented this without wrappanel that is my grid will have two columns,one column takes 60% of the total width and also has minimum width, other column takes 40% of the total width.So everything
is fine.But when I resize my window I want the second column to get wrapped to the bottom of the 1st column.So I added wrappanel].
The following code explains well:
<Grid Grid.Row="1" Margin="0,20,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*"></ColumnDefinition>
<ColumnDefinition Width="4*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<WrapPanel Orientation="Horizontal" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Left" VerticalAlignment="Top">
<StackPanel Margin="0" Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Grid}}, Path=ColumnDefinitions[0].ActualWidth}">
<Button Margin="0,3,0,0" Style="{DynamicResource StartPage.RSS.TitleTextStyle}" FontSize="13"/>
<Button Margin="0,3,0,0" Style="{DynamicResource StartPage.RSS.TitleTextStyle}"/>
</StackPanel>
<StackPanel Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Grid}}, Path=ColumnDefinitions[1].ActualWidth}">
<TextBlock Foreground="{DynamicResource VsBrush.ToolWindowText}"></TextBlock>
<Button Margin="0,5,0,0" Style="{DynamicResource StartPage.RSS.TitleTextStyle}"/>
</StackPanel>
</WrapPanel>
</Grid>

Why don't you just remove the WrapPanel and set the Grid.Column attached properties of the StackPanels?:
<Grid Grid.Row="1" Margin="0,20,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*"></ColumnDefinition>
<ColumnDefinition Width="4*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Margin="0" Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Grid}}, Path=ColumnDefinitions[0].ActualWidth}">
<Button Margin="0,3,0,0" Style="{DynamicResource StartPage.RSS.TitleTextStyle}" FontSize="13"/>
<Button Margin="0,3,0,0" Style="{DynamicResource StartPage.RSS.TitleTextStyle}"/>
</StackPanel>
<StackPanel Grid.Column="1" Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Grid}}, Path=ColumnDefinitions[1].ActualWidth}">
<TextBlock Foreground="{DynamicResource VsBrush.ToolWindowText}"></TextBlock>
<Button Margin="0,5,0,0" Style="{DynamicResource StartPage.RSS.TitleTextStyle}"/>
</StackPanel>
</Grid>
I am afraid that it makes no sense to define two ColumnDefinitions if you just put a single element with the Grid.ColumnSpan property set to 2 in the Grid. This effetively makes the WrapPanel span the two columns and then there is only a single column...You
might as well put the Grid inside the WrapPanel then:
<WrapPanel Orientation="Horizontal" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Left" VerticalAlignment="Top">
<Grid Grid.Row="1" Margin="0,20,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*"></ColumnDefinition>
<ColumnDefinition Width="4*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Margin="0" Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Grid}}, Path=ColumnDefinitions[0].ActualWidth}">
<Button Margin="0,3,0,0" Style="{DynamicResource StartPage.RSS.TitleTextStyle}" FontSize="13"/>
<Button Margin="0,3,0,0" Style="{DynamicResource StartPage.RSS.TitleTextStyle}"/>
</StackPanel>
<StackPanel Grid.Column="1" Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Grid}}, Path=ColumnDefinitions[1].ActualWidth}">
<TextBlock Foreground="{DynamicResource VsBrush.ToolWindowText}"></TextBlock>
<Button Margin="0,5,0,0" Style="{DynamicResource StartPage.RSS.TitleTextStyle}"/>
</StackPanel>
</Grid>
</WrapPanel>
There is also a SharedSizeGroup property that you can set if you are adding several Grids to the WrapPanel and want the columns of all Grids to have a common width:
https://msdn.microsoft.com/en-us/library/system.windows.controls.definitionbase.sharedsizegroup(v=vs.110).aspx
<WrapPanel Orientation="Horizontal" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Left" VerticalAlignment="Top">
<Grid Grid.Row="1" Margin="0,20,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*" SharedSizeGroup="a"></ColumnDefinition>
<ColumnDefinition Width="4*" SharedSizeGroup="b"></ColumnDefinition>
</Grid.ColumnDefinitions>
</Grid>
<Grid Grid.Row="1" Margin="0,20,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*" SharedSizeGroup="a"></ColumnDefinition>
<ColumnDefinition Width="4*" SharedSizeGroup="b"></ColumnDefinition>
</Grid.ColumnDefinitions>
</Grid>
</WrapPanel>
Please remember to close your threads by marking helpful posts as answer.

Adobe has made upgrades with the Dreamweaver CS6 fluid grids. Is there a better tutorial than this?

It there a better tutorial than this anywhere http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html ? I can't seem to understand this guy. I know he means well. I really want to learn fluid grids. Thanks any reconmandations?

If you want to learn to make responsive Web pages, do not rely on
Adobe's fluid grid system. Learn CSS yourself. If you need to rely on a
grid framework, then you are barking up the wrong tree. I can absolutely
guarantee that if you do not fully understand the theories behind
responsive design and you use the Adobe fluid grid (or the open source
frameworks/scripts that Adobe uses) your site will eventually break.
Study and learn. If you are sharp enough, you will quickly come to
understand that nearly every article and tutorial on the subject is
plain wrong. The essence of responsive design is very easy and does not
require anyone's code but your own.
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
Since 1998

After upgrading to NW 7.01, issue with height/width using %

We upgraded our backend xRPM ABAP Stack to Netweaver 7.01 from 7.0.
Now, our Adobe forms (ADS sits on a java Netweaver 7.0 server) are not displaying correctly - we launch them from ABAP Web Dynpro into a separate window. The forms appear in a small rectangle at the top of the new window.
I checked the Form UI element and notice that the height and width properties are set to 100%. I change these to 800px by 600px and it appears as specified. However, I really would like the form to resize itself based on the window and not force the size to be static
anyone experience this issue after upgrading?

closing issue - reference note 1266588

PXIe 8133 Real Time Configuration Issue with MAX

I seem to be running to a weird problem in configuring a PXIe 8133 into an RT system. After I change it in bios to boot safe mode, MAX detects the system no problem through remote connection. When I try to change its IP (while the PXIe8133 is in Safe Mode), it does not allow me to do so. Specifically, the text on top of Network Settings Tab mentions that it cannot apply the settings. I also have tried reformating the RT, and uploading software. The format performs OK, but still the same problem with IP and communication. The software upload results in communication timeout.
I am not running any firewalls, etc. The link is direct cable between the host and the target (PXIe8133). I am running LV2010 RT on the host.
If I am missing a simple step in getting through this obstacle, please let me know. Any suggestions are apreciated. Thanks in advance.
Peter

Hello,
Just wondering are you using DHCP or static IP addressing? If you are using static IP, ensure you have all the fields on the 'Network Settings Tab' populated including the Gateway and DNS server. Both fields can be populated with the address 0.0.0.0. Hope this helps.
Best,
National Instruments
Applications Engineer

I am not able to link/thread a text to another existing, empty textbox, instead it creates a completely new block with the width of the grid layout i set up.

Hello,
i can not link/thread two existing textboxes together when they are placed on my document. As soon as I move them to the side around the bleeding area, i get the normal chain-like link symbol. I tried to set the grid to the background, lock the guides and these things, but nothing helps. What am i overlooking here?
Thanks for the help.

Thank you for your detailed answer.
However, this is sadly not the solution in my Case. I just tried again and deleted not only the guidelines, i even set the created columns to 0. That way there is just my margin left, and i still cannot select the text box. I don't understand this behavior.
I'm also pretty sure, that in the beginning this was still possible. I work with the guides showing and set up text frame the way before. But at some point, it was no longer possible. I already reset the indesign defaults, deleted all pages/content and saved it as a new file – still the same behaviour.
And I just found out, what was causing the Problem myself! I made a rectangle on a separate Layer (above all), which hat an inwards stroke (see image below, it was white, but sometimes used as a coloured border around the page). This Object is causing the problem, but I am not exactly sure why. If the Object itself was the problem (but its on a master page, therefore locked) and thus recognized as clicked, the text should be inserted into its shape, i would suppose? Anyway, this is what is causing the problem.
Once this Object is removed, it works as usual.
Nonetheless, thank you for the kind help!
Best regards

Issue with max rows?

Hi Experts,
Can anu one pls..
my column having 1lakh rows, when i try to run the report it throws error like extreme limit can't display all rows like this..
i dont have the privilage to extend the max rows limit in rpd level(permissions>query limits)
and also i dont have privilage to modify instanceconfig also..
SO, is there iany other to show that much rows in the report on the fly'
thanq in advance

Hi,
D:\Oracle\Middleware\instances\instance1\config\OracleBIPresentationServicesComponent\coreapplication_obips1\instanceconfig.xml
before take it u r back up and then update the below code ..
<Views>
<Pivot>
<MaxCells>6500000</MaxCells>
<MaxVisibleColumns>100</MaxVisibleColumns>
<MaxVisiblePages>1000</MaxVisiblePages>
<MaxVisibleRows>65000</MaxVisibleRows>
<MaxVisibleSections>25</MaxVisibleSections>
<DefaultRowsDisplayed>500</DefaultRowsDisplayed>
<DefaultRowsDisplayedInDelivery>75</DefaultRowsDisplayedInDelivery>
<DefaultRowsDisplayedInDownload>65000</DefaultRowsDisplayedInDownload>
<DisableAutoPreview>false</DisableAutoPreview>
</Pivot>
<Table>
<MaxCells>6500000</MaxCells>
<MaxVisiblePages>1000</MaxVisiblePages>
<MaxVisibleRows>65000</MaxVisibleRows>
<MaxVisibleSections>25</MaxVisibleSections>
<DefaultRowsDisplayed>500</DefaultRowsDisplayed>
<DefaultRowsDisplayedInDelivery>75</DefaultRowsDisplayedInDelivery>
<DefaultRowsDisplayedInDownload>65000</DefaultRowsDisplayedInDownload>
</Table>
</Views>
finally re start all services then try it again... here its working fine...
Hope it help's
Thanks,
satya

Need Fluid Grid Layout to Max Out at 1920 Pixels

When I view my 3 fluid grid layouts, after 1232 px, nothing is centered. I noticed in the "Desktop" gridContainer there was a max-width value of 1232px. I changed it to 1920px but it did nothing. I want my desktop webpage to look centered up to 1920 pixels. How?

Please don't ask for help until you can provide us with a LINK. Fluid Grids are very temperamental to work with. I advise people to keep their hands off the fluidGrid.css and boilerplate.css files. One misstep with either of these files can make the entire layout break.
Having said that, if you don't show us all your code, we can't be expected to make guesses about what you have done and where. Posting all the code into this forum isn't practical. There's just too much to look at. So pleeeeeeze just give us a link.
Nancy O.

Fluid Grid Layout - Beginner's Questions

First, let me explain once again that I can't reply to my own threads because the "Reply" function isn't working in my browsers for some reason. (Thanks for your tips on my other questions, Ben Pleysier and Nancy O.)
Anyway, I want to modify my websites so they work in mobile devices, and I now have my first Fluid Grid Layout up and running. However, there are some bugs I need to work out.
I experimented with two or three fluid grids and just realized that they're very different for some reason. I think I inserted the wrong elements or inserted them in the wrong location.
Does the HTML code below look OK? I understand that everything is supposed to be inside div.gridContainer, which begs the question why are the last two divs (div.fluid and div#div1) OUTSIDE div.gridContainer? Are these extraneous divs that I can delete?
Am I supposed to have a div#page and div data-role="header"?
It looks like all my actual content - including the footer? - should go inside div data-role="content", right? And am I going to have to apply class="fluid Paragraph" to every paragraph in my database tables?
Some of the confusion may be because some of these unfamiliar elements (e.g. "data-role") may be HTML5, which I'm also just learning about.
If anyone could post a link to a web page(s) using Dreamweaver's Fluid Grid Layout, so I can examine the source code, it would be really helpful. Thanks!
<body>
<div class="gridContainer clearfix">
<div data-role="page" id="page">
    <div data-role="header">
    <?php require_once($BaseINC."/$MyPHP/inc/D/Shared/Body/Header.php"); ?>
    </div>
    <div data-role="content">CONTENT </div>
    <br class="clearfloat">
    <header class="fluid Header">This is the content for Layout Header Tag "Header"</header>
    <p class="fluid Paragraph">This is the content for Layout P Tag "Paragraph"</p>
    <footer class="fluid Footer"><?php require_once($BaseINC."/$MyPHP/inc/D/Shared/Footer.php"); ?></footer>
</div>
</div>

<div class="fluid DivBase">This is the content for Layout Div Tag "DivBase"</div>
<div id="div1" class="fluid">Use Insert Panel for additional Fluid Grid Layout Elements. Note: All Fluid Layout tags must be contained within the "gridContainer" div tag.</div>

</body>
</html>

#1 Success with FGLayouts comes from experience. I built 9 test layouts before I got an acceptable one. A few tips. Build Mobile first because that is what everything else is based on. Then build Tablet & finally Desktop. Do not tamper with code in FluidGrid.css or Boilerplate.css files. Use a separate, external style sheet for your content styles.
#2 Depends on whether or not you want the divs to fall outside your #gridContainer. For example, let's say you want a 100% width header & footer that stretches the entire width of your page in all devices. In that scenario, you would have to move <header> and <footer> tags above and below gridContainer div. Otherwise, everything else needs to be inside the gridContainer in order to respond to the media queries.
#3 APDivs will not work right in FluidGrid Layouts -- or any RWD for that matter -- so don't even go there.
Nancy O.

Fluid grid Media Queries

Hi, how are you all this weekend?
I am getting more comfortable with the DW CC Fluid Grid Layout. I really like it! I just am a bit confused with the media queries. It, by default has two. One set for min-width 481px and one set for 769px. That seems fine to me. I noticed though, when you come down to the icons of smartphone, tablet, and desktop. I click smartphone first and notice that it is set to smart phone 480px, so it will not display min-width 481px and when I click the 481px media query to begin work, I naturally will click the smart phone icon again and it displays 480, not showing me my completed work because it is not reaching the min-width of 481. Same thing occurs with the 768px.
Should I change the media queries to 480px and 769px? Or should I change the icon sizes to match the media queries. Just a bit off that it is one pixel larger than the default icons.
Thanks.

FGL is a mobile first framework. Everything that you place in the general section of the stylesheet will apply to all screen sizes ranging from mobile through to large screens.
If you want to change the look of the page in larger than mobile phone screens, you start using media queries. In FGL, the first larger screen size takes effect at a minimum width of 481px (tablets), the next takes effect at a minimum width of 769px (desktops). This is exactly what the icons depict, hence no adjustment is required.

Issues with max width in fluid grids

Similar Messages

Maybe you are looking for