Strange column header width behavior

Hi,
I am using jdev 11.1.2.4.
I have a af:table and some colums look like this:
<af:column sortProperty="EmpName2" sortable="false"
                     inlineStyle="border-style:solid; border-color:#eceef2; border-width:medium; background-color:White;"
                     headerText="#{res.empName}" width="55px" id="c16">
                        <af:commandLink text="#{row.EmpName2}" id="ot24"
                                    action="#{viewScope.workplanLimitsAndRequestsByShift.empWorkplanLimits2}"/>
   </af:column>
After I added the border, the width of the column data is wider then then width of the column header!
It looks like the border on the data part is "outside" the cell and on the header part is "inside" the cell.
Any suggestions?
Thankn you,
Nina

Hi,
I am using interner explorer 8 (our clients also use 9 and 10).
My table is defined "editAll"
Nina

Similar Messages

How to fix the column header width in BEx or WAD

hi there!
how to fix the column header width in BEx or WAD. because, depends on the column data, the column size varies. i want to fix the size so that i can maintain the consistency through out the report.
thanks!
Vam.

Dear Vam,
you can easily do that with css, search the source code of the executed web template for the td tag which is around your coloumn header, remember the style sheet class name it is ´displayed as class= in the td tag.
Now you can add this code the beginning of your web template:
</style>
This will only work in Web.
Regards
Marcus

Column Header width

Hi,
I'm working on a tableview but if my table is displayed without any rows... all the column headings are partially displayed, e.g. the column header text is "Employee" but it is displayed as "Em...", The column with automatically expands when there is value in the particular column. I tried to used columnWidth attribute but its not working. here is the code extract of the tableview.
      <htmlb:tableView id              = "list"
                       emptyTableText = "No result found!"
                       selectionMode   = "MULTISELECT"
                       sort            = "SERVER"             <%--or APPLICATION --%>
                       onHeaderClick   = "myHeaderClick"
                       onNavigate      = "onMyNavigate"
                       onRowSelection = "onMyRowSelection"
                       <u>columnWidth     = "100%"</u>
                       visibleRowCount = "<%= lepp %>"
                       visibleFirstRow = "<%= iv_list_nav_index %>"
                       width           = "100%"
                       table           = "//model/mt_list"
                       headerVisible   = "<%= IV_HEADER_VISIBLE %>"
                       iterator        = "<%= io_iterator %>" />

Hi Asim,
you have something wrong with the variables you are passing. Try the following ideas.
1. Replace all the variables with hardcoded values, for example
     visibleRowCount = "20"
     visibleFirstRow = "1"
2. Remove the iterator attribute to see if your iterator has been incorrectly coded.
This code should work fine.
<%@page language="abap" %>
<%@extension name="htmlb" prefix="htmlb" %>
<%
data itab type table of sflight.
select * from sflight into table itab.
%>
<htmlb:content design="design2003" >
<htmlb:page title="Test tableView" >
    <htmlb:form>
      <htmlb:tableView id              = "list"
                       emptyTableText = "No result found!"
                       selectionMode   = "MULTISELECT"
                       sort            = "SERVER"
                       onHeaderClick   = "myHeaderClick"
                       onNavigate      = "onMyNavigate"
                       onRowSelection = "onMyRowSelection"
                       columnWidth     = "100%"
                       visibleRowCount = "20"
                       visibleFirstRow = "1"
                       width           = "100%"
                       table           = "<%= itab %>"
                       headerVisible   = "TRUE" />
    </htmlb:form>
</htmlb:page>
</htmlb:content>
Use it as a starting point for your layout page and gradually add your specific stuff.
Cheers
Graham

How to fix the table column header and resize the width of a table column?

Hi all,
I have the following two requirements,
1) I need to wrap the table column header into two rows. I mean the header must be displayed in two rows.
2) I need to to able to resize the width of the column. i.e The user should be able to drag the column width according to his requirement.
Is this possible. Any help would be appreciated!
Regards
Kishan

