List Horizontal image centering in a region

I have 3 standard regions.  Each region, I have an image of the single horizontal list.   By default, only the image is left aligned within the region.    How can I align the center of the image within the frame of the region

George

gkthomas wrote:

Here is the link to test case

https://Apex.Oracle.com/pls/Apex/f?p=36075:1:3388490748799:

Workspace: penwick

Username: [email protected]

password: natural

Thanks for creating that.

What I did is:

1 added an invisible area to act as a container for the parts of the list, with the model of the region Region of DIV with ID and static ID as the image-list-container. This allows us to apply the specific style for three regions in need, without impact on other regions on the page CSS.

2 define the Parent area on three areas list so that they become of the subregions of the new container.

3 added a style sheet to the page of Inline CSS property that center list items in each region:

#image-list-container .uRegion .uRegionContent {
  text-align: center;
}
#image-list-container .uRegion .uRegionContent>.uHorizontalImagesList {
  display: inline-block;
}
#image-list-container .uRegion .uRegionContent>.uHorizontalImagesList>ul>li>a {
  margin: 0;
}

Tags: Database

Similar Questions

  • Centering a horizontal image with label list...

    Hello

    Image list is aligned to the left by default. I would like to know if it is possible to it aligned in the center of the page? If so, please inform me. Thank you in advance...

    Chris :)

    Published by: Chris K.W. on December 11, 2009 08:54

    You have caused a dispute very little. Microsoft on the other hand...

    To do this using CSS, you consider bugs in Internet Explorer, which means that it takes 4 times more than necessary. We will not go into the chain of unfortunate who is ensuivie of events involving virtual machines, but it meant that I could not test this on IE8.

    1. define the model for the region containing the "model No.".

    2. to deal with broken Microsoft browsers, enter

    
    

    in the header of the region, and

    
    

    in the foot of the region.

    3. Add this internal style sheet in the header HTML page

    
    

    If that doesn't work in IE8 not then try to remove 'lt' and '8' in step 2.

    This will bring all the horizontal Images whose label says on a page: we can change this option if necessary, but skip redundant code if it is not necessary.

  • Creating a homepage for Apex using horizontal Images with label list?

    Hello

    I am trying to create a homepage for my application, which contains some intro text and images that would like specific interactive apex reports.

    However, I created a list using the horizontal Images with the list of the label template and during execution of the page - no images are displayed - it just displays the missing image icon

    The question I have, this is where are these defined images and how do I add a custom image for each item in the list

    You can do it in the apex by simply using a predefined list templates or even customize existing list templates.

    I suggest you to go through the sample application and try to understand how the entries in the list are defined and where to use the IMAGES.

    In the APEX of the layout defined in the templates page and the positioning of regions (lists in your case) are based on their Display Position

    Pass by this
    http://docs.Oracle.com/CD/E23903_01/doc/doc.41/e21674/nav_list.htm#CACCJHEE

  • Using #WORKSPACE_IMAGES # with the names of dynamic list of Image, not to hardcode

    I hope someone can help me with this request.

    I am developing an Apex application but I am learning as I go along by examples of Google search and read the tutorials, etc.  I am trying to create a slideshow based on a dynamic list of Image names. First, I created an apex_collection in a header containing the names of the image process, I need (view/column APEX_COLLECTIONS. C001) I then created a Page called P81_IMAGE_NAME element. I'm trying to loop through the collection and display the pictures in a slide show.   I have a HTML Page with the following code in the Source of the region (found the code in an example online)... Please can someone tell me where I can add the following PL/SQL code so that #WORKSPACE_IMAGES # nom_image may contain the names of images dynamically recoveries rather then hard-coded image names as in the < div Section of the Source region - Code I want to add somewhere, don't know where it add or even if it will work

    Declare cursor c1 is

    Select c001

    of apex_collections

    where collection_name = "CO_IMAGES";

    Start

    A1 to c1 loop

    : P81_IMAGE_NAME: = c1. C001;

    < img src = "#WORKSPACE_IMAGES & P81_IMAGE_NAME" alt = "Slideshow Image" / >

    end loop;

    end;

    -End

    -The code which displays images, I found (Harcoded in the < div section)

    < script type = "text/javascript" >

    function slideSwitch() {}

    var $active = $("#slideshow IMG.active");

    If ($active.length == 0) $active = $("#slideshow IMG:last");

    This allows to take images in their order of appearance in the tag

    var $next = $active.next () .length? $active.next)

    : $('#slideshow IMG:first');

    Uncomment the 3 lines below to shoot images in random order

    var $sibs = $active.siblings ();

    var rndNum = Math.floor (Math.random () * $sibs.length);

    var $next = $($sibs [rndNum]);

    $active.addClass('last-active');

    $next.css ({opacity: 0.0})

    .addClass ('active')

    . Animate ({opacity: 1.0}, 3000, function() {})

    $active.removeClass ('active last active');

    });

    }

    {$(function()}

    setInterval ('slideSwitch()', 3000);

    });

    < /script >

    < style type = "text/css" >

    / * the value width and height to match your images * /.

    {#slideshow}

    position: relative;

    height: 400px;

    }

    #slideshow IMG {}

    position: absolute;

    top: 0;

    Left: 0;

    z index: 8;

    opacity: 0.0;

    }

    {IMG.active #slideshow

    z-index: 10;

    opacity: 1.0;

    }

    {IMG.last - active #slideshow

    z index: 9;

    }

    < / style >

    < div id = "slideshow" >

    < img src = "" #WORKSPACE_IMAGES #Logo.png "alt =" slideshow Image 2 "/ >" "

    < img src = "" #WORKSPACE_IMAGES #Logo1.png "alt =" slideshow Image 1 "/ >" "

    < img src = "' #WORKSPACE_IMAGES #2_Burg - 1.png" alt = "Slideshow Image 2" / > "

    < img src = "" #WORKSPACE_IMAGES #Car11.jpg "alt =" slideshow Image 3 "/ >" "

    < img src = "" #WORKSPACE_IMAGES #Screen1.png "alt =" slideshow Image 4 "/ >" "

    < / div >

    < / div >

    user8016921 wrote:

    Please update your profile of the forum with a recognizable user name: Video tutorial how to change username available

    Always include the information described in these guidelines when you post a question: How to get the answers from the forum

    I am developing an Apex application but I am learning as I go along by examples of Google search and read the tutorials, etc.  I am trying to create a slideshow based on a dynamic list of Image names. First, I created an apex_collection in a header containing the names of the image process, I need (view/column APEX_COLLECTIONS. C001) I then created a Page called P81_IMAGE_NAME element. I'm trying to loop through the collection and display the pictures in a slide show.  I have a HTML Page with the following code in the Source of the region (found the code in an example online)... Please can someone tell me where I can add the following PL/SQL code so that #WORKSPACE_IMAGES # nom_image may contain the names of images dynamically recoveries rather then hard-coded image names as in the

    Depends on the number of images. How are they involved?

    With a small number (e.g. 10-20), you can simply use a page element to register the handset img reference items and she as a substitution string in the region existing HTML. For more information, it would be preferable to use a report.

    On the approach of page element:

    1. create the point P81_IMAGES of the page as an element of the display only. The value of the Condition Never element so it is not included in the rendered page and the security attribute point escape special characters No.

    2. create a page process before header (sequenced to run once the collection created if that is done at this point in the process):

    begin
    
      :p81_images := null;
    
      for img in (
        select c001 src
        from apex_collections
        where collection_name = 'CO_IMAGES')
      loop
        :p81_images := :p81_images || 'Slideshow Image '
      end loop;
    
    end;
    

    3 refer to the value of the element in the HTML source of the region

    
    
    
    
    
    &P81_IMAGES.
  • How to align an image centered in the advanced table column.

    Dear friends,

    I developed a page of the OAF with an image column in the advanced table, but by default the image column is not centered,
    How to make image centered in the advanced table column, please let me know your suggestions.


    Thank you
    Keerthi.K

    HAD,

    In your column, create a tabular presentation and a rowlayout and the image, and then put in the rowlayout. Set the horizontal alignment of the rowlayout inwards.

    Kristofer Cruz

  • Selecting the item in a list of images

    Hi @ll,

    I tried to get the selected item in a list of images (bbui - 0.9.2.js). If I try to get the selected item as described here

    https://github.com/BlackBerry/bbUI.js/wiki/image-list

    .. .the result is still "not defined".

    Here is my snip of code:

    var mc;
    var bb10HighlightColor = '#00A8DF';
    
    bb.init({bb10HighlightColor: bb10HighlightColor,
          bb10ActionBarDark: true,
          bb10ControlsDark: true,
          bb10ListsDark: false,
          bb10ForPlayBook: true,
    
          onscreenready: function(element, id) {
             if (id == 'dataOnLoad') {
           dataOnLoad_initialLoad(element);
        } else if (id == 'imagelist') {
                var resultList = element.getElementById('resultlist');
                for (var i = 0; i < mc.count; i++) {
                   var item = document.createElement('div');
                   item.setAttribute('data-bb-type', 'item');
                   item.setAttribute('id', mc.contactarray[i].ID);
                   item.setAttribute('data-bb-title', mc.contactarray[i].Company);
                   item.setAttribute('data-bb-img','img/company.png');
                   item.innerHTML = mc.contactarray[i].Zip + " " + mc.contactarray[i].City;
                   item.onclick = function() { onItemSelected('test'); };
                   resultList.appendChild(item);
                }
             }
          },
    
          ondomready: function(element, id) {
          }
    });  
    
    function doSearch() {
       parseJASONAndOpenList('{"count":3,"contactarray":[{"Company":"Acme Inc.","Lastname":"Jackson","Firstname":"Bill","City":"Maincity","ID":"45D6"},{"Company":"Backman Inc.","Lastname":"Burger","Firstname":"Marc","City":"Downtown","ID":"45D7"},{"Company":"Jingle Inc.","Lastname":"Sampson","Firstname":"John","City":"Outercity","ID":"45D8"}]}');
    };
    
    function parseJASONAndOpenList(jsonString) {
       mc = JSON.parse(jsonString);
       bb.pushScreen('imagelist.htm', 'imagelist');
    };      
    
    function onItemSelected(text) {
       alert(text);
       var selectedItem = document.getElementById('resultlist').selected;
       alert(selectedItem.getAttribute('id')); //selectedItem is always undefined here
    }
    

    The image list:

    
    
    
    
    
       
    Test item

    The image list holds something hard (id = "TEST1"), then I add three objects dynamically. After selecting one of the items, I would like to show more details in a new screen.

    I tried to solve in different ways, but the result of

    var selectedItem = document.getElementById('resultlist').selected;
    

    is always "not defined".

    I'm looking for any help!

    Hello!

    This javascript interface comes in 0.9.3 still not available in the version you are using.

  • Problems updating of an image in a dynamic region

    JDev 11.1.1.5 window 7 x 64 JDK 1.6_31

    I have a (capchta) image in a dynamic region with a data form and the fields.
    I use the SimpleCaptcha library (servlet) as any other image, she calls the servlet.
    The image loads and works very well as well as the audit.

    I wanted to put a button on the screen to refresh the image (get a new image essentially). (I have the sample application that does this as well).

    Problem is that I can't seem to update (AJAX) without refreshing the entire page (manually).

    I tried partial triggers (PPR) and just, they don't do anything.
    I tried using a command button and adding a refresh stripped - still nothing.
    Put it in a subform - no change.

    All items from google are updates of the region to another - not not refreshing points the same region - is there a problem with that?
    I use PPR a bit in other areas, but also stripped updates (these are all the buttons and text fields) - so I know PPR works within a region - same dynamics.
    This seems to be related to the fact that it is a picture of servlet.

    Someone there done this and can share the answer?

    How do you refresh the image... did you provide the image element to cool... its best to refresh the image Refresh parent component using addPartialTarget...
    surround the image with panelgrouplayout and refresh the component panelgrouplayout programmatically

  • Adding images to the repeat region

    Hey guys, I recently started using the features of dreamweaver PHP with MySQL and I have my display of table data in a repeat region. I downloaded images to the database, but if I drag 'image' of the Recordset into the repeat region I just get a lot of binary. I read I should maybe use image URL rather than the traction of the database of images, but I don't understand how to get the images in sequence. How do I know what order to display if they are not in the recordset in PHP?  I wonder if I missed some feature of DW, as I suppose it is quite a common thing to want images in a repeat region. Any advice would be great. Thank you

    > I read maybe I should use the URL of the image

    > rather than pulling images from the database

    Fix. Storage of binary files in the database leads to performance problems.

    > but I do not understand how to get the images in sequence. How would

    > PHP know what order to display if they are not in the Recordset?

    The images are stored in the file system. The path to the image is stored in the database. The fields in the recordset with the path of the image - in order to generate the html code that displays the image in the Recordset loop.

  • No Image - Pull Down Menu list with Image

    Hello.

    I use Pull Down Menu list with Image (measure 1). but when I run the app I can't see any image. Here is the link to my app

    [http://apex.oracle.com/pls/otn/f?p=49167:1 | http://apex.oracle.com/pls/otn/f?p=49167:1]

    Sagar

    Hello Sam,.

    If you change the model from the list "Drop-down Menu with image" images appear.

    Greetings,
    Roel

    http://roelhartman.blogspot.com/

  • BB10 - problems w / dynamic populating list of images with the data of WebSQL

    Hi all

    So I'm having a few problems with the definition of the element's onclick attribute when dynamic filling an image list.

    function listAllRooms() {}

    ...

    DB.transaction (function (tx) {}
    tx.executeSql ("SELECT * FROM ROOMS, [], {}, function (tx, results)")

    for (i = 0; i< len;="">
    elName var = results.rows.item (i) .name,
    elID = results.rows.item (i) user.user;

    Item = document.createElement('div');
    item.setAttribute('data-bb-type','item');
    item.setAttribute ("data-bb-title', elName");
    item.innerHTML = 'Description here.';
    item.setAttribute ('data-bb-img', ' foo.png');

    Item.onclick = function() {bb.pushScreen ('showRoom.html', 'Show-Room', {id: elID}) ;};}

    Items.push (Item);
    }

    document.getElementById('rooms-list').refresh (items);
    (}, null);

    });
    }

    My problem is the bold red line. What happens is that each item links to the last point (last row of the table). I know it has something to do with the callbacks and synchronization but cannot for the life of understand me.

    My apologies for the ugly code and thanks in advance for the help.

    Karel

    In fact, I managed to make it work this way:

    item = document.createElement('div');
    item.setAttribute('data-bb-type','item');
    item.setAttribute('data-bb-title', elName);
    item.setAttribute('data-id', elID);
    item.innerHTML = "Description here.";
    item.setAttribute('data-bb-img','img/icons/item-dark.png');
    item.setAttribute('onclick', "bb.pushScreen('show.html', 'show', {type: 'item', id: " + elID + "})");
    

    Thanks for all your help!

  • White strip after rollover image centering

    Hey, Hi, Hello,

    Please, I have a few questions on my content in Adobe DW of centering. I have transferred the images from Photoshop to DW and do a card.

    www.kontado.EU

    But there are some difficulties with rollover image OR centering of the content - because I wanted to center the content in the middle of the page.

    When I use the tag < center > or < p align > tag, it's a white stripe when point your mouse on the image.

    I am a beginner so please, can you help me solve this problem?

    Thank you

    and Align are deprecated in modern code.  Which means that a lot of modern browsers don't support more.

    The PS is for images only.  Do not use PS to generate the code.  The code is too rigid and too unstable for use in the production sites.   It is only suitable for quick comps show the client until you rebuild your page layout in Dreamweaver.

    Start with one Starter pre-built CSS templates in Dreamweaver.

    File > new > templates starter...  See screenshot.  These layouts are all centered on wider screens.

    If you need a map image, use Hotspot of Dreamweaver Tools.

    Switch to the Design mode.

    Click on your image to the foreground.

    In the HTML (Ctrl + F3) Properties Panel, you will see tools hotspot - pointer, Rectangle, circle and polygon.

    Nancy O.

  • Select the list relative to the Position of region model

    Hi all

    XE SUMMIT 4.2 11.2

    I have a form that begins to fill up with buttons, from different actions that users want to perform on the data on the page.  So I have a number of buttons in the model of the region, they can choose amongst...

    I'd like replace the buttons with a drop-down select list and a GO button, allowing to submit or call a dynamic action based on the criteria...

    Ive looked around but can't see any reference or model how to add an element to the position of the region...

    If anyone has any ideas on how this could be done, Id be grateful...  IM assuming that you would have to replace the area and somehow the position in the select list.

    Kind regards

    Richard

    • Create a copy of the model region région StandardStandard + body inline.
    • Change the definition of the model of the new model:
      1. Change the element to span in div. uButtonContainer
      2. Replace the #BODY substitution string # by the substitution #SUB_REGIONS string #.
      3. Add the #BODY substitution string # to the position that you need among the positions button in the container button.

    #TITLE#

    #CLOSE##PREVIOUS##NEXT##DELETE##EDIT##CHANGE##CREATE##CREATE2##EXPAND##COPY##HELP##BODY#
    #SUB_REGIONS#
    • Create a new area of container HTML and assign it the new model Standard region + body inline .
    • Create the item in the selection list and the Go button in the new region of container.
    • Make your area form a subregion of the new area of container and change it to have model.
    • Add the following the page property CSS Inline style sheet:
    section.uRegion>div.uRegionHeading .uButtonContainer {
      display: table-cell;
      text-align: right;
      font-size: 0;
    }
    #P9_X_CONTAINER {
      display: inline-block;
    }
    

    "P9_X" by replacing with the name of the selection list item.

  • New list does not, wink-list of images only

    Hello team,

    So I will try to get the random passwords that are going in the VM window, I am commissioning, VIO 2.0 with Windows 2008, so we use in the controller, I use the CLI to the list of virtual machines but came across this:

    using a file rc creds, I have

    unset OS_SERVICE_TOKEN

    unset OS_SERVICE_ENDPOINT

    export OS_AUTH_URL = http://INTERNAL_VIP : 35357/v2.0

    Export OS_REGION_NAME = nova

    Export OS_TENANT_NAME = admin

    Export OS_USERNAME = admin

    Export NOVA_ENDPOINT_TYPE = internalURL

    Export OS_ENDPOINT_TYPE = internalURL

    Export CINDER_ENDPOINT_TYPE = internalURL

    Export OS_PASSWORD = $admin_password

    image eye-list call works fine

    List of users OpenStack works very well

    List of users Keystone works very well

    list of Nova FAILED

    User not allowed invalid ERROR / password

    I noticed in him debugs queries image brief HTTP loading list swing IP and Nova list queries HTTPS public IP to VIP, this is how it is supposed to work?

    In case anyone interested, to the list of nova for now one needs to use password - operating system, code does not have the password to the CLI prompt or the rc file.

    Cheers!

  • List of images of mobile db APEX

    I had a play with a system menu icon on apex mobile using a list template as described by Peter Raganitsch.

    Improve the theme mobile APEX & amp; #8211; Part 3 | agree with Oracle and APEX

    If, instead of using images of / i /, I wanted the database source images using apex_util.get_blob_file_src

    However the rendered output starts

    <img src="/i/apex_util.get_blob_file?
    

    If I run the following on the loading of the page

    $('img').each(function()  {
      $(this).attr('src', $(this).attr('src').substr(3));
    });
    

    I get the result I want but the console is still full of errors and I feel very dirty.

    What is a suggested method to display pictures of a report icon in the mobile interface?

    IE - similar to an iconic interactive report.

    Scott

    Scott

    The list template includes #IMAGE_PREFIX #:

    
    

    Should just be a case of creating the model without her.

  • Keep the images centered in Stop Motion?

    Hey all, I make a stop motion video and I was wondering if there was a way to keep a center point. In my case, a piece of paper. Here's what my project is:

    I recorded the music, now I'm going and shoot a video in front of a greenscreen. I edit the video in the first, key on the green in sequels, and then export that. Go back to the first for and I export images of 12 frames per second. So now I got the images, after photoshopping them in black and white with a half tone, I'm going to be print each frame and take pictures of them in different places.

    These pieces of paper with each image on this subject, I want to stay focused as possible throughout the video. Is there a way I can do it with a certain effect or technical change? is made in another program like after effects or using measures/batches to all photos at once in photoshop (if so, I'll ask there if you can help ) or does do everything with each picture of the document as centered as possible with the camera?

    Thanks for your time!

    If I have it working on my desk...

    I would like to start by creating a mask that marks my favorite

    alignment for images in the frame, put the mask on

    two layers, lock it and align the images layer on a sub.

    Edit:

    Also, I would do this in After Effects, instead of the first.

    PR is good for the implementation of your sequence, Ae better for compositing.

    Use Dynamic Link to send your Pr sequence to Ae and line up there.

  • Maybe you are looking for