Forum Stats

  • 3,827,608 Users
  • 2,260,798 Discussions
  • 7,897,314 Comments

Discussions

Positioning an image which is a link

Howard (... in Training)
Howard (... in Training) Member Posts: 905
edited Jul 8, 2013 2:53PM in APEX Discussions

Using Oracle 11.2, Apex 4.1.0.00.32, Windows 7 Enterprise, IE 8, Theme 17 Sapphire with unmodifed Reports Region and Standard Reports templates.

I have a report region of type SQL Query.  (I hope that's the correct way to identify it.)  I have controlled display width and padding for various items in the report using an HTML Expression like: [span style="padding: 8px 0px 0px 0px; width: 60px; display: block; white-space: normal;"]#RUN_DT#[/span] for the RUN_DT item/column.

Note: I've substituted [ ] for the &lt &gt brackets in the above.  This approach has worked well for all but the first column of the report which is the pencil-paper image for Edit.

Question:  What do I put in the Link Text or Link Attributes to position the "EDIT" image as I have positioned the other data items?  In Link Text, I have: '[img src="# IMAGE_PREFIX #e2.gif" padding="50px" border="0" ]'.  The link works but the image is not positioned on the line so as to align with the other items.  Of course, I have tried many variants there and in Link Attributes.  The only thing I am able to effect is image width.  I found no combination of "padding," "cellpadding," or "padding-top" which had an effect on position.  There is so little documentation on the Link Text field (that I am able to access), that it's hard to know what attributes can go there or how to format them.

Has anyone had success changing the position (up/down, left/right) of the edit image on the data line?

Thanks,

Howard

Tagged:

Best Answer

  • fac586
    fac586 Senior Technical Architect Member Posts: 20,980 Red Diamond
    edited Jul 8, 2013 10:17AM Answer ✓
    Howard(...inTraining) wrote:
    
    For all who have an interest, I have an example here:
    WS: APEX_EXAMPLES_01
    demo / demo
    Application 991201 , Page 1
    
    I am able to adjust the padding-top of regular items but have to use some other technique with items which are LINKS.  I tried putting "padding", "padding-top", etc. into the Link Text but with no effect.  This the wrong approach or the attibute is being overridden, I suppose.
    
    (bump - This is probably easy but how to "know" which particular technique will work escapes me.)
     

    Several issues there.

    On the APEX side of things, inline link styling and other attributes to be applied to column links are entered using the Link Attributes property in the Column Link section of the column attributes, not any of the other attribute/class/style properties on that page.

    In the CSS, center is not a valid value for <a href="http://reference.sitepoint.com/css/vertical-align">vertical-align</a>. The inconsistent value middle is used instead. However, both a and img are inline elements, so vertical-align: middle won't do what you want anyway. To achieve vertical centering of the link within the report row, this has to be applied to the report table cell using a style sheet in the page Inline CSS property:

    #bps-runtm .report-standard td[headers="ROWID"] {
      vertical-align: middle;
    }

