Width:100% & region plug-in

Hi,
I’m busy upgrading my Google Maps plug-in and one of the things that I want to do is the developer can decide the width of the map by using either px or *%*, irrespective of the region template the developer for the plug-in.
Currently I define the Map as follows:
   SYS.HTP.p (   '<div id="'
              || p_region.static_id
              || '_map" style="width:'
              || l_width
              || 'px; height:'
              || l_height
              || 'px"</div>'
             );Now I though the change would be simple enough. I replace *| 'px; height:'* with *|| '; height:'* in the code above and have the developer add either the px or *%* in l_width
But it does not work; when I enter *%* the map is not shown at all.
The html code generated by Apex shows
<td class="tbl-main" width="100%"><div id="R2153213947910908_map" style="width:90%;height:500px"</div></td>What am I doing wrong ???
Kind regards
Johannes

Hi Johannes,
did a quick test with Firebug. Your problem isn't the DIV. That one actually expands 90%, but because the TABLE around the DIV doesn't use 100% within its surrounding DIV, the table just uses as much space as necessary.
So you have to go to your page template and change
<table class="tbl-body" cellspacing="0" cellpadding="0" border="0" summary="">to
<table class="tbl-body" style="width:100%" cellspacing="0" cellpadding="0" border="0" summary="">or modify the CSS class definition *tbl-body* to contain width:100%
Hope that helps
Patrick
My Blog: http://www.inside-oracle-apex.com
APEX 4.0 Plug-Ins: http://apex.oracle.com/plugins
Twitter: http://www.twitter.com/patrickwolf

Similar Messages

100% region width - wrong region (bad orig template)!

I have 100% region width template, which is used to show empty HTMLDB region. Picture is shown bellow:
http://i3.tinypic.com/xnrzlv.png
What is wrong?
Theme is "Blue and Tan" and I know that I have to fix template ... but don't know how!?
THX
P.S.
In theme "1" this looks OK...so template is the problem!
Message was edited by:
[email protected]

Hello,
<table cellpadding="0" border="0" cellspacing="0" summary="" width="100%" id="#REGION_ID#" class="htmldbRegion">
<tr>
<td><img alt="" src="#IMAGE_PREFIX#themes/theme_2/left_nav-0-0.png" width="9" height="11"/></td>
<td class="t2stdround01"><img alt="" src="#IMAGE_PREFIX#themes/theme_2/1px_trans.gif" width="1" height="1"/></td>
<td><img alt="" src="#IMAGE_PREFIX#themes/theme_2/left_nav-0-3.png" width="9" height="11"/></td>
</tr>
<tr>
<td class="t2stdround10"><img alt="" src="#IMAGE_PREFIX#themes/theme_2/1px_trans.gif" width="1" height="1"/></td>
<td class="t2stroundbody" width="100%"><table border="0" cellspacing="0" cellpadding="0" summary="" width="100%" class="t2ReportsRegion100Width">
<tr>
<td class="t2RegionHeader" valign="bottom">#TITLE#</td>
<td class="t2ButtonHolder" valign="bottom">#CLOSE# #PREVIOUS##NEXT##DELETE##EDIT##CHANGE##CREATE##HELP#</td>
</tr>
<tr>
<td class="t2RegionBody" valign="top" colspan="2">#BODY#</td>
</tr>
</table></td>
<td class="t2stdround13"><img alt="" src="#IMAGE_PREFIX#themes/theme_2/1px_trans.gif" width="1" height="1"/></td>
</tr>
<tr>
<td><img alt="" src="#IMAGE_PREFIX#themes/theme_2/left_nav-2-0.png" width="9" height="9"/></td>
<td class="t2stdround21"><img alt="" src="#IMAGE_PREFIX#themes/theme_2/1px_trans.gif" width="1" height="1"/></td>
<td><img alt="" src="#IMAGE_PREFIX#themes/theme_2/left_nav-2-3.png" width="9" height="9"/></td>
</tr>
</table>
That should do it,
Carl

How to find out which plugin is missing ( embed width="100%" height="100%" messagecallback="parent.frames.MANIPULATIONS.AppendMessage" spinfps="15" spiny="30")?

