1 2 Previous Next 15 Replies Latest reply: Oct 17, 2013 11:13 AM by Sidney França RSS

    Change font size of display only item

    jfosteroracle
      Seems like it should be simple but does anyone know of a way to change the font size of the text for a display only item? I tried adding CSS in the 'HTML Table Cell Attributes' field', but it doesn't affect the text size.

      Thanks,
      John
        • 1. Re: Change font size of display only item
          fac586
          jfosteroracle wrote:
          Seems like it should be simple but does anyone know of a way to change the font size of the text for a display only item? I tried adding CSS in the 'HTML Table Cell Attributes' field', but it doesn't affect the text size.
          Full APEX version and theme?

          What CSS was added to the HTML Table Cell Attributes?
          • 2. Re: Change font size of display only item
            jfosteroracle
            Yes, sorry: Apex 4.0.2 - Theme 16

            I added this to the HTML Table Cell Attributes:

            style="font:10pt verdana;"

            Using Firefox Firebug I can see that the class in the CSS that is being applied is ' class="display_only" '
            • 3. Re: Change font size of display only item
              fac586
              jfosteroracle wrote:
              Yes, sorry: Apex 4.0.2 - Theme 16
              I'm unable to create any test cases using that combination at present, but this is a universal selector problem.
              I added this to the HTML Table Cell Attributes:

              style="font:10pt verdana;"

              Using Firefox Firebug I can see that the class in the CSS that is being applied is ' class="display_only" '
              There must be an inner element inside the table cell that the universal selector is matching on. What exactly is Firebug showing the contents of the cell to be?
              • 4. Re: Change font size of display only item
                rima
                John,

                try
                style="font-size: 0.9em !important;"
                it is quick and dirty but it should work.

                Regards,
                Richard

                -----
                blog: http://blog.warp11.nl
                twitter: @rhjmartens
                If this question is answered, please mark the thread as closed and assign points where earned..
                • 5. Re: Change font size of display only item
                  Mark M.
                  I've had good luck in adding HTML directly in the display only items as long as you do not choose the escape special characters option. You can then embed your HTML/style info directly in the value you're displaying.

                  Rgds/Mark M.
                  • 6. Re: Change font size of display only item
                    jfosteroracle
                    This is what it shows for that cell in Firebug:

                    <td align="left" rowspan="1" colspan="1">
                    <span id="P1042_EVENT_TITLE" class="display_only">Testng Again</span>
                    </td>

                    This is the font that is being used by that class:
                    * {
                    font-family: Verdana,Arial,Helvetica,Geneva,sans-serif;
                    font-size: 11px;
                    }

                    If I put the 'style="font:10pt verdana;"' in the 'HTML Table Cell Attributes', it shows up in Firebug, but it looks like gets overrulled by the 'class="display_only' above.
                    • 7. Re: Change font size of display only item
                      jfosteroracle
                      Mark, what do you mean, 'adding HTML directly in the display only items'. Do you mean in the item value itself? So if the field value was 'test' you would put '<span style="font:10pt verdana;">test</span>' ? I don't think that's what you mean. I wouldn't want to have to add that code to the values themselves.
                      • 8. Re: Change font size of display only item
                        Mark M.
                        Your two 'test' showed up identically, but I think you got my gist. You can embed HTML code directly in the value of your display_only item such as
                        <span style="font-size:72pt;color:red;font-weight:strong;">Hi Mom</span>
                        . If you're setting a display_only value from a query or other logic, you can also vary things like the color etc, right in your query. If you want every display_only item throughout your application to be styled this way, this, obviously, is not the way to go, but if you simply want to style a specific display_only item on a specific page, it's an option.

                        Rgds/Mark M.

                        (By the way, if you do want HTML code to show up as code and not HTML, you can enclose it in { code}blah blah blah{ code} (without the space between the { and code)

                        Edited by: Mark M. on Mar 15, 2012 11:42 AM to add note at the bottom
                        • 9. Re: Change font size of display only item
                          fac586
                          jfosteroracle wrote:
                          This is what it shows for that cell in Firebug:
                           
                          <td align="left" rowspan="1" colspan="1">
                          <span id="P1042_EVENT_TITLE" class="display_only">Testng Again</span>
                          </td>
                          This is the font that is being used by that class:
                          * {
                          font-family: Verdana,Arial,Helvetica,Geneva,sans-serif;
                          font-size: 11px;
                          }
                          If I put the
                          style="font:10pt verdana;"
                          in the 'HTML Table Cell Attributes', it shows up in Firebug, but it looks like gets overrulled by the 'class="display_only' above.
                          *POST CODE WRAPPED IN <tt>\{code}...\{code}</tt> TAGS!*

                          The universal selector matches the <tt>&lt;span id="P1042_EVENT_TITLE"...&gt;</tt> element, overriding any styles added to the <tt>td</tt>.

                          Add a mini style sheet to the page HTML Header that targets that item:
                          {code}
                          <style type="text/css">
                          #P1042_EVENT_TITLE {
                          font-size: 10pt !important;
                          }
                          </style>
                          {code}
                          • 10. Re: Change font size of display only item
                            jfosteroracle
                            Using the Pre-element text for font size does not work for display_only. Apparently the 'class="display_only"' is happening 'inside' the display_only item. In other words, class="display_only" cancels out, or overrides whatever I put in pre-element text or the HTML Table Cell attributes field.
                            • 11. Re: Change font size of display only item
                              fac586
                              jfosteroracle wrote:
                              Using the Pre-element text for font size does not work for display_only. Apparently the 'class="display_only"' is happening 'inside' the display_only item. In other words, class="display_only" cancels out, or overrides whatever I put in pre-element text or the HTML Table Cell attributes field.
                              Yep. Realised that and accordingly came up with Plan B above.

                              Guess you're seeing why I've been ranting against APEX themes using the universal selector all these years?
                              • 12. Re: Change font size of display only item
                                jfosteroracle
                                All of your replies were helpful and I will mark them as such. Your replies led me to this idea - Looking at the code using Firebug, I determined that the APEX internal CSS that was determining the font size for display_only items was, "class="display_only". So in the region where I have my items I added this to the Region Header:

                                <style>
                                .display_only {font:10pt verdana;}
                                </style>

                                That did the trick! using the HTML Table Cell Attributes field or 'Pre-element' text like you would normally use did not work for display_only items.

                                I better write this one down.... Thanks for all of your help!

                                John
                                • 13. Re: Change font size of display only item
                                  madamovi

                                  Here is a nice workaround.

                                   

                                  Set the item to Text. Set the "

                                   


                                  • 14. Re: Change font size of display only item
                                    jfosteroracle

                                    Very nice.  Good idea.

                                    1 2 Previous Next