Answers

  • fac586
    fac586 Senior Technical Architect Member Posts: 20,980 Red Diamond
    edited Jul 2, 2013 5:47PM

    As previously advised on numerous occasions, creating an example on apex.oracle.com is the best way to get help with visual formatting and layout problems.

    The link works but the image is not positioned on the line so as to align with the other items.

    Hardly surprising one would think considering that the top padding of one is 8px and that of the other is 50px?

  • Howard (... in Training)
    Howard (... in Training) Member Posts: 905
    edited Jul 3, 2013 2:39PM

    I see your point.  As I said "I found no combination of "padding," "cellpadding," or "padding-top" which had an effect on position."  I used 50px to show it had no effect -- the thought being that 8, 15 or 20px might be too small to notice.  As 50px had no effect, "padding" is not recognized there or is overridden by something else.  I'll try to get an example on apex.oracle.com today.  Thanks.

  • Howard (... in Training)
    Howard (... in Training) Member Posts: 905
    edited Jul 8, 2013 7:10AM

    For all who have an interest, I have an example here:

    WS: APEX_EXAMPLES_01

    demo / demo

    Application 991201 , Page 1

    I am able to adjust the padding-top of regular items but have to use some other technique with items which are LINKS.  I tried putting "padding", "padding-top", etc. into the Link Text but with no effect.  This the wrong approach or the attibute is being overridden, I suppose.

    (bump - This is probably easy but how to "know" which particular technique will work escapes me.)

    ??? Does editing not "bump" the thread in the new forum?  WOW!   Okay.

  • Howard (... in Training)
    Howard (... in Training) Member Posts: 905
    edited Jul 8, 2013 7:15AM

    (bump - Okay. Then this should move the thread to the top again.  -- See prior comment.)

    The image in column 1 is now centered at the top of the column. I want to know how to control the padding (margin?) above the image.

    Thanks,

    Howard

  • fac586
    fac586 Senior Technical Architect Member Posts: 20,980 Red Diamond
    edited Jul 8, 2013 10:17AM Answer ✓
    Howard(...inTraining) wrote:
    
    For all who have an interest, I have an example here:
    WS: APEX_EXAMPLES_01
    demo / demo
    Application 991201 , Page 1
    
    I am able to adjust the padding-top of regular items but have to use some other technique with items which are LINKS.  I tried putting "padding", "padding-top", etc. into the Link Text but with no effect.  This the wrong approach or the attibute is being overridden, I suppose.
    
    (bump - This is probably easy but how to "know" which particular technique will work escapes me.)
     

    Several issues there.

    On the APEX side of things, inline link styling and other attributes to be applied to column links are entered using the Link Attributes property in the Column Link section of the column attributes, not any of the other attribute/class/style properties on that page.

    In the CSS, center is not a valid value for <a href="http://reference.sitepoint.com/css/vertical-align">vertical-align</a>. The inconsistent value middle is used instead. However, both a and img are inline elements, so vertical-align: middle won't do what you want anyway. To achieve vertical centering of the link within the report row, this has to be applied to the report table cell using a style sheet in the page Inline CSS property:

    #bps-runtm .report-standard td[headers="ROWID"] {
      vertical-align: middle;
    }
  • Howard (... in Training)
    Howard (... in Training) Member Posts: 905
    edited Jul 8, 2013 2:57PM

    Thank you very much.  I found I could move the code from CSS into the HTML Header with the other formatting code.  Thus -

    #bps-runtm .report-standard td.data {  

      border-left: #9fa0a0 1px solid;  

      padding: 1px 1px 1px 1px;  

      font-size: 12px;

    }

    #bps-runtm .report-standard td[headers="ROWID"] {

      vertical-align: top;  /* when I specified "top" then I could use padding-top as a modifier */

      padding-top: 4px;

    }

    #bps-runtm td.data[headers="PROC_NM"] div {

       width: 100px;

       padding-top: 4px;

       white-space: nowrap;

       word-wrap: break-word;

    }

    . . .

    And one more interesting/unexpected point!  Values specificed for padding -- at least padding-top, which I checked -- are ADDITIVE.  I.e., the specific pading-top value (4px) for headers="ROWID" is added to the value specified (1px) for .report-standard td.data.  (Hard to tell with 1px but I used large values to verify this.) 


    Added: See clarification and correction to this in fac586's comment below.  Padding values are not "additive" for ROWID but they are for PROC_NM.

    Regards,

    Howard

    Howard (... in Training)
  • fac586
    fac586 Senior Technical Architect Member Posts: 20,980 Red Diamond
    edited Jul 8, 2013 1:08PM
    Howard(...inTraining) wrote:
    
    And one more interesting/unexpected point!  Values specificed for padding -- at least padding-top, which I checked -- are ADDITIVE.  I.e., the specific pading-top value (4px) for headers="ROWID" is added to the value specified (1px) for .report-standard td.data.  (Hard to tell with 1px but I used large values to verify this.)
     

    Padding values from different rules applied to the same element are not "additive". Padding obeys the normal inheritance/cascade/specificity rules. In this page the 4px padding value on the #bps-runtm .report-standard td[headers="ROWID"] rule overrides the 1px padding on #bps-runtm .report-standard td.data rule because it appears later. The padding applied is 4px, not 5px. This can easily be verified using the web inspector tool in any decent browser.

    Padding on child elements is "additive", in that the apparent offset of the element will consist of the padding applied to the element plus the padding applied to its parent element, and so on up the DOM (assuming padding is the only positioning factor involved). So in this page there is a 5px space before the PROC_NM div consisting of the sum of the padding applied to that element (4px) and the padding applied to its parent element (1px).

    Note that when positioning is applied using margins rather than padding, the situation does become more complex due to the likelihood of margins being collapsed.

  • Thanks for the correction.

    [ Ahh!  APEX, perhaps not unlike other web tools, seems so hard.  Just when you think you've got a Royal Fizzbin, it beats you up. ]

      -- For you young fellers out there, see:  http://icarly.answers.wikia.com/wiki/Defiine_royal_fizbin  and http://en.memory-alpha.org/wiki/Fizzbin

This discussion has been closed.