How to find out which plugin is missing fro mthe website: http://web.it.nctu.edu.tw/~twli/interactive/scr_tutf.htm?
After looking at one similar question found in mozilla support and answered by jscher2000 (https://support.mozilla.org/en-US/questions/957655), I have found out I have to look for either <object or <embed. What I found is : <embed width="100%" height="100%" messagecallback="parent.frames.MANIPULATIONS.AppendMessage" spinfps="15" spiny="30"
What do I have to do now?

This big1.mol (and possibly big2.mol) file is loaded in the embed plugin object that is opened in a iframe, so you can right-click the plugin area to check the embed code.
*http://web.it.nctu.edu.tw/%7Etwli/interactive/big1.mol
*http://web.it.nctu.edu.tw/%7Etwli/interactive/big2.mol

Images are no longer scaling with (img {max-width: 100%; }) in css as of update 34.0.5 in firefox, this still works great in IE and chrome.

My website worked great until firefox update 34.0.5. Now the images will not scale to fit the box anymore. I am using flexbox so that the site scales to fit the size of the browser. In css I set img {max-width:100%;} and this would make the jpg files automatically size to fit the box they were in, but not anymore as Mozilla has really screwed this up with update 34.0.5. My site still works great with IE and Chrome but 70% of my web traffic is using firefox so I really would like this to work in firefox.
Any help is greatly appreciated!

I had the same problem, and this worked for me:
img {max-width:100%; width:100%;}

JQuery ids in Apex dialog region plug-in

Hi,
Apex 4.0
I have a plug in (here ) that opens a dialogue region when someone clicks on a button. I'm calling a dynamic action to process a PL/SQL procedure but it takes a while to process the procedure. I have another plug-in which disables the screen and uses a pop-up until its finished processing, but to use the 'processing' pop-up I need to link it to my other plug-in.
I can access apex buttons on the pop-up but it has its own jQuery 'OK' button, But I cant seem to find its id anywhere... I tried modifying the code, but Im not sure if I'm correct in assuming that the id is "" in the first place(used firebugs DOM feature to find it). I have a little experience with jQuery but not so with jQuery in apex...
Is there anyway I can assign it one? Or does it already have one?
This is the code I've modified from the plug-in:
l_onload := 'apex.jQuery("#' ||
    p_region.static_id ||
    '").dialog({' ||
    apex_javascript.add_attribute('autoOpen', (l_auto_open = 'Y')) ||
    apex_javascript.add_attribute('modal', true) ||
    apex_javascript.add_attribute('title', l_title) ||
    apex_javascript.add_attribute('width', to_number(l_width)) ||
    'buttons:{' || '"' || l_ok_label || '":function(){apex.jQuery(this).trigger("dialogregion.ok");
$(this).attr("","NEWID");
    $(this).dialog("close");}';

Turns out this was a stupid question, the plug-in had an dynamic action triggering event.

Setting Portlet Header Widths (not region widths!)

Am having trouble with portlet headers / portlets' widths being determined by the text width.
My region widths are set yet I have noticed that when I show portlet headers the width of the portlet appears to be determined by how many text characters in the header- (not how many text characters in the portlet itself)
Is there some way I can set the portlet width (as opposed to the region width) to ensure uniformity across my site?
Any help appreciated!
Thanks
Jo

The user you have responded to is totally unaware of your post as watches on threads only persist for a few weeks. Do not post follow-ups to ancient threads. Many of the participants in such threads will no longer be active on the forum (check the "recent messages" in their profiles).
Posting follow-ups to ancient threads/departed users is NOT an effective way of getting help:
<li>Other users may ignore the thread if it is closed
<li>Your assumption that the questions are related may be incorrect, leading to confusion about the nature of the problem and potential solutions
<li>Watches on the thread may have expired, so the original participants may be unaware of the new post, or they may no longer be active on the forum
<li>You have no ability to mark posts as helpful or correct
Post your question as a new thread, including at least the following information:
<li>Full APEX version
<li>Full DB/version/edition/host OS
<li>Web server architecture (EPG, OHS or APEX listener/host OS)
<li>Browser(s) and version(s) used
<li>Theme
<li>Template(s)
<li>Region/item type(s)
<li>Links to related posts and threads (using the methods in the FAQ)
Please read the FAQ and forum sticky threads for more information on using this forum effectively.
Update your forum with a real handle instead of "user11986803".

How to keep the stage aspect ratio when stage width=100%?

Hey,
if I would like to make an animation that always fits into the browser window by fitting the width to 100% I'm having trouble keeping the aspect ratio of the stage's height. I can only configure 100% there which will stretch the content also to 100% of the browser window's height. If I configure a pixel value for the height, then I am also stuck on this value.
All I want is the stage to adjust to the width of the browser window, and the height of the stage to preserve the aspect ratio depending on the width.
this video shows what I mean. unfortunately I am not familiar with coding: http://www.youtube.com/watch?feature=player_embedded&v=hrLt0Y9QAY8
Can somebody help me?

sorry can't get the code working properly onwith the html code function. Sorry for that

Business Graphics - Chart width 100%

Hi to all,
how can i set the width value to 100% in the business graphics propertis?
I tried but i dont can precent value set.
have you eny ideas?
regards
Thomas

