Labels next to fields in horizontal template

[cchiacchierini]

I am using the code from the wiki to create a horizontal filter: http://fabrikar.com/wiki/index.php/Tmpl_list_default_filter_horizontal. Is there a way to put the field labels to the left of each filter field?

 

[troester]

The div list template is using <li> in the filter display.
So you could copy .../div/default_filter.php to your custom template and add some custom CSS
#listform_$c .fabrikFilterContainer li.fabrik_row {float:left}

 

[cchiacchierini]

I have them side by side now, but there is a number next to each of the labels. How do I get rid of the numbers? Also, because the filters cascade, the behavior for clearing them is not intuitive. How do I create a clear filter button?

One more thing: I would like to put some explanatory text next to each of the labels (i.e., First select Region...Next select Town); is this possible?

 

[troester]

Numbers:
I assume it's a list-style setting, try
#listform_$c .fabrikFilterContainer li {list-style:none}
(you can check and test CSS modification with firefox+firebug addon)

Clear filter button: should be there (did you hide it with your custom template?)

Explanatory text: I would put it in the list intro.
If you want to modify the filter labels themselves you can do it in your template with some string handling.

 

[cheesegrits]

It would also help if we could see your page. Anything to do with CSS, it's pretty much a given that we'll need to see it to make the right suggestions.

-- hugh

 

[cchiacchierini]

Sorry about that: http://ciderweek.ohbusyweaver01.com/index.php/home

I figured out the clear filter addition using this post: http://fabrikar.com/forums/showthread.php?t=21158 and this code:

<div class="fabrikFilterContainer">
<table class="filtertable fabrikList">
	

	<?php
	$c = 0;
	foreach ($this->filters as $filter) {
			$required = $filter->required == 1 ? ' notempty' : '';?>
			<?php echo ($c % 2). $required;?>
			<?php echo $filter->label;?>
			<?php echo $filter->element;?>
			
		
	<?php $c ++;
	} ?>
	<input type="button" class="clearFilters" value="<?php echo JText::_('Clear Filter');?>"
			name="filter" />
	<?php if ($this->filter_action != 'onchange')	{?>
	<?php echo $c % 2;?>
	<input type="button" class="fabrik_filter_submit button" value="<?php echo JText::_('COM_FABRIK_GO');?>"
			name="filter" />
	<?php }?>
</table>
</div>

I also figured out the custom label by opening the element in the back end and putting the text I want in: List settings>header label.

But I still can not figure out how to get the numbers to go away next to the labels. I used firebug, but when I hover over the numbers, nothing is identified.

Please advise!

 

[troester]

List settings>header label

This will be ok as long as you don't need the "list header" labels as list headings.

You filter code is a bit strange, in this case it may work, but in general it's no good idea to take only some parts of a code (e.g. without displaying ids).

$required = $filter->required == 1 ? ' notempty' : '';?> <?php echo ($c % 2). $required;?>

This part is originally used to compose a CSS class name including a number, so you are displaying now just the number.

 

[cchiacchierini]

I got rid of the numbers, but in order to get rid of the ajax-loader.gif which is messing with the spacing of my first label and its element in the filter ("region/city), I had to enter the following in custom.css:

#locations___townvalue_loading {
display:none!important;
}

I realize I have butchered the default_filter.php. I basically want the filter to look like the filter you guys have on the Fabrik downloads page. Would it be possible to share the code from that default_filter.php file, so I can start over and do it right? Or should I just live with what I have, because it is working?

Here is where I am now for better or worse:

<div class="fabrikFilterContainer">
<table class="filtertable fabrikList">
    
Find the places near you...
<?php echo " &nbsp " ?>
<?php echo " &nbsp " ?>
    <?php
    $c = 0;
    foreach ($this->filters as $filter) {
            $required = $filter->required == 1 ? 'notempty' : '';?>
           
            <?php echo $filter->label;?>
            <?php echo $filter->element;?>
           
        
    <?php $c ++;
    } ?>
    <?php echo " &nbsp " ?>
    <?php echo " &nbsp " ?>
    <input type="button" class="clearFilters" value="<?php echo JText::_('Clear Filter');?>"
            name="filter" />
    <?php if ($this->filter_action != 'onchange')    {?>
    <?php echo $c % 2;?>
    <input type="button" class="fabrik_filter_submit button" value="<?php echo JText::_('COM_FABRIK_GO');?>"
            name="filter" />
    <?php }?>
</table>
</div>

 

[cheesegrits]

I just had a look, and the way we do it is with specific widths in the CSS for each class.

If you inspect that page with Firebug, you'll see what I mean.

Does your layout need to be resizable, or is it fixed width?

-- hugh

 

[cchiacchierini]

Fixed width.

 

[cchiacchierini]

Thanks for your guidance. I got this working by wrapping the whole default_filter.php mess in a div and styling.