Hi Lee, found a little bug.
When you set the
Hotel Booking->Settings->General Settings->Text for node page booking form button

I set mine to:
"Add this room to the Reservation Cart"

When it renders (in Garland theme and my custom theme) it reprints the button title under the button as text muddying up the user interface. It does it for each instance of the button.
When I examine the rendered source code for the elements it looks like this:

<div>
          <div class="hotel-booking-search-result-book-button"><input type="submit" name="book_9" id="edit-results-rooms-9-book" value="Add this room to the Reservation Cart" class="form-submit book-btn" title="Click here to book this room.">
</div>
          <label for="edit-book_room_9">Add this room to the Reservation Cart</label>
        </div>

I dont think the button needs a label, but its getting one.....
I have attached a screen shot.

CommentFileSizeAuthor
button-bug.png83.19 KBspydmobile
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

larowlan’s picture

Status: Active » Closed (works as designed)

Hi
The label is there so you can render the button as an image with a negative text-indent. Eg I've seen it done as a cart image or a suitcase image.
Either way it can be hidden/moved with the css or via a theme override (the output is themable).
Lee

spydmobile’s picture

Sorry, you have taken me deep down the rabbit hole on this adventure and I have learned a whole lot thanks to you, but I dont know how to do a theme override yet nor do I know a simple way to turn off something in css without an id

<label for="edit-book_room_9">Add this room to the Reservation Cart</label>

I assume that the 9 in there is the nid? Perhaps you have a snippet or can point me to an example I can reverse engineer?
Thanks mate!
Franco

spydmobile’s picture

would this CSS do it?

/* place this code within the style.css file in your Drupal theme */
 
#edit-results-rooms-9-book label {  /* hides the form button label */
  display: none;
}
spydmobile’s picture

Status: Closed (works as designed) » Active

Hi Lee,
Sorry but I really do believe there is a bug here, Unless you are doing some wild outside the box thing I dont understand.

Here is my current perspective on this issue

in

hotel_booking_search_results.tpl.php

on line 34 of latest 6.x dev is this block of code

        <div>
          <div class="hotel-booking-search-result-book-button"><?php print $room['book'];?></div>
          <label for="edit-book_room_<?php print $nid?>"><?php print $book_caption?></label>
        </div>

The CSS FOR param in the LABEL constructor is used to bind the label with its form element using a valid ID. the code above results in a FOR param that points to a nonexistent form element. Further reading in the HTML spec indicates the only benefit of the binding the label to the element is to improve usability and allow mouse users to click the text label and have the form respond as though they clicked the element. Since the label does not bind to anything, you cant click it and you cant modify the label of the element like so:

#id-that-does-not-exist label { display: none;}

or

.class-that-does-not-exist label { display: none;}

So if line 36 actually read:

<label for="edit-results-rooms-<?php print $nid?>-book"><?php print $book_caption?></label>

Then it would:
1) Bind the label to the actual element
2) fulfill its usability functionality
3) Allow acces to the label via the elements ID and would allow me to plug this into the CSS Injector module and make them dissapear

/* place this code within the style.css file in your Drupal theme */
/* wont work for  <=IE6 users, */
label[for="edit-results-rooms-8-book"] { display:none !important; }
label[for="edit-results-rooms-9-book"] { display:none !important; } 
 /* hides the form button labels */
larowlan’s picture

The css is

.hotel-booking-search-result-book label {
 display: none;
}

Theming overrides are one of drupal's most powerful features. You should look into them if you are using Drupal regularly. Basically any decent module won't output xhtml without using a theme function or template. You can copy these functions (they start with theme_) to your theme's template.php and change them to suit or in the case of templates, you can copy the template to your theme folder and modify to suit. That's theming overrides in a nutshell!

larowlan’s picture

Category: bug » support
larowlan’s picture

For the theming override route.
Copy the template (hotel-booking-search-result-book.tpl.php) to your theme's folder.
Refresh the theme registry (flush the caches) and then edit the version in your theme's folder.
You can just delete the label all together from the code for the one in your template.

spydmobile’s picture

Thanks Lee,

You are definitely making me a better drupal programmer ;-) but I really want to understand your label code, is it a typo or not becuase it does not bind in the html, when I fixed your code as described above it works. As it stands your CSS does not hide the label.

larowlan’s picture

Category: support » bug
Issue tags: +Release blocker

the label code should bind, thanks

larowlan’s picture

Priority: Normal » Minor
pitxels’s picture

The label is there so you can render the button as an image with a negative text-indent. Eg I've seen it done as a cart image or a suitcase image.

This seems wrong to me, if you want to use a button background you just need the css and the image. The text of the value buttons will remain. If you use text-indent, is because you want to visually hide that text, because there is text on the image.

Having the label tag in not necessary at all is just redundant and only creates additional work for the users.

larowlan’s picture

Status: Active » Closed (works as designed)

There's a tpl file in the module you can copy to your theme and start chopping.

pitxels’s picture

Thanks larowlan I was able to fix this with css, my point is that it looks like a bug to me but its minor anyway...