Hi,

I'm afraid Garland theme and multiple Exposed Filters are not compatible. Many Exposed Filters breaks the theme by pushing the theme middle window into the left column. Please see attached.

Any insight would be greatly appreciated.

Thanks in advance,

CommentFileSizeAuthor
1.png293.5 KBesadot

Comments

catch’s picture

Project: Views (for Drupal 7) » Drupal core
Version: 5.x-1.6 » 6.x-dev
Component: Code » Garland theme
Priority: Normal » Minor

This is a theme issue, not a views issue.

esadot’s picture

Thanks. Any idea how to solve it, or alternatively where to take it?

catch’s picture

Status: Active » Postponed (maintainer needs more info)

I haven't checked the output of exposed filters, but it's almost certainly to do with the way that IE handles display:inline,

If you have markup like this:

<ul><li></li></ul>

It doesn't wrap.
WIth markup like this:

<ul>
<li>
</li>
</ul>

It does, due to the whitespace/new line. Drupal-generated code is often like the first, i.e. theme_item_list - I had to override it to add newlines for my site for something else, documented here: http://drupal.org/node/199861

If you could view source on those exposed filters and let us know if it all appears on one line, that'd probably be a good start. Also please check on firefox (which ought to wrap, since it doesn't suffer from the same bug).

esadot’s picture

catch - thanks for your reply. I'm afraid the anomaly occurs in FF as well as in IE.

I believe this is the html source code:

<div><table>
 <thead><tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th></th> </tr></thead>

<tbody>
 <tr class="odd"><td class="active"><div class="form-item">
 <select name="op0" class="form-select" id="edit-op0" ><option value="=" selected="selected">is equal to</option><option value="&lt;&gt;">is not equal to</option><option value="&gt;">greater than</option><option value="&gt;=">greater than or equal to</option><option value="&lt;">less than</option><option value="&lt;=">less than or equal to</option></select>
</div>
<div class="form-item">
 <input type="text" maxlength="255" name="filter0" id="edit-filter0"  size="10" value="" class="form-text" />
</div>
</td><td><div class="form-item">

 <select name="op1" class="form-select" id="edit-op1" ><option value="=" selected="selected">is equal to</option><option value="&lt;&gt;">is not equal to</option><option value="&gt;">greater than</option><option value="&gt;=">greater than or equal to</option><option value="&lt;">less than</option><option value="&lt;=">less than or equal to</option></select>
</div>
<div class="form-item">
 <select name="filter1" class="form-select" id="edit-filter1" ><option value="**ALL**">&lt;All&gt;</option><option value="" selected="selected">&lt;all&gt;</option><option value="now">now</option><option value="1">Jan</option><option value="2">Feb</option><option value="3">Mar</option><option value="4">Apr</option><option value="5">May</option><option value="6">Jun</option><option value="7">Jul</option><option value="8">Aug</option><option value="9">Sep</option><option value="10">Oct</option><option value="11">Nov</option><option value="12">Dec</option></select>

</div>
</td><td><div class="form-item">
 <select name="op2" class="form-select" id="edit-op2" ><option value="=" selected="selected">is equal to</option><option value="&lt;&gt;">is not equal to</option><option value="&gt;">greater than</option><option value="&gt;=">greater than or equal to</option><option value="&lt;">less than</option><option value="&lt;=">less than or equal to</option></select>
</div>
<div class="form-item">
 <select name="filter2" class="form-select" id="edit-filter2" ><option value="**ALL**">&lt;All&gt;</option><option value="" selected="selected">&lt;all&gt;</option><option value="now">now</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select>

</div>
</td><td><div class="form-item">
 <select name="op3" class="form-select" id="edit-op3" ><option value="=" selected="selected">is equal to</option><option value="&lt;&gt;">is not equal to</option><option value="&gt;">greater than</option><option value="&gt;=">greater than or equal to</option><option value="&lt;">less than</option><option value="&lt;=">less than or equal to</option></select>
</div>
<div class="form-item">
 <input type="text" maxlength="255" name="filter3" id="edit-filter3"  size="10" value="" class="form-text" />
</div>
</td><td><div class="form-item">
 <select name="op4" class="form-select" id="edit-op4" ><option value="=" selected="selected">is equal to</option><option value="&lt;&gt;">is not equal to</option><option value="&gt;">greater than</option><option value="&gt;=">greater than or equal to</option><option value="&lt;">less than</option><option value="&lt;=">less than or equal to</option></select>

</div>
<div class="form-item">
 <select name="filter4" class="form-select" id="edit-filter4" ><option value="**ALL**">&lt;All&gt;</option><option value="" selected="selected">&lt;all&gt;</option><option value="now">now</option><option value="1">Jan</option><option value="2">Feb</option><option value="3">Mar</option><option value="4">Apr</option><option value="5">May</option><option value="6">Jun</option><option value="7">Jul</option><option value="8">Aug</option><option value="9">Sep</option><option value="10">Oct</option><option value="11">Nov</option><option value="12">Dec</option></select>

</div>
</td><td><div class="form-item">
 <select name="op5" class="form-select" id="edit-op5" ><option value="=" selected="selected">is equal to</option><option value="&lt;&gt;">is not equal to</option><option value="&gt;">greater than</option><option value="&gt;=">greater than or equal to</option><option value="&lt;">less than</option><option value="&lt;=">less than or equal to</option></select>
</div>
<div class="form-item">
 <select name="filter5" class="form-select" id="edit-filter5" ><option value="**ALL**">&lt;All&gt;</option><option value="" selected="selected">&lt;all&gt;</option><option value="now">now</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select>

</div>
</td><td><input type="submit" id="edit-submit" value="Submit"  class="form-submit" />
</td> </tr>
</tbody></table>
catch’s picture

Well afaik table rows don't wrap. In fact it's quite likely that merlinofchaos has used tables precisely to stop them wrapping in different theme situations. I've not tried it, but you could try something like floating td right - but you're into hack territory there.

Stefan Nagtegaal’s picture

Status: Postponed (maintainer needs more info) » Closed (won't fix)

I'm sorry, but this has nothing nodo with Garland..
This is a bad UI, which should be taken care of...

thomasmurphy’s picture

yup, this is annoying, does anyone know where the inline nature of exposed filters is defined. Is there a css for views?

catch’s picture

Title: Garland theme and Exposed Filters » Exposed Filters are in a table
Project: Drupal core » Views (for Drupal 7)
Version: 6.x-dev » 5.x-1.x-dev
Component: Garland theme » Code
Status: Closed (won't fix) » Active

Dunno what I was thinking moving this to garland, must've been a bad day. So back to active and views. @thomasmurphy, yes there is, but this has nothing much to do with using tables for layout which is the root of the issue.

pounard’s picture

You can override the theme function theme_views_filters().

You can put your form in whatever you want, this not a theme issue, nor a module issue, this is just themable.

general need’s picture

@pounard - are you able to expand upon what you said. It sounds like that's what I need to do... I just don't understand it.

merlinofchaos’s picture

Status: Active » Closed (won't fix)

This thread has lots of good info: http://drupal.org/node/79302

pounard’s picture

+1