Jump to content

¿Donde cambio el ancho de "styled-select"? no aparece en el CSS (SOLUCIONADO)

mkwpfan

By mkwpfan
in Discusión general

 Share

Recommended Posts

mkwpfan Newbie

mkwpfan

Posted
Posted (edited)

Hola,

 

Tengo un bug en mi template que hace que el desplegable “Sort by” no encaje porque es demasiado ancho. A través de Firebug he probado a cambiar el width de 144px a 130px y eso resuelve el desajuste. El problema es que no sé dónde cambiar ese style. He buscado en el CSS pero lo único que viene es esto y aunque cambié ahí el width se anula.

 

.styled-select {display:inline-block;background:#FFF url(../img/select_bg.gif) no-repeat right top;border:1px solid #888;border-radius:2px;position:relative;width:80px;height:24px;*display:inline;*zoom:1}

 

.styled-select-text {position:absolute;left:0;top:0;height:24px;line-height:24px;text-align:left;padding:0 5px;overflow:hidden}

 

En el archivo product-sort.tpl viene lo siguiente:

<p class="select">

<label>{l s='Sort by :'}</label>

<select class="selectProductSort">

 

¿alguna ayuda?

 

Gracias.

 

PD: Adjunto las imágenes con la captura de pantalla de la página y el Firebug activo.

post-635228-0-12496500-1376996594_thumb.gif

post-635228-0-64262600-1376996596_thumb.gif

Edited by mkwpfan (see edit history)
Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Hola,

 

Tengo un bug en mi template que hace que el desplegable “Sort by” no encaje porque es demasiado ancho. A través de Firebug he probado a cambiar el width de 144px a 130px y eso resuelve el desajuste. El problema es que no sé dónde cambiar ese style. He buscado en el CSS pero lo único que viene es esto y aunque cambié ahí el width se anula.

 

.styled-select {display:inline-block;background:#FFF url(../img/select_bg.gif) no-repeat right top;border:1px solid #888;border-radius:2px;position:relative;width:80px;height:24px;*display:inline;*zoom:1}

 

.styled-select-text {position:absolute;left:0;top:0;height:24px;line-height:24px;text-align:left;padding:0 5px;overflow:hidden}

 

En el archivo product-sort.tpl viene lo siguiente:

<p class="select">

<label>{l s='Sort by :'}</label>

<select class="selectProductSort">

 

¿alguna ayuda?

 

Gracias.

 

PD: Adjunto las imágenes con la captura de pantalla de la página y el Firebug activo.

 

Por lo que veo ese "style" parece que lo tienes a mano en el mismo "tpl", intenta abrir el fichero:

 

/themes/tu-plantilla/product-sort.tpl

 

Por otro lado, te en cuenta que el "style" que este incrustado en la misma etiqueta, tendra mas prioridad, por eso por mucho que hayas intentando cambiarlo externamente en el fichero *.css el valor, no te lo ha cambiado, esto si tu pones un !important, si tomara la prioridad, pero vamos de todos modos, abre el fichero y mira ver si esta incrustado donde te digo.

Link to comment
Share on other sites
mkwpfan Newbie

mkwpfan

Posted
  • Author
Posted

Gracias por tu respuesta.

 

He abierto el archivo product-sort.tpl pero no encuentro donde cambiar el ancho. A continuación pego el código a ver si por favor pudieses ayudarme:

{if isset($orderby) AND isset($orderway)}
{* On 1.5 the var request is setted on the front controller. The next lines assure the retrocompatibility with some modules *}
{if !isset($request)}
<!-- Sort products -->
{if isset($smarty.get.id_category) && $smarty.get.id_category}
 {assign var='request' value=$link->getPaginationLink('category', $category, false, true)}
{elseif isset($smarty.get.id_manufacturer) && $smarty.get.id_manufacturer}
 {assign var='request' value=$link->getPaginationLink('manufacturer', $manufacturer, false, true)}
{elseif isset($smarty.get.id_supplier) && $smarty.get.id_supplier}
 {assign var='request' value=$link->getPaginationLink('supplier', $supplier, false, true)}
{else}
 {assign var='request' value=$link->getPaginationLink(false, false, false, true)}
{/if}
{/if}
<script type="text/javascript">
//<![CDATA[
$(document).ready(function()
{
$('.selectProductSort').change(function()
{
 var requestSortProducts = '{$request}';
 var splitData = $(this).val().split(':');
 document.location.href = requestSortProducts + ((requestSortProducts.indexOf('?') < 0) ? '?' : '&') + 'orderby=' + splitData[0] + '&orderway=' + splitData[1];
});
});
//]]>
</script>
<form class="productsSortForm" action="{$request|escape:'htmlall':'UTF-8'}">
<p class="select">
 <label>{l s='Sort by :'}</label>
 <select class="selectProductSort">
  <option value="{$orderbydefault|escape:'htmlall':'UTF-8'}:{$orderwaydefault|escape:'htmlall':'UTF-8'}" {if $orderby eq $orderbydefault}selected="selected"{/if}>{l s='--'}</option>
  {if !$PS_CATALOG_MODE}
   <option value="price:asc" {if $orderby eq 'price' AND $orderway eq 'asc'}selected="selected"{/if}>{l s='Price: lowest first'}</option>
   <option value="price:desc" {if $orderby eq 'price' AND $orderway eq 'desc'}selected="selected"{/if}>{l s='Price: highest first'}</option>
  {/if}
  <option value="name:asc" {if $orderby eq 'name' AND $orderway eq 'asc'}selected="selected"{/if}>{l s='Product Name: A to Z'}</option>
  <option value="name:desc" {if $orderby eq 'name' AND $orderway eq 'desc'}selected="selected"{/if}>{l s='Product Name: Z to A'}</option>
  {if !$PS_CATALOG_MODE}
   <option value="quantity:desc" {if $orderby eq 'quantity' AND $orderway eq 'desc'}selected="selected"{/if}>{l s='In-stock first'}</option>
  {/if}
 </select>
</p>
</form>
<!-- /Sort products -->
{/if}

Link to comment
Share on other sites
Verito Newbie

Verito

Posted
Posted (edited)

Hola, Mk.

Esta solución te va a parecer un poco rara, pero a mí me ha funcionado. Bájate tus carpetas de la tienda al ordenador.

Si no lo tienes, instálate el Notepad++, para que tengas un editor y lector de los archivos raros de Prestashop.

Una vez que tengas la carpeta de la tienda descargada en el ordenador, entra en ella y simplemente introduce en la barra de búsqueda de Windows lo que quieres buscar. Entonces, te saldrá el listado de archivos que tienen ese texto.

Yo tengo el Windows 7 y la búsqueda me sirve para encontrar textos concretos en cualquier documento. Espero que te funcione.

 

Un saludo.

Edited by Verito (see edit history)
Link to comment
Share on other sites
mkwpfan Newbie

mkwpfan

Posted
  • Author
Posted

Hola, ya utilizo el prorgama Agente Ransack que es para buscar un texto en dentro de archivos.

 

Pero por ejemplo, selectProductSort sólo aparece en en los archivos product-sort.tpl y blacklayered.js y en ninguno de ellos encuentro la referencia al ancho.

Link to comment
Share on other sites
Verito Newbie

Verito

Posted
Posted (edited)

Hola, Mwk.

 

Entonces puede ser que tenga un ancho heredado. Prueba a realizar la búsqueda con el número del ancho; si es heredado, ten cuidado, porque, al cambiarlo, puede afectar a otra parte de la web; si no, prueba a incluir tú la referencia al ancho en el archivo.

 

Un saludo.

Edited by Verito (see edit history)
Link to comment
Share on other sites
mkwpfan Newbie

mkwpfan

Posted
  • Author
Posted (edited)

No consigo localizar nada con ese ancho de 144px en la página 1 de la categoría el ancho es de 106px, por lo que supongo que debe ser automático, pero aún así no encuentro donde está definido eso para cambiarlo.

 

 

Creo que debo cambiarlo en el archivo formstyle.js de mi tema, pero no sé cómo. Dejo aquí el código donde creo que está definiendo el ancho, a ver si me podéis ayudar.

 

$(function(){
/***** Select *****/
$.fn.select_style = function(){
 return this.each(function(){
  selectElement = $(this);
  if (!selectElement.attr('multiple')){
   // create the select container
   selectElement.wrap('<div class="styled-select"></div>');
   selectContainer = selectElement.parent();
   selectContainer.children().before('<div class="styled-select-text"> </div>').each(function(){
 if (this.selectedIndex >= 0) $(this).prev().text(this.options[this.selectedIndex].innerHTML)
   });
   if (selectElement.parent().is(':visible'))
   selectContainer.width(selectElement.outerWidth()-2);
   else
   selectContainer.width(selectElement.outerWidth()-8);
   // hide the original select
   selectElement.css({'opacity':0,'position':'relative','left':'-1px','height':'24px','z-index':100});
   if (selectElement.css('display') == 'none')
   selectContainer.css({'display':'none'});
   // get and style the select text
   var selectText = selectContainer.children().prev();
   selectText.width(selectContainer.innerWidth()-selectElement.css('padding-right').replace(/px,*\)*/g,"")-selectElement.css('padding-left').replace(/px,*\)*/g,"")-selectText.css('padding-right').replace(/px,*\)*/g,"")-selectText.css('padding-left').replace(/px,*\)*/g,"")-selectContainer.innerHeight());
   // add events
   selectContainer.children().click(function(){
 selectText.html((this.options.length > 0 && this.selectedIndex >= 0 ? this.options[this.selectedIndex].innerHTML : ''));
   });
   selectContainer.children().change(function(){
 selectText.html((this.options.length > 0 && this.selectedIndex >= 0 ? this.options[this.selectedIndex].innerHTML : ''));
   });
  }
 });
}