The width and height properties of IWDBusinessGraphics are of type "int", so you cannot set CSS size values here. The Javadoc is wrong.
Armin
BTW: Could you solve the TableSorter problem?

Fixed Width Report Region

Is it possible to set a report region to fixed width rather than auto? If so, where do I edit this? Thanks!

Oh yes, you can do it on the fly with Dynamic Actions. Its all about changing the CSS Class property for table width.
Once you know how to identify the table and have its "class", you write a Dynamic Action at process point "After Page" to change the Class width property.
You could also write a OnLoad JS function to do the same. Depends on which you are more comfortable.
regards,

How do I create Fixed-Width Report Regions in APEX?

Hi
I would like to create 3 or 4 report regions of uniform fixed-width on a single APEX page.
How do I go about this?
Each report varies in the number of columns and the width of columns.
Thanks
Kind Regards
Greg

Hello,
Customize your region template by adding width property.

New 12" PBook, battery 100% charged plug orange, charger very hot. Why?

New (refurb) 12" PowerBook arrived three days ago.
This evening I noticed, for the first time, that the indicator in the menu bar indicated that the battery was 100% charged. But the plug stayed orange.
After about a hour in this condition I also noticed that the charger was extremely hot. The charger for my G3 iBook never got so hot. I unplugged the PowerBook.
Anyone know what's going on here?
12" PowerBook 1.5GHz Mac OS X (10.3.9)
iBook 900G3 Mac OS X (10.3.9)

sounds like a malfunction with the adapter...if u unplug adapter does the battery still charge computer and show a high charge ro does it slip as soon as u unplug it?

DDTS-100 power plug problem please help!

I wanted to order the DDTS-100 online but I can only choose the 3 pin uk plug. What i need is a 2 pin plug, i don't know exactly which one(I live in the Netherlands.) How can I solve this?

just get the 3 pin one and then either use a converter (can be bought in most electronics stores) or see if it's possible to replace the cable entirely.

Mobile layout width 100% but displaying as 30%???

site uploaded to here for now
www.rtepyrography.com
fluid grid, DW creative cloud, macbook pro
my .navlistitem, mobile view width is meant to be 100%, its in the code as 100% but displaying as 33%
Tablet and desktop are displaying at 33% which is what i want. but need mobile at 100% not sure where i went wrong.
i know one question per post but this could be related so...
Also .header and .article in mobile and tablet display centred but don't, as asked to, in the desktop view. is this same problem as my width issue? I've written it too but its not working

The following is what I see at /* Mobile Layout: 480px and below. */
At the first breakpoint /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */ I see
The at /* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */ it all looks fine.
My personal opinion, remove (comment out until you see the effect) the code associated with /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
Ben
Mount Eliza

One Level Tabs Region Width

Hi All,
When displaying an interacttive report report using the Reports Region 100% Width template on the One Level Tabs template I am unable to adjust the width of Region Position Two. I've tried the style="width=100%" and width=600px, etc. without any effect. Even tried moving REGION POSITION 02 up in a separate <TR> with no effect. Never had this problem with any template before. Does the fact that I'm using an interactive report impact this? Was also wondering what the designer had in mind with the Page Template Body regions?
Keep Smiling,
Bob R

Deleted the report and the region, added it back and presto, everything worked as designed. Big dummy should have tried that earlier! Interesting exercise in frustration.
Keep Smiling,
Bob R

Cloudy theme 24 Template region width not responding to style width change

Hello
I have a question regarding templates and themes.
Firstly I was using theme 20 traditional blue and all was ok.
Page template “2 level tabs with left sidebar”.
I had a page with a tree in the left side bar region.
Within the region definition in the attributes section against region attributes
I included the following style="width=300px;" which increased the width of my tree so none of the text was cut off.
All working fine!
Then I was asked to move to the “cloudy” theme 24 which scrambled my tabs and layout but with a bit of work I sorted this out all but the tree region.
The problem is the tree region always renders at a certain width even with the style code as before in the region attribute specifying a width nothing happen.
Any ideas on what is happening here?
Edited by: PolarWarrior on 02-May-2012 01:09

I have tried using 150px 250px 350px and the width increases and then stops
the view source shows me the following when I use 100% the ffffff id is mine input via the screen for testing
<section class= uRegion clearfix id= ffffff style=width:100%;> (quotes removed so it display correctly).
I have checked both templates for the page in each theme and I cannot find any references to #REGION_ATTRIBUTES# #REGION_STATIC_ID# in the templates.
the view source of the pages is quite different in each theme

Width:100% & region plug-in

Similar Messages

Maybe you are looking for