Hi Kishan,
Refer to these links.They may ne useful for you.
https://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/80d81237-b780-2a10-d398-cc33af6bd75c
https://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/ded11778-0801-0010-258f-ac3b9408a194
https://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/30291df2-b980-2a10-0884-839c4f7f147e
Regards,
Sumangala

How to set column width based on header width?

I have a column that will only hold 1 character. This is good, but I want the Column width to match the column header.
For example,
Currently I get:
select * from table;
I NAME
1 ROBERT
The problem is, I want the Column header spelled out (in this case it's just ID)
ID NAME
1 ROBERT
Better Yet,
if i did:
select ID "ID NUMBER", NAME "FIRST NAME" from table;
I'd like to see:
ID NUMBER FIRST NAME
1 ROBERT
(Centering the ID within the Column width would be good too, but that is "gravy")
Any thoughts? I've been trying:
COLUMN ID FORMAT A10 (which obviously didn't work!)
Thanks,
KSL.
Edited by: leonhardtk on Aug 23, 2010 11:55 AM

If you use tags it'll be easier to see what formatting effects you're talking about.
Does <a href="http://download.oracle.com/docs/cd/E11882_01/server.112/e10823/ch_six.htm"><tt>col id head "ID Number" format a9</tt></a> do what you want?
Edited by: William Robertson on Aug 23, 2010 6:50 PM

AUTO_RESIZE jtable set column width by column header

Do I need to use one of the AUTO_RESIZE methods, the TableColumnModel, or another method in order to set the default width for a column based on the width of the column header.

This is a simple question with an answer. In a JTable, how do you set the width of a column depending on the width of the column header?

Problem with Page header width when column is hidded

Hi All,
am using SSRS-2008 R2 version.
i had an issue width Page header width when am hiding column. Please find the below screen shoot for reference.
Here , there is an audit parameter which contains a and b values respectively.
If Audit= a then i need to hide the State and City column . So, for that i have written following expression[ =Parameters!Audit.Label="a" ] and its working fine.
But, if see the screen shoot when columns are hiding then some space is coming in that column which is deviating from Page header width.
Is there any option to increase the remaining column width when these 2 columns are hidden or is there any way to reduce the page header width according to report columns width. Can you please guide me any one.
Thanks in advance.
bala krishna

Hi bala,
According to your description, you have a report with a textbox in its page header. You have set some column visibility in tablix based on the parameter selection. Your problem is, when you hide columns, the textbox remains top right in the page header.
Now you want to make it aligned with the tablix. Right?
In Reporting Service, we can’t reduce the page header width or increase those remaining columns width based on the parameter selection (or columns visibility). And we can’t keep the tablix always top right because we only have top and left to determine the
location of a tablix/textbox. For your requirement, it doesn’t have a complete solution to achieve either of your two options. However, we find a workaround for you. In this scenario, we can use two textboxes in page header. Put one in top right. Put the other
textbox at an appropriate position when columns are hidden. Then put conditional expression into textbox for text displaying based on parameter selection.
Ps: We don’t set the visibility of textbox because the space of textbox will be removed if it’s hidden, that may make one textbox float moving when the other is hidden.
We have tested this case with sample data in our local environment. Here are steps and screenshots for you reference:
1. In our sample report, we set Amt1 column hidden when selecting “a” in parameter. Put expression into textbox.
A: =IIF(Parameters!ReportParameter1.Value="a","header info","")
B: =IIF(Parameters!ReportParameter1.Value="b","header info","")
2. Save and preview. It looks like below:
If you have any question, please feel free to ask.
Best Regards,
Simon Hou

Excel like 'Freeze column header' functionality in sharepoint OOB list view webpart

Hi,
I have OOB external list dropped on a page as listview webpart. It contains many records and hence while scrolling down headers are no available, hence it should freeze all column headers while scrolling down the page. Its directly dragged and dropped
on site page hence no server side formatting can be done.
Is there any way we can apply some client side script to freeze column headers to listview webpart while scrolling down? or any settings that can be done to acheive this?
Thanks in advance.
Regards,
Rahul

Hi Rahul,
Normal techniques for freezing the header row of an HTML table tend to fall short when it comes to SharePoint 2010 lists due to the lack of THEAD elements.
You can try something like this, although you may want to test it in various browsers in case the column heading alignment is off.
<style>
.ms-viewheadertr{background-color:white;}
</style>
<script>
/* wrap the table in a div, set its height, give it scrollbars, and move it down */
var myTable = document.querySelector(".ms-listviewtable");
var wrapperDiv = document.createElement('div');
wrapperDiv.setAttribute("ID","FreezePaneWrapper");
wrapperDiv.setAttribute("style","OVERFLOW: auto; HEIGHT: 400px; padding-top:38px;");
wrapperDiv.appendChild(myTable.cloneNode(true));
myTable.parentNode.replaceChild(wrapperDiv,myTable);
/* Freeze the header row and move it up*/
var headerRow = document.querySelector(".ms-viewheadertr");
document.getElementById("FreezePaneWrapper").style.width = "" + headerRow.scrollWidth + "px";
headerRow.style.width = "" + headerRow.scrollWidth + "px";
headerRow.style.position = "absolute";
headerRow.style.top = ""+(headerRow.offsetTop-39)+"px";
/* Tell the header's columns to be the same width as the cells in the first "alternating" row */
var columns = document.querySelector("table.ms-listviewtable tr.ms-alternating").querySelectorAll("tr>td");
headers = document.querySelectorAll("tr.ms-viewheadertr th");
for(var i = 0; i < headers.length; i++){
if(columns[i].scrollWidth > headers[i].scrollWidth){
headers[i].style.width = ""+columns[i].scrollWidth + "px";
}else{
columns[i].style.width = ""+headers[i].scrollWidth + "px";
</script>
Edit: Also, you may want to inspect the HTML attributes on the external list view to be sure the class names match up with the querySelector parameters above. Specifically, the table should have a class of "ms-listviewtable", the header row should
have a class of "ms-viewheadertr", and rows of alternating background color should have a class of "ms-alternating".
If any of those are different in your case, you may be able to adjust the above code accordingly.

Passing prompt value to column header

Hi experts
I'd like to change the column header dynamically.
the report is using presentation variable so it's displayed after the user had selected a value in the dashboard prompt and clicked on go.
I'd like to have in the column header the value that the user had selected in the dashboard prompt.
Is there anyway to do that??
Regards

Hi,
Yes. you can do that by creating presentation variable.
What you have to do is , create the presentation variable like LOCATION_NBR in the prompt, like this you can create as many as you want to display it in the header.
The next step is to display the value the user selects in the prompt that should display in the header, for that , you can create narative and like the following things and achieve it.
<table>
<tr>
<td bgcolot ="#00080" width="1500" height="25" align="center">
The location No is @{LOCATION_NBR}
</td>
</tr>
</table>
Since we define the presentation variable in Prompt and use it narative view we able to display the header based on the customer choose it from prompt
I hope the above explanation will resolve your requirement
Regards
Raj

How to change the column heading as the column changes

dear memebrs,
Take an example fo the table EMP. I need to create a report whose parameters are the table column names. so depending on the parameter(which is the column name) the report o/p changes.
so i am dynamically selecting the table column names and getting the o/p. The problem is when the column changes the heading of it in the report o/p is not changing.
we have to use format trigger for this, but i am not sure what code should we write in the format trigger of the boiler plate text of the column heading , such that it changes in accordance with the input which is nothing but column name.
for ex: If i choose EMPNO as the parameter then my column heading should become Employee Number and so on.......
your comments are welcomed
regards
sandeep

you can use a formula column of datatype character and of any width needed instead of a boilerplate text for the heading name.
In the formula column you can write code like below
IF :P_COLUMN_NAME = EMPNO THEN
return('Employee Number');
ELSIF :P_COLUMN_NAME = SAL THEN
return('Salary');
END IF;
where P_COLUMN_NAME the name of the column selected dynamically(i.e. the parameter).

Af:clientlistener not working in af:column header

Hi I am using jdeveloper 11.1.1.5.0 and my browser is IE 8.
i have added client listener property in af:column to show the tooltip message on 'mouseover' action. This property is working fine If i am using inside the af:inputDate components. but, same clientlistenr is not working inside the table in column.
the Working Code is : -
<af:resource type="javascript" >
function showPopupFromAction(actionEvent)
actionEvent.cancel();
var eventSource = actionEvent.getSource();
var popup = eventSource.findComponent("popup");
popup.show({align:AdfRichPopup.ALIGN_AFTER_START, alignId:eventSource.getClientId()});
</af:resource>
in client listener method is called in below componemnts:-
<af:inputDate value="#{bindings.dateField.inputValue}"
autoSubmit="true" columns="8"
inlineStyle="padding-left:10px" partialTriggers="afDtId"
required="#{bindings.dateField.hints.mandatory}"
shortDesc="Searches the dateField" id="afDtId"
binding="#{pageFlowScope.commonBean.afDtBind}"
valueChangeListener="#{pageFlowScope.commonBean.valueChangeOfdateField}">
<f:validator binding="#{bindings.dateField.validator}"/>
<af:convertDateTime pattern="#{bindings.dateField.format}"/>
<af:clientListener type="mouseOver" method="showPopupFromAction"/>
</af:inputDate>
But, Inside the column not working,
<af:column sortProperty="dateField" sortable="true"
headerText="dateField" width="85px"
id="c2">
<af:inputDate value="#{row.bindings.dateField.inputValue == null ? 'N/A' : row.bindings.dateField.inputValue}" readOnly="true"
label="#{bindings.commonListTable.hints.dateField.label}"
required="#{bindings.commonListTable.hints.dateField.mandatory}"
shortDesc="#{bindings.commonListTable.hints.dateField.tooltip}"
id="id2">
<f:validator binding="#{row.bindings.dateField.validator}"/>
<af:convertDateTime pattern="#{bindings.commonListTable.hints.dateField.format}"/>
<af:clientListener type="mouseOver" method="showPopupFromAction"/>
</af:inputDate>
</af:column>
And Table property is :
<af:table value="#{bindings.commonListTable.collectionModel}" inlineStyle="width:1186px;border:none;background:rgb(243,243,243);margin-left:2px;"
var="row" styleClass="adSeaAccT1"
emptyText="#{bindings.commonListTable.viewable ? 'No data to display.' : 'Access Denied.'}"
rows="#{bindings.commonListTable.rangeSize}" fetchSize="#{bindings.commonListTable.rangeSize}"
autoHeightRows="10"
rowBandingInterval="0"
selectedRowKeys="#{bindings.commonListTable.collectionModel.selectedRow}"
selectionListener="#{bindings.commonListTable.collectionModel.makeCurrent}"
rowSelection="single" id="srcTbId" varStatus="tblStats">
Edited by: user8739990 on Jan 31, 2013 8:37 PM

For defining a tooltip message on af:column, you can use the below code:
In the header facet of af:column add an output text with value same as column header Text. Provide the tooltip message in the shortDesc property.
<af:column sortProperty="EmployeeId" sortable="true"
                 headerText="#{bindings.Employees.hints.EmployeeId.label}"
                 id="c4" shortDesc="Employees">
        <af:outputText id="ot5" text="#{row.EmployeeId}">
        </af:outputText >
        <f:facet name="header">
          <af:outputText value="EmployeeId" id="ot12" shortDesc="Employee"/>
        </f:facet>
      </af:column>Hope it helps.

IR column Header value not displayed entirely during filteration

I have a IR, when I click any column Header and it shows the list of values as a dropdown.
some of them (which are larger) get cut off.. means the the entire content/value are not displayed within the dropdown. [width of dropdown is fixed and no of characters in the content/value is more..]
how can we fix this?
Also.. is there any we can increase the width of the Select List window when we click any column header in IR.
Thanks,
Deepak
Edited by: DeepakJ on Sep 15, 2011 4:08 PM

Hi,
jQuery is not included to Apex 3.2 by default.
If you have not include jQuery library's to e.g. your page template or page header, then it is not "installed".
You can run your app and inspect HTML source to be sure.
You can download jQuery and jQuery UI and place files to your HTTP server folder. Then load those in e.g. page template header.
Or use jQuery files from Google by placing to page template header.
<link type="text/css" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/redmond/jquery-ui.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>Regards,
Jari

Setting field header width in table control

I have created a table control by using the wizard and i am populating my internal table data in to this.
Here i have small issue.
There are two fields called recoverable, identifiable with char (1).
These two field headers are displayed as R, I on the table control.
Is there any way that i can adjust the field width to accomodate the header.
points will be awarded immediately.
Thanks

In SE51 (Screen Painter), select/click-on the field (not the column header).
Press F2 (to get the Properties window) and set the Visible Length to a larger number. Save and activate the screen.

Get clicked column header not working

Here's what I'm trying to do:
Have a multi-column listbox of elements. Allow the user to select a few rows he is interrested in (and the become highlighted). Allow sorting of the listbox by clicking on the column headers.
I've got the listbox populating fine, if nothing is selected, the sorting works fine (event structure based on mouseup event of the multi-column listbox, calling to the "get clicked column header" invoke node method sorts the data. The part that is not working is that If the user has elements selected, sorts the listbox, the same elements are selected (not the same rows, but those same elements in whatever row they ended up after being sorted).
What happens is if I select a few rows in the listbox (listbox configured for 0-N elements selectable, highlight entire row), and then click on the column header, the event structure fires off a value change event for the listbox and changes to no elements selected. if I then click the column header again, it fires off the mouse up event and I get the sorting, but now none of the rows are selected. Weird thing is that first time I click the column header and it fires the value change event, a call into get clickced column header returns negative value so it won't tell me which column header the user clicked to "empty" the selection.
Bugger!!!! doesn't work how I want it to.
Funny thing is if I change the listbox over to a 1-N elements selectable, and then select a few rows, and then click on the column header, the event structure fires off the mouse up event and I get the sorting and re-selecting exactly as I would expect.
What's the deal here?? is this a bug, or expected behavior. If it's expected, it would be nice if it were a little more consistent between the different types of listboxes. Also, any good suggestions as to how to allow users to have 0-N selected elements, and be able to sort the listbox and keep the selected rows selected?

Sounds annoying. Here is a variation of my goto method for these types of problems:
Use the MouseDown? event to catch important info like the old value.
Restore the old value at the end of the Mouse Up event.
Some details, like making sure that the down and up clicks are in the same cell.
Use Defer Updates to prevent flashing.
One of many kluges I have around for the MC Listbox....
Attachments:
MCListboxKluge.vi ‏20 KB

Table css column-header text color not working

When setting
-fx-text-fill: red;
in a css table, it does not change the header to tex to red. Is there another value? .table-view .column-header {

You have to override the following from the caspian.css:
.table-view .column-header {
    -fx-text-fill: -fx-selection-bar-text;
    /* TODO: for some reason, this doesn't scale. */
    -fx-font-size: 1.083333em; /* 13pt - 1 more than the default font */
    -fx-size: 25;
    -fx-border-style: solid;
    -fx-border-color:
          Inner border: we have different colours along the top, right, bottom and left.
          Refer to RT-12298 for the spec.
        derive(-fx-base, 80%)
        linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%)
        derive(-fx-base, 10%)
        linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%),
        /* Outer border: */
        transparent -fx-table-header-border-color -fx-table-header-border-color transparent;
    -fx-border-insets: 0 1 1 0, 0 0 0 0;
    -fx-border-width: 0.083333em, 0.083333em;
.table-view .column-header-background {
    -fx-background-color: -fx-body-color;
    -fx-padding: 0;
}

Strange column header width behavior

Similar Messages

Maybe you are looking for