GUI styling question


itimpi

3 posts in this topic Last Reply

Recommended Posts

I have a case in the GUI where I have two sets of potential input fields that are shown/hidden according to the setting of another field.   The JavaScript to handle the show/hide is working fine but there are two little things that are causing me a problem:

  • Altering the Text field does not activate the Apply button.
  • The styling of the Text field does not seem to be the same as the other text fields on the same form where I am not using the show/hide technique.  In my case it has a white background whereas the others have a grey background.

I have attached two screenshots that show what I am seeing.   They show that the 'Custom' fields have a white background, whereas the 'temperature fields have a grey background.

 

I would be very grateful if someone could point out what I need to do to correct this?  I suspect the answer is simple once you know what it is :(

 

The fragment from my .page file that is exhibiting these symptoms is as follows:

Increment resume time:
: <span id="customResume">
  <input type"text" 
         size='1' class='narrow'
         name="parityTuningResumeCustom"
         value="<?=$parityTuningCfg['parityTuningResumeCustom']?>"
         onchange="updatedCustom(this.form)">
  &nbsp; entry in <a href="https://en.wikipedia.org/wiki/Cron#Overview" target="_blank">crontab</a> format
</span>
<span id="dailyResume">
  <select name="parityTuningResumeHour" 
          size='1' class='narrow'
          onChange="checkTimeRange(this.form)">
     <?for ($d=0; $d<=23; $d++):?>
         <?=mk_option($parityTuningCfg['parityTuningResumeHour'], strval($d), sprintf("%02d", $d)) . "\n"?>
     <?endfor;?>
  </select>
  <select name="parityTuningResumeMinute" 
          size='1' class='narrow'>
    <?for ($d=0; $d<=55; $d+=5):?>
      <?=mk_option($parityTuningCfg['parityTuningResumeMinute'], strval($d), sprintf("%02d", $d)) . "\n"?>
    <?endfor;?>
  </select>
  &nbsp;&nbsp;HH:MM
</span>

Maybe I should be using some other technique other than the <span> tags around the two options?

 

shot1.jpg

shot2.jpg

Link to post
36 minutes ago, bonienl said:

Perhaps a typo (missing equal sign), but it needs to be


<input type="text"

 

Thanks - that was it - adding the '=' gave me the expected behaviour.   I was right in that the answer would be easy when spotted :)  

 

I think that I was being misled by the fact that otherwise the input box was behaving exactly as I expected in that I could enter values and they got saved if I pressed 'Apply'.   In theory the default type for <input> is meant to be text, but I have just checked and if you completely omit the 'type' attribute you also get the behaviour I described so it needs to be explicitly stated to keep the GUI code happy.

 

It is a good job that I never had to earn my living by being a proof-reader :)

 

Edited by itimpi
Link to post

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.