Edited by mkwpfan (see edit history)
Link to comment
Share on other sites
Verito Newbie

Verito

Posted
Posted (edited)

Por cierto, el ancho que tiene ahora mismo es 143, no 144. A ver si encuentras 143.

 

Otras alternativa es cambiar el margen derecho de la clase .sortPagiBar

Ahora tienes:

 

.sortPagiBar p {

float: left;

margin-right: 10px;

}

 

Podría estar dentro del global.css.

 

Poniendo en ese margin-right 7px queda bien.

Edited by Verito (see edit history)
Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

No consigo localizar nada con ese ancho de 144px en la página 1 de la categoría el ancho es de 106px, por lo que supongo que debe ser automático, pero aún así no encuentro donde está definido eso para cambiarlo.

 

 

Creo que debo cambiarlo en el archivo formstyle.js de mi tema, pero no sé cómo. Dejo aquí el código donde creo que está definiendo el ancho, a ver si me podéis ayudar.

 

$(function(){
/***** Select *****/
$.fn.select_style = function(){
 return this.each(function(){
  selectElement = $(this);
  if (!selectElement.attr('multiple')){
// create the select container
selectElement.wrap('<div class="styled-select"></div>');
selectContainer = selectElement.parent();
selectContainer.children().before('<div class="styled-select-text"> </div>').each(function(){
 if (this.selectedIndex >= 0) $(this).prev().text(this.options[this.selectedIndex].innerHTML)
});
if (selectElement.parent().is(':visible'))
selectContainer.width(selectElement.outerWidth()-2);
else
selectContainer.width(selectElement.outerWidth()-8);
// hide the original select
selectElement.css({'opacity':0,'position':'relative','left':'-1px','height':'24px','z-index':100});
if (selectElement.css('display') == 'none')
selectContainer.css({'display':'none'});
// get and style the select text
var selectText = selectContainer.children().prev();
selectText.width(selectContainer.innerWidth()-selectElement.css('padding-right').replace(/px,*\)*/g,"")-selectElement.css('padding-left').replace(/px,*\)*/g,"")-selectText.css('padding-right').replace(/px,*\)*/g,"")-selectText.css('padding-left').replace(/px,*\)*/g,"")-selectContainer.innerHeight());
// add events
selectContainer.children().click(function(){
 selectText.html((this.options.length > 0 && this.selectedIndex >= 0 ? this.options[this.selectedIndex].innerHTML : ''));
});
selectContainer.children().change(function(){
 selectText.html((this.options.length > 0 && this.selectedIndex >= 0 ? this.options[this.selectedIndex].innerHTML : ''));
});
  }
 });
}

 

Estoy en el movil ahora mismo, por lo que no puedo leer bien el tema..

 

Si esto:

 

if (selectElement.parent().is(':visible'))
selectContainer.width(selectElement.outerWidth()-2);
else
selectContainer.width(selectElement.outerWidth()-8);

 

lo comentas a modo de prueba:

 

/* if (selectElement.parent().is(':visible'))
selectContainer.width(selectElement.outerWidth()-2);
else
selectContainer.width(selectElement.outerWidth()-8); */

 

(Recuerda limpiar la cache de tu navegador)

 

¿Te cambia algo?

 

Saludos,

Link to comment
Share on other sites
Guest
This topic is now closed to further replies.
 Share
Go to topic listing
×
×
  • Create New...