Hard return after EVF? [#262109]

I've noticed if I use this code to insert the default EVF into a page:

<?php print extra_voting_forms_show_form($node,'n' ,3, small) ?>

or even add it to the standard drupal $links, theres always a new line AFTER the form. Looking at the generated code:

    <div class="extra_voting_forms karma_3_small">

    <form action="/extra_voting_forms/handle" method="get" class="karma_form_promoted" id="x8">
      <div>
        
        <span class="karma_score">1</span>
        <span class="karma_buttons">
          <label class="karma_up_clicked_clickable" for="u8">
            <input id="u8" type="radio" name="karma_vote" value="1" checked="checked"/>
            <span>Up</span>
          </label>

          <label class="karma_down_not_clicked_clickable" for="d8">
            <input id="d8" type="radio" name="karma_vote" value="-1"/>
            <span>Down</span>
          </label>
          <input type="hidden" name="oid" value="8"/>
          <input type="hidden" name="otype" value="n"/>
          <input type="hidden" name="form_style" value="3"/>
          <input type="hidden" name="form_type" value="form"/>

          <input type="submit" name="submit" value="Vote" />
          
        </span>
      </div>
    </form></div>

It seems this can be attributed to the use of DIV tags inside of the form code. Unfortunately this is causing problems for my styling requirements, as I need the EVF on the same line as other buttons. Is there a workaround for this, short of hacking it with CSS, or changing the module?

Thanks!
.

Comment	File	Size	Author
#28	extra_div.jpg	117.22 KB	oneshot

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

mercmobily CreditAttribution: mercmobily commented 24 May 2008 at 01:12

Hi,

Sicjoy, could you look into this?
In the meantime, d0t101101 can you please provice a list of browsers this happens with, and WHEN it happens?

Bye,

Merc.

Comment #2

d0t101101 CreditAttribution: d0t101101 commented 24 May 2008 at 04:44

Certainly Merc,

I will test this with a larger variety of browsers tomorrow, but for now, I noticed these inconsistencies:

Firefox 2 - new line after the vote down button
IE7 - new line after karma score (before vote up), and NOT after the vote down button

I'm able to replicate this with the default drigg theme, by enabling 'Display the karma form in the links section of a node' in admin/settings/extra_voting_forms. Any links before or after the EVF are not printed on the same line. I tested this with CSS aggregation both enabled and disabled, but this didn't make a difference.

The EVF should probably be first in the list of $links, and not bump the subsequent $links to the next line, for a better overall appearance and improved 'themeability'.

Best regards,
.

Comment #3

mercmobily CreditAttribution: mercmobily commented 24 May 2008 at 06:33

Hi,

Thanks for the accurate report. It really looks like a CSS issue to me. I will need to get Alan and Sicjoy to have a look...

Does it happen in http://www.drigg.org as well? If so, can you provide exact links?

I am going to be travelling for the next 3 days. So, I will be a little out of touch.

Merc,

Comment #4

d0t101101 CreditAttribution: d0t101101 commented 24 May 2008 at 12:59

Not sure, because I don't have admin privs on drigg.org yet ;) To check, we would need to enable 'Display the karma form in the links section of a node' in admin/settings/extra_voting_forms, which is unchecked by default.

After enabling, the smaller voting form would also appear below each teaser and inside each node.

Have a nice trip!
.

Comment #5

mercmobily CreditAttribution: mercmobily commented 26 May 2008 at 02:18

Hi,

(in transit)
alright, done :-D

Same problem? If o, it looks like a CS issue!

Merc.

Comment #6

d0t101101 CreditAttribution: d0t101101 commented 26 May 2008 at 03:16

Same problem, even with the different form style. Drigg.org is using full selection style and my sites were using the up/down style (image buttons) in the default EVF. The $links are wrapping after the EVF.

I am by no means a CSS expert, though I spent hours yesterday making various changes to my custom themes CSS using firebug. I tried disabling every CSS element I thought would have an impact on the EVF, but couldn't manage to make it to NOT wrap the links section. :( I'll be sure to report the solution here if I'm able to find one.

Thanks for your help Merc!!
.

Comment #7

mercmobily CreditAttribution: mercmobily commented 27 May 2008 at 06:30

Hi,

OK... ugh. We need somebody who really knows CSS here :-(
Till then, we are sort of stuck. Sorry...

Merc.

Comment #8

mercmobily CreditAttribution: mercmobily commented 8 June 2008 at 14:53

Hi,

Does anybody have _any_ idea why this is happening?
Sicjoy?

Merc.

Comment #9

d0t101101 CreditAttribution: d0t101101 commented 14 June 2008 at 19:15

I found a partial solution. Inside of the CSS, I commented out a few properties:

html.js .karma_3_small .karma_buttons {
  #display: inline-block;
  #display: -moz-inline-box;
  overflow: hidden;
  vertical-align: middle;
}

This allows the EVF to be on the same line as other content. There is still an issue with the Karma score box I am working to resolve.

In the end I have a feeling the best approach will be to develop my own widget for use with EVF. Pretty difficult when your not a CSS guru, but i'm up to the challenge.

Best regards,
.

Comment #10

mercmobily CreditAttribution: mercmobily commented 29 August 2008 at 09:11

Category:

support

» bug

Comment #11

cedricfontaine CreditAttribution: cedricfontaine commented 1 September 2008 at 13:08

Did you verify that you have this in the CSS ?

FORM{ padding:0; margin:0; }

Is there a link I can have a look at your site and what you wish to obtain ?

Comment #12

cedricfontaine CreditAttribution: cedricfontaine commented 1 September 2008 at 13:09

Assigned:

Unassigned

» cedricfontaine

Comment #13

mercmobily CreditAttribution: mercmobily commented 1 September 2008 at 15:29

Hi,

I have reproduced this in www.drigg.org . There is indeed a hard return.
Interestingly enough, it's there even when using the normal select box.

That hard return has been giving us the shits for just under a year now. It's the last known bug in Drigg.

I tried everything, didn't manage. Somebody please fix it :-D

Merc.

Comment #14

cedricfontaine CreditAttribution: cedricfontaine commented 2 September 2008 at 17:09

Status:

Active

» Needs review

Could anyone try to add

ul.links li
{
float:left;
}

in extra_voting_forms_all.css ? Could you check that there are no side effects.

Comment #15

mercmobily CreditAttribution: mercmobily commented 2 September 2008 at 19:39

Hi,

Alan, can you please try Cedric's fix on every browser on the planet?

Merc.

Comment #16

Prodigy CreditAttribution: Prodigy commented 2 September 2008 at 21:58

1. The best way to position a voting widget is using absolute positioning for a few reasons in particular. For one, it's much easier to get exact placement as to where you want your widget. Also, it's better for SEO reasons. You would prefer your widget to be at the end of content rather than before the header tag. Take a look at digg.com to see what I mean.

2.) I wouldn't feel comfortable using a -moz- (browser specific fix).

For example, position the .offset class using relative positioning.

Insert your voting widget right before the closing .offset div tag.

Then apply absolute position to the voting widget with something like this.

position:absolute; left:-60px; top:0px;

Just make sure your offset has enough padding-left.

Doing it this way ensures EXACT placement ... and it's better for SEO.

Comment #17

mercmobily CreditAttribution: mercmobily commented 2 September 2008 at 23:00

Hi,

Alan who designed the CSS for drigg.org wrote to me:

"Yeah, I tried it, and it works, clearly. However, the problem is that creating a float out of all of the elemtns in that Div (often full of stuff) is suicide. Sooner or later, something else will break badly."

What do you think about Alan's forecast? :-D

Merc.

P.S
He's often right. Not always, but often enough to make me concerned. :-D

Comment #18

Prodigy CreditAttribution: Prodigy commented 2 September 2008 at 23:53

Anyone have a working link that shows this? It's only a problem when it's put in $links, right?

Comment #19

mercmobily CreditAttribution: mercmobily commented 3 September 2008 at 00:39

Hi,

I think so, yeah.
Maybe we could just say "place it in the site's template, and not in the links section"... or maybe I am just being lazy?

Merc.

Comment #20

Prodigy CreditAttribution: Prodigy commented 3 September 2008 at 01:21

I don't really see the need to put a voting widget in links ..... I would pull it. It would be different if it were just displaying a link, or a vote count ... but the widget is almost always taller than $links.

If that person using the module wants in there, tell them to just place it after links in the template file.

Comment #21

cedricfontaine CreditAttribution: cedricfontaine commented 3 September 2008 at 17:06

We can go more precisely :

div.links ul.links li {
float:left;
}

You're right, I don't know what can be in the links section...

Comment #22

Prodigy CreditAttribution: Prodigy commented 3 September 2008 at 17:32

Again, absolute positioning is much better than floating the links left.

Comment #23

cedricfontaine CreditAttribution: cedricfontaine commented 3 September 2008 at 19:17

If you are not using the proper doctype (or any doctype at all,) using absolute positioning in CSS is a guessing game at best, and very likely fits into the common conception of "bad." Even with a valid doctype, CSS is still not an exact thing. IE renders things slightly differently than Firefox, and neither of them render the same as Safari. Absolute positioning is not a bad thing by itself. It's when you have a website that doesn't look very nearly the same in the 3 major browsers that you have problems. As for a time when using absolute positioning is "good," that would have to be reserved for when a website looks and acts nearly the same in all 3 of the major browsers. It's not necessarily "bad" if your website doesn't, but it certainly isn't "good" either.

Comment #24

Prodigy CreditAttribution: Prodigy commented 3 September 2008 at 19:56

There are so many variables to this conversation.

...widget being used ... small or big widget ... are you displaying vote points ...etc ..

Back on topic to the issue at hand. Can somebody point me to a live site where this is a problem? Also, please let me know where you "prefer" the widget. I'm guessing this is only a problem in links? If I recall, this was a minor problem in the voteupdown module. Is it really necessary to have the the "karma points" display nested inside of the form tag?

It's not a huge issue, but I would think it would be easier if you had the following structure.

<div enclosing the entire widget>
    <div for the background karma image>
     <div or span for the point display >
     <div closing the point display>
     <div closing the background karma image>
      < then form would start down by the buttons for voting>
<div that closes the entire widget >

Tying to keep this as simple as possible. This was the approach taken by the vote up down module. Maybe there is another reason for starting form so early?

Comment #25

mercmobily CreditAttribution: mercmobily commented 9 September 2008 at 07:21

Hi,

Prodigy, the big issue of EVF is that I don't want to break the Javascript, which works and has been working for a long time. The OTHER big issue is that the existing voting widgets will also need to be changed.

So, _any_ changes to the generated HTML will need to come with _careful_ testing of the Javascript and existing widgets as well.

This is the right time to change things, because the D6 version of the module is not out yet. However, you can see why I don't want to change so much... because of a bug that only comes out when putting a big form like EVF in the links section.

I think www.drigg org has this problem, prodigy. Please check it out...

Bye,

Merc.

Comment #26

mercmobily CreditAttribution: mercmobily commented 10 September 2008 at 07:22

Hi,

Since this issue only shows up when the voting form is in the links section, and since there doesn't seem to be a "simple" way to fix it that won't possibly break other things, I am just about to mark it as a "won't fix", unless somebody comes with a magic wand in the next couple of days.

Bye,

Merc.

Comment #27

Prodigy CreditAttribution: Prodigy commented 10 September 2008 at 14:43

It's the extra div with out a class or ID.

I'm sure that has reasons for being there, but perhaps try targeting it by giving it a class.

Example .. assigning the class "smalldiv".. (just as an example)


.links div.smalldiv {
 float:left;
}

or adding some conditional logic that if the widget is in links, that div is not output.

Go into firebug and simple remove the div by editing the HTML and you can see that it is indeed the problem.

Comment #28

oneshot CreditAttribution: oneshot commented 16 September 2008 at 18:28

File	Size
extra_div.jpg	117.22 KB

i have same problem. Extra div tag destroys links section :(
Fixed for me, i kill this div inside module code :-)

Comment #29

pixelgeek CreditAttribution: pixelgeek commented 19 November 2008 at 20:50

I managed to fix the issue that I was seeing under IE. I didn't have a problem in any other browser.

I removed all of the line breaks prior to the span tags and also removed the unclassed div tag from around the form.

In IE 7 this now means that the karma score and voting buttons are now on a new line but that is much preferable to the old visual behaviour

Comment #30

mercmobily CreditAttribution: mercmobily commented 19 November 2008 at 23:44

Hi,

I am so confused about this problem it's not funny.

Can somebody please provide a fix that is _guaranteed_ to actually fix the problem without strange side effects and possibly without deleting the Div? (Giving it an ID would be great). It's obviously crucial that existing widgets are not screwed.

If you are able to do that, please post a patch. If everybody agrees, I will apply it and will consider it closed.

Bye,

Merc.

Comment #31

wrb123 CreditAttribution: wrb123 commented 2 December 2008 at 04:40

i dont know if this is a solution to anyone's problem or not, but I stumbled upon this thread while trying to position my extra voting form widget to the right of a node title in one of my views. I realize this isn't what some people are looking for, but I just made a node-mycustomtype.tpl.php and in it did:

<?php if ($page == 0): ?>

  <table id="mytable">
   <tr>
     <td style="width:85%">  
       <a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a>
     </td>
     <td style="width:15%"> 
     <? print extra_voting_forms_show_form($node,'n' ,3) ?>  
     </td>
    </tr>
   </table>

<?php endif; ?>

this might be helpful to some, or maybe the same table concept could be used, so i thought i would include it here. if it's not helpful please feel free to remove or delete this post!
thanks,
bill