[solved] Styling the 'Browse' input in FEU

[JM6891]

Hi there,

I've tried to set a width to all my 'input' tags for the 'Change Settings' template in FEU.  The only trouble is, say I set the input to 200px, IE obeys (surprisingly) but all other browsers create a huge long input field that stretches way beyond where I need it too.

Because the template is a loop (see below) I can't specify an ID just for the file input.

This is my code and CSS I'm working with:

Code: Select all

{$startform}
 {if $controlcount > 0}
  <center>
  <table width="460" id="settings">
     {foreach from=$controls item=control}
  <tr>
     <td width="100">{$control->hidden}<p>{$control->prompt}{$control->marker}</p></td>
     <td width="360">
        <div class="input_wrapper">
       {if isset($control->image)}<div id="avatar">{$control->image}</div><br/>{/if}
       {$control->control}<p class="settings_instruction">{$control->addtext}</p>
       {if isset($control->control2)}<div id="clear_avatar">{$control->prompt2} {$control->control2}</div><br/>{/if}
</div>
     </td>
  </tr>
 {/foreach}
  </table>
  </center>
 {/if}
 {$hidden}{$hidden2}{$submit}{$cancel}
{$endform}

Code: Select all

#settings .input_wrapper input{
	width:200px;}

[Dr.CSS]

There is a good chance it may have an ID or something associated with it, I would look at the page view source to see if it did, other wise you will need to add something like the {counter} tag to where it comes from in the template, with a letter in front of it as css doesn't/can't use a number for styling...

[JM6891]

Hi there,

Thanks for your reply. Unfortunately there was no id or class associated with the input.  So, I tried to use {counter} as you suggested, however it's not working correctly. Here's the template which I've changed to include {counter} I may have done this wrong as I'm new to this so please bear with me:

Code: Select all

  <div class="input_wrapper">
       {if isset($control->image)}<div id="avatar">{$control->image}</div><br/>{/if}
       [color=pink]<div class="a_{counter start=0}">
       {$control->control}
         </div>[/color]
<p class="settings_instruction">{$control->addtext}</p>
       {if isset($control->control2)}<div id="clear_avatar">{$control->prompt2} {$control->control2}</div><br/>{/if}
</div>

The problem which I'm getting is that each of the divs with the {counter} class are coming through as class="a_0", it's not increasing the number per each div it calls with that class. Have I missed something?

Thanks again for your help

[vilkis]

http://www.smarty.net/manual/en/languag ... ounter.php

vilkis

[JM6891]

http://www.smarty.net/manual/en/languag ... ounter.php

vilkis

Hi vilkis,

Thanks for your reply. I actually found this page prior to editing my code as above, however I'm still obviously missing something.

[vilkis]

Place

Code: Select all

{counter start=0}

before

Code: Select all

{foreach .....}

and then

Code: Select all

 <div class="input_wrapper">
       {if isset($control->image)}<div id="avatar">{$control->image}</div><br/>{/if}
       <div class="a_{counter}">
       {$control->control}
         </div>
<p class="settings_instruction">{$control->addtext}</p>
       {if isset($control->control2)}<div id="clear_avatar">{$control->prompt2} {$control->control2}</div><br/>{/if}
</div>

vilkis

[JM6891]

Thanks for your help!

This has worked! I actually tried this before, however I'd put it after the foreach which didn't work!

OK, so now I've assigned the input file it's own class I will try and style it and post here whatever my findings are.

Thanks again for your help vilkis.

[calguy1000]

You should be running CMSMS 1.7.1 where this problem is solved.

[JM6891]

Hi Calguy,

Which problem is solved in 1.7.1? Is it that each form element is given has their own class, or is it that the is easier to style?

The reason why I ask is that I've managed to apply a class the the element, as above, however actually reducing the width of it is proving to be tricky.  Firefox and all other browsers except for IE8 appear to be ignoring the width that I assign to the class.

After researching this problem, I have found many people around who are finding difficult to style the , resulting in having to use hacks as displayed here: http://www.quirksmode.org/dom/inputfile.html or http://www.kavoir.com/2009/02/styling-file-upload-select-input-control-input-typefile.html

However, the hacks on the links above are surely out of the question as the code for the form uses a loop?

[JM6891]

Another solution to add to the llinks above - http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom - perhaps a little easier to implement? Worked for me, although not ideal this one, but at least the input file doesn't stretch beyond the design anymore.

If anyone has any better/easier suggestions, please feel free to post them here in case others have the same issue.

[Dr.CSS]

All this discussion and not once did I see a link to the page/form...

[JM6891]

That's because I'm developing locally at the moment, hopefully I've given as much information as possible including the links I've found to solve the problem if any one else has the same issue.