8 Replies Latest reply: Apr 12, 2013 6:33 AM by pam499057 RSS

    theme 25 formatting

    pam499057
      I switched themes from 13 to 25 in version 4.2. I have a textbox with a button next to it. When the user clicks the button, a modal window of data displays.
      Question: My textbox has a label above the field instead of to the left. The button is on the same row as the label instead of the box.

      How do I get the button to sit next to the textbox and not the label?????
        • 1. Re: theme 25 formatting
          kvlek
          Hi,

          As far i can see your button is in an column next to the label and text-area.
          you could add the following code to the Column Attributes from the button.
          style="vertical-align: bottom;"
          Regards,
          Kees Vlek
          -----
          <tt>Company: http://www.orcado.nl
          Blog: http://www.orcado.nl/blog/blogger/listings/69-kvlek
          Twitter: http://www.twitter.com/skier66</tt>
          If the question is answered please change it to answered and mark the appropriate post as correct/helpfull.
          • 2. Re: theme 25 formatting
            pam499057
            [http://apex.oracle.com/pls/apex/f?p=39948:2:11644482675857:::::]

            I created a sample page on oracles apex site.
            Username:pamratledge@comcast.net
            Password:whiskers

            I added - style="vertical-align: bottom;" as button attribute

            doesn't help.

            Really don't understand how the theme 25 layout works.
            To me if you put all the fields in column 2 they should line up.
            But if you put the label above the field instead of to the left, the first field does not line up with rest of page.

            I've tried several combinations for button but can't get next to textbox vs the label.
            • 3. Re: theme 25 formatting
              kvlek
              If you can give the credentials to login to the workspace i will look in to it.

              Kees
              • 4. Re: theme 25 formatting
                pam499057
                Workspace is whiskers
                Username is pamratledge@comcast.net
                Password is whiskers

                I have lots of other apps as this is where I learned to use apex.
                The app with theme 25 is testtheme25.

                Thank you so much for your help. Formatting this theme is most frustrating.
                • 5. Re: theme 25 formatting
                  kvlek
                  Hi,

                  I took a look at it and sorry but can not find a good solution.
                  I have not worked with the responsive design yet.

                  You could get the button down with the next css code in the button ( i put it in there for now)
                  position: relative;
                  top: 21px;
                  But this will not work well in an responsive design, because when you make the browser smaller the button will go to the next line and will then give a line spacer of 21 px.

                  Regards,
                  Kees Vlek
                  -----
                  <tt>Company: http://www.orcado.nl
                  Blog: http://www.orcado.nl/blog/blogger/listings/69-kvlek
                  Twitter: http://www.twitter.com/skier66</tt>
                  If the question is answered please change it to answered and mark the appropriate post as correct/helpfull.
                  • 6. Re: theme 25 formatting
                    863020
                    Hi Pam

                    I have taken the liberty of using the login credentials below and altered the layout in your application. Is this new layout the UI you were hoping to achieve?

                    Theme 25 can be a bit confusing as it uses
                    <div> 
                    tags and "containers". The name field needs a container that has 4 columns for the label, the input field itself, the help button and an hidden item for using the developer toolbar "Show edit links" option. Your button then needs a new container that has only one visiible columnc (and one hidden one for the show edit link). I have amended the set up for these two fields to acheive this. The underlieing html and css looks like this:-
                    <div class="apex_cols apex_span_4 ">
                       <div id="P2_FIRST_NAME_CONTAINER" class="fieldContainer horizontal rightlabels">
                          <label class="uOptional" for="P2_FIRST_NAME">First Name</label>
                          <div class="fieldControls">
                             <input type="hidden" value="16096134925042071315" name="p_arg_names">
                             <input id="P2_FIRST_NAME" class="text_field" type="text" maxlength="20" size="30" value="" name="p_t02">
                             <a class="eLink" href="javascript:apex.navigation.popup.url('f?p=4000:371:112875367964325:::371:P371_ID,FB_FLOW_ID,FB_FLOW_PAGE_ID:16096134925042071315,39948,2');" title="Edit">
                             <button id="hb_P2_FIRST_NAME" class="uButton iconButton iconOnly altButton help itemHelpButton" title="Help Text" type="button" onclick="uShowItemHelp('P2_FIRST_NAME');return false;" style="display: inline-block;">
                             <span>
                             </button>
                             <span class="uItemHelp" data-item-id="P2_FIRST_NAME">No help available for this page item.</span>
                           </div>
                        </div>
                    </div>
                    <div class="apex_cols apex_span_1 ">
                       <button id="P2_BUTTON" class="uButton iconButton " type="button" onclick="alert('Pushed Button');">
                       <span>
                       </button>
                       <a class="eLink" href="javascript:apex.navigation.popup.url('f?p=4000:372:112875367964325:::372:P372_ID,FB_FLOW_ID,FB_FLOW_PAGE_ID:16096326921171033975,39948,2');" title="Edit">
                       <img class="eLink" alt="Edit" src="/i/e.gif">
                        </a>
                    </div>
                    Hope that helps

                    Regards

                    Paul

                    Edited by: PaulC on 12-Apr-2013 04:13

                    Edited by: PaulC on 12-Apr-2013 04:14

                    Edited by: PaulC on 12-Apr-2013 04:17
                    • 7. Re: theme 25 formatting
                      pam499057
                      Thanks for trying Kees. Appreciate the effort.
                      • 8. Re: theme 25 formatting
                        pam499057
                        Paul

                        Yes this is the layout I was hoping to achieve. Thanks so much for your help. I will have to study this some
                        to understand what you did. WOW! This is a lot of work just to position two fields next to each other.
                        Guess I need to study up on Grid Layout.