cancel
Showing results for 
Search instead for 
Did you mean: 

How to position (center) a checkbox within a tableview

RoBu
Explorer
0 Kudos
693

Hi All,

I'm currently developing an application using a tableview iterator.

Two of the fields are displayed as a checkbox using the cl_htmlb_checkbox class.

The problem is that the check box displays as left justified within the field cell when it is displayed on the screen.

Does anyone know how to force a checkbox to be centrally justified within a field cell in a table view iterator?

IF_HTMLB_TABLEVIEW_ITERATOR~GET_COLUMN_DEFINITIONS:

  APPEND  INITIAL LINE TO  P_COLUMN_DEFINITIONS ASSIGNING <R>.

  MOVE:  'FRUEH'       TO <R>-COLUMNNAME,

         '100px'       TO <R>-WIDTH,

         'CENTER'      TO <R>-HORIZONTALALIGNMENT,

         'Frühstück'   TO <R>-TITLE.

  APPEND  INITIAL LINE TO  P_COLUMN_DEFINITIONS ASSIGNING <R>.

  MOVE:  'MITTA'       TO <R>-COLUMNNAME,

         'CENTER'      TO <R>-HORIZONTALALIGNMENT,

         '100px'       TO <R>-WIDTH,

         'Mittagessen' TO <R>-TITLE.

Thanks

RoBu di AQu

Accepted Solutions (1)

Accepted Solutions (1)

Ruediger_Plantiko
Active Contributor
0 Kudos

Roland,

the good thing about BSP is that you have the UI appearance (HTML, CSS, JS) under your control: I would suggest to use CSS in this case.

Try to assign the style "text-align:center" to the set of td's containing your checkbox.

This should help.

Regards,

Rüdiger

RoBu
Explorer
0 Kudos

Hello Rüdiger,

i use HTMLB:

<HTMLB:tableView id       = "TV_TRABZ"

                 table    = "<%=TRABZ%>"

                 iterator = "<%=ZIF_ITERATOR%>">

</HTMLB:tableView>

Where can I insert CSS-Style?

RoBu di AQu

Ruediger_Plantiko
Active Contributor
0 Kudos

Hi Roland,

HTMLB is only a tag library which aids you in producing HTML. In BSP views, you can always use plain HTML code in coexistence with BSP elements.

When you develop BSP's, you are web developer. HTMLB is only a support for creating HTML code, for example for creating all the <table>, <tr>, <td> HTML elements that are necessary for representing an ABAP internal table.

In your page, you surely have not only the <htmlb:tableView> snippet you showed here, but an entire document structure with <htmlb:document>, <htmlb:documentHead>, <htmlb:documentBody> and so on.

A stylesheet property usually will be placed in the <head> part of the HTML document. Which means here:

<htmlb:content ...>

  <hthmlb:document ... >

    <htmlb:documentHead ...>

        <style type="text/css">

             #TV_TRABZ td {  /* Use a selector for only the td's containing your checkbox here */

               text-align:center; 

               }

        </style>

    </htmlb:documentHead>

    <htmlb:documentBody>

...

    <htmlb:tableView id="TV_TRABZ" ...>

    </htmlb:tableView>

  </htmlb:documentBody>

  </htmlb:document>

</htmlb:content>  

But before applying this, please go in the source code of the rendered HTML page and check whether the <td> in question already has received the style="text-align:center", due to your setting in the table view iterator.

If yes, then the above proposal won't help you.

Regards,

Rüdiger

Answers (1)

Answers (1)

RoBu
Explorer
0 Kudos

This problem is only in Firefox.

In Internet-Explorer it is good:

RoBu di AQu