3 Replies Latest reply: Sep 8, 2011 2:53 AM by fac586 RSS

    Theme 23: how to remove vertial gap between list items

    343460
      Hello,
      I used theme 23 in 4.1, and create HTML region with some text items
      My prob is the vertical gap between select list items too high,
      Please help me to decrease the gap
      Thank you.
        • 1. Re: Theme 23: how to remove vertial gap between list items
          ShakeebR
          Hi there,

          Can you please provide a screenshot of this issue? It will better help me understand the problem and come up with some kind of solution.

          Thanks!
          • 2. Re: Theme 23: how to remove vertial gap between list items
            TexasApexDeveloper
            Modify the CSS associated with theme..

            Thank you,

            Tony Miller
            Webster, TX
            • 3. Re: Theme 23: how to remove vertial gap between list items
              fac586
              hlthanh wrote:
              I used theme 23 in 4.1, and create HTML region with some text items
              My prob is the vertical gap between select list items too high,
              Please help me to decrease the gap
              Please help us to help you. We can best help with problems of this type if you reproduce the problem on apex.oracle.com, and you tell us which browser(s) and version(s) you are using. This allows us to see what you are seeing.

              Theme 23 is clearly marked as using HTML5 and CSS3. Why do you perceive a requirement to use HTML5 and CSS3? Only the latest browsers support a significant number of these features. If you and your users are not using a browser version that supports HTML5 and CSS3 features used in theme 23 then there may be problems [1]. Essentially this means that there is no benefit to using this theme if you're not using Safari 5, an up-to-date version of Chrome, Firefox 4+, Opera 11, or (possibly) IE9.

              Looking at it in Firefox 3.5.7 and IE7 (all I have available at this location) the CSS rule:
              table.formlayout td select.selectlist {
                margin: 6px 0 7px;
              }
              appears to be the cause of the issue. This is decidedly not CSS3, and I can't see any reason for doing this other than it being intentional that select lists be offset by more white space than other form controls. No idea why this would be the case. (I'd like to see it in more modern browsers just to see if there is any CSS3 stuff related to this going on...)

              This extra space can be eliminated by overriding the rule later in the cascade:
              table.formlayout td select.selectlist {
                margin: 0;
              }
              [1] Not the least of which is we don't know exactly what HTML5 and CSS3 features theme 23 is using.