display field alignment

[robirenz]

is this possible? using nettalk 7.22

I've got a form with son display fields and buttons.

can view the image here... http://screencast.com/t/s0ocx9UuGUb

as you can see when the display field gets too long it will scroll but will leave the icon which is inserted with the same display fields using image tab.

Is there any way to align the icons vertically and to the left of the text when it runs two lines instead of at the top of the text?

Best Regards...

Roberto Renz

[bshields]

Hi Roberto,

Use CSS to float the icon left, ensure the icon has margin on right and bottom, and none on top and left.

If you put your website public, i'll work out the CSS exactly for you. But the above suggestion is the general approach.

Regards
Bill

[robirenz]

The problem I'm noticing with the icon and text on display fields is that that it has two div sections.
if I manually create the control and just leave one div for the the image and the text right after it then it works as expected.
but I don't see how I would solve this with css using the template. when there are two divs.

I'll try making it public so that you can see it.

Best Regards...

Roberto Renz

[bshields]

Perhaps I wasn't clear, you'd float the whole containing div for the icon left.

With NT and the div's it generates it can sometimes be a little tricky to get what you want from CSS, but its usually possible!

[robirenz]

Bill,

this is what I've been able to do..

changed the code in the control embed..

  if 1 = 2
  If Not (1=0)
    p_web.site.HTMLEditor = p_web.site.DefaultHTMLEditor
    ! --- DISPLAY --- or ---- BUTTON --- or --- PROGRESS -----  -- Display
    if p_web.site.FrontLoaded and loc:frontloading = net:GeneratingData
      exit
    end
    loc:javascript = 'id="evaluacion1"'
      packet = clip(packet) & |
        p_web.CreateImage( 'images/test.png',24,24,,,,loc:javascript,,0,'nt-left') &|
        ' ' &|
        '<div id="evaluacion1" class="'&clip('nt-left')&'"'&clip(loc:extra)&'>' & p_web.Translate('Evaluación 1 - ¿Qué es lo que más recuerda la gente de los impactos de tu liderazgo?',(Net:HtmlOk*0)+(Net:UnsafeHtmlOk*0)) & '</div>' & |
         p_web.CRLF
    do SendPacket
    ! [Priority 5000]
    END   
    END 


added embed code to change to:

    If Not (1=0)
    p_web.site.HTMLEditor = p_web.site.DefaultHTMLEditor
    ! --- DISPLAY --- or ---- BUTTON --- or --- PROGRESS -----  -- Display
    if p_web.site.FrontLoaded and loc:frontloading = net:GeneratingData
      exit
    end
    loc:javascript = 'id="evaluacion1"'
      packet = clip(packet) & |
        p_web.CreateImage( 'images/test.png',24,24,,,,loc:javascript,,0,'nt-left') & |
        '&#160;' &|
        p_web.Translate('Evaluación 1 - ¿Qué es lo que más recuerda la gente de los impactos de tu liderazgo?',(Net:HtmlOk*0)+(Net:UnsafeHtmlOk*0)) & |
         p_web.CRLF
    do SendPacket   
  End

just get rid of the text div and everything seems to wrap the way I want it to, but I have like 50 controls I need to do this to and so quite a bit of work..
sure wish there was someway to just get rid of the second dev.   I did try with the css "nt-left' changing the margins, but didn't really get to what I needed.

    float: left;
    margin-right: 5px;
    margin-left: 5px;
    margin-top: 0px;
    margin-bottom: 0px;

Best Regards..

Roberto Renz

[bshields]

Hi Roberto,

Rarely is it not possible to make a DIV behave like you want to, DIVs have certain default behavior but it pretty much can always be overridden, for example a DIV can be styled "inline" so it behaves like text (or technically SPANs).

The only time I have trouble getting styling the way I want is then there aren't DIVs for me to apply styling to.

My guess is its possible, but obviously difficult for me without working with the real thing.

If you havent already tried firebug or chromes "inspect element" and made changes to the styling temporarily in the browser without wasting time in Clarion code, I always do it this way. as CSS can get complicated quickly.

Regards
Bill