NetWebYear Planner Alignment

[GordonF]

Can anyone help with correcting the vertical alignment of the planner entries relative to the time cells on the left.

I've attached an image from the hotdates example (No. 12), I've forced the event to display at the very left just to highlight the issue.

As you can see the event starts and ends lower than the corresponding time row boundary, also the click to insert areas are similarly offset, meaning if a user clicks in the top few pixels of a time row they actually get a record start time for the time cell before. The effect changes a little with the theme used but it is always there, using the base theme (which I do in my app) the date column headers are partially covered by an event in the first time slot.

I've also attached an image with one of the date/time click rows (08:35) bordered in blue to clarify the issue.

Any help would be greatly appreciated as I have used the planner to create a very useful appointment book and this is the final refinement I need.

Gordon

[jking]

Gordon,

    I'm working on a new project today and started testing with Example app 12 using the base theme.  I see something similar, see image sample.png.  In opening the Chrome Developer Tools, it looks like the class 'planner-header-names-text' might need adjusting (image sample2.png).  As I get further into this I'll see if I can get this looking better.

Thanks,

Jeff King

[jking]

Gordon,

     Played around a bit more.  I found the .planner-header-data-height style was the one to change.  See the attached image.  I set the height to 21px and turned off the padding.  Adding this to a custom style file should override the original setings.

Jeff

[GordonF]

Hi Jeff,

Thank you for the information it was really helpful, I have added an entry into custom.css to override the style and it does indeed solve the alignment problem.

That leaves one outstanding issue and that is the row clicked calculation which is vertically shifted, in fact the top row only has a very narrow click position in the top section of the row. In short clicking in the bottom third of a row gives the start time for the next row.

I'll get back to you with any additional info I discover, although I'm away now for 2 weeks.

Gordon

[GordonF]

Hi Jeff the issue is with the time calculation in the insert form, the code generated looks like this:

  If p_web.GetValue('_Time_') > 0
    CAL:StartTime = 1 + int((p_web.GetValue('_Time_') + (G_APPTCTR:Intervals * 6000)/2)/(G_APPTCTR:Intervals * 6000))* (G_APPTCTR:Intervals * 6000)  ! taken from priming tab
  end

but I think it should look like this, certainly this behaves as I'd expect:

  If p_web.GetValue('_Time_') > 0
    CAL:StartTime = 1 + int(p_web.GetValue('_Time_')/(G_APPTCTR:Intervals * 6000))* (G_APPTCTR:Intervals * 6000)  ! taken from priming tab
  end

The lines to look for in NwtWeb.tpw are:

  If p_web.GetValue('_Time_') > 0
      #IF(%PrimetimeNearest)
    %PrimeTime = 1 + int((p_web.GetValue('_Time_') + (%PrimetimeNearest)/2)/(%PrimetimeNearest))* (%PrimetimeNearest)  ! taken from priming tab
      #ELSE
    %PrimeTime = p_web.GetValue('_Time_')     ! taken from priming tab
      #ENDIF
  end

which I've changed to:

  If p_web.GetValue('_Time_') > 0
      #IF(%PrimetimeNearest)
    %PrimeTime = 1 + int(p_web.GetValue('_Time_')/(%PrimetimeNearest))* (%PrimetimeNearest)  ! taken from priming tab
      #ELSE
    %PrimeTime = p_web.GetValue('_Time_')     ! taken from priming tab
      #ENDIF
  end

I think the current code calculates the time closest to the the click position but my feeling is that the user will expect the row to be all the same time.

I hope this helps.

Gordon

[GordonF]

Thank you for your help Jeff I now have the look I want, my users like the borders on the rows as they assist in selecting a time.

The additions I've made in custom.css are:

.planner-header-data-height{
height: 22px;
padding: 0;
}

.nt-relativerow{
border: 1px solid #dddddd;
position:relative;
height: 24px;
width: 100%;
}

Please note the 24px is specific to my calendar, the p_height parameter in DrawRow isn't passed through to DrawPlanRow (this would be useful) so I forced it in the css.

Change in NetWeb.clw:

NetWebServerWorkerBase.DrawPlanRow   Procedure(String p_ParentId,NetPlannerDataQueueType p_Queue)
Packet      StringTheory
y           Long
  code
    packet.SetValue('data-nt-row="data" data-nt-parent="' & clip(p_ParentId) & '"')
** this line is now >    self.DivHeader(p_ParentId,'planner-data-width nt-relativerow',Net:Send+Net:Crc,,packet.GetValue())

Gordon