Usecase:
Consider a scenario where you are using an af:link component and would like to display an image for the icon. You would also like to stretch the image icon to fit the parent pane. As per the doc,
- A Link in a toolbar behaves as a toolbar child.
- A Link placed elsewhere on the page cannot be stretched by a parent layout component that stretches its children. e.g. panelStretchLayout, panelSplitter.
- A Link can have children via a context facet, but these children appear in a popup that has its own fixed size and is not effected by layout.
Pre-requisites:
JDeveloper 12.1.3.0.0
Steps:
- In this post, I am considering the link icon to be a part of a table's column. For this, I have taken an employee view and dropped it to the page. I have added an additional column as a link. This link may take you to another page/taskflow, but let us ignore that for now. The link is designed as an image with the help of icon property.
- In my sample, I have placed an image under a newly created folder called 'images' under resources. For demo purposes, I have used the same image for all rows of data.
- In the jspx page, select the link and from the properties inspector, select the image for the icon property.
- Now, on running the page, you will see that the table occupies some part of the screen and the remaining part is blank. Also, the images have not been rendered completely.
- Let us first stretch the table to display the complete image. To stretch the table to the full width of the screen, set the 'columnStretching' property to a column value. If you set it to 'last', the last column will be stretched to occupy till end of the screen. Set the property by selecting the table, and adding the property columnStretching="last".
- This will ensure that the image is fully visible. However, now on hovering over the column, you will notice that the link is available only for a part of the column where the image is present, and the rest is not clickable (rather not navigable).
- To fix this, we need to change the size of the icon image to occupy the full column. However, the icon image cannot be changed using size or width properties from the properties inspector.
- To workaround this issue, add a new css file, with the below entry. This will ensure that the width setting is applied only to images with <a> tag as parent.
@charset "UTF-8";
a > img{
width:100%;
}- To point to this css file, go to the jspx page and from the component palette, select CSS. The added css file should be present there. Drag and drop the css file to the page.
- Run the page.
- Voila! The link now stretches over the entire column and is clickable throughout. My sample doesn't look that neat, but I guess you get the idea!