Hi,
I’m writing about an issue I have with the phone version of Chronoforms. I have a form with a dropdown that has very long lines, which causes it to overflow past the div. I’d like to know if there is some way to cut it so id adjusts to the phone’s screen size.
This is a screencap of how it looks now.
And this is the code I use on the form at this point.
<hr>
<a name="ancla"></a>
<!--EMPIEZACABECERA-->
<div class="form-group gcore-form-row" id="form-row-custom"><div class="gcore-input gcore-display-table" id="fin-custom" width><p style="text-align: center"><img src="http://www.gemmavilapages.com/web/images/images/elementos/formulario_icono_consulta.jpg"></p>
<br></br>
<p>Las consultas se pueden realizar vía telefónica llamando al <span style="color: #a576aa"><strong>+34 622 08 29 30</strong></span>, de forma online (Skype) o de forma presencial. </p>
<p>Si prefieres hacerlo vía Skype o de forma presencial, sólo tienes que enviar este formulario y en breve me pondré en contacto contigo para confirmar la cita.</p>
<p style="text-align: left"><img src="http://www.gemmavilapages.com/web/images/images/elementos/paypal.png"> Los pagos se pueden realizar a través de Paypal.</p></div></div>
<!--FORMULARIO INICIO-->
<!--BORDEFORMULARIO--><div style="border: 1px solid #a576aa; padding: 20px;">
<div style="padding-bottom: 20px;">
<!--TÍTULO-->
<p style="color: #a576aa; font-size: 125%; font-weight: bold">CONSULTAS</p>
<div class="form-group gcore-form-row" id="form-row-Elige un curso"><label for="Elige una consulta" class="control-label gcore-label-left">Elige una consulta</label>
<div class="gcore-input gcore-display-table" id="fin-Elige un curso"><select name="Cursos_elegido" id="Elige un curso" size="" class="validate['required'] form-control A" title="" style="" data-load-state="" data-tooltip="">
<option value="Consulta numerológica personal con interpretación de la firma">Consulta numerológica personal con interpretación de la firma</option>
<option value="Consulta numerológica de empresa ">Consulta numerológica de empresa</option>
<option value="Lectura General ">Lectura General</option>
<option value="Lectura de vidas pasadas">Lectura de Vidas Pasadas</option>
<option value="Lectura de relaciones">Lectura de Relaciones</option>
<option value="Lectura de prosperidad y abundancia">Lectura de Prosperidad y Abundancia</option>
<option value="Lectura de Viajes y/o Camino Espiritual">Lectura de Viajes y/o Camino Espiritual</option>
<option value="Lectura de Energía Femenina">Lectura de Energía Femenina</option>
<option value="Desprogramación Biológica">Desprogramación Biológica</option>
<option value="Lectura de Prosperidad y Abundancia">Lectura de Prosperidad y Abundancia</option>
<option value="Consulta numerológica de empresa">Consulta numerológica de empresa</option>
<option value="Selección de personal a través de numerología y grafología">Selección de personal a través de numerología y grafología</option>
</select></div></div></div>
<div style="padding-bottom: 20px;">
<!--DATOS PERSONALES-->
<p style="color: #a576aa; font-size: 125%; font-weight: bold">DATOS PERSONALES</p><div class="form-group gcore-form-row" id="form-row-Nombre y apellidos"><label for="Nombre y apellidos" class="control-label gcore-label-left">Nombre y apellidos</label>
<div class="gcore-input gcore-display-table" id="fin-Nombre y apellidos"><input name="text11" id="Nombre y apellidos" value="" placeholder="" maxlength="" size="48%" class="validate['required','nodigit'] form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div><div class="form-group gcore-form-row" id="form-row-Mail"><label for="Mail" class="control-label gcore-label-left">Mail</label>
<div class="gcore-input gcore-display-table" id="fin-Mail"><input name="Mail" id="Mail" value="" placeholder="" maxlength="" size="59%" class="validate['required','email'] form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div><div class="form-group gcore-form-row" id="form-row-multi-37"><div class="gcore-subinput-container" id="fitem-text24"><label for="text24" class="control-label gcore-label-left">Teléfono</label>
<div class="gcore-input pull-left gcore-sub-input gcore-display-table" id="fin-text24"><input name="telefono" id="text24" value="" placeholder="" maxlength="" size="28%" class="validate['required','digit'] form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div>
<div class="gcore-subinput-container" id="fitem-text25"><label for="text25" class="control-label gcore-label-left">País</label>
<div class="gcore-input pull-left gcore-sub-input gcore-display-table" id="fin-text25"><input name="Pais" id="text25" value="" placeholder="" maxlength="" size="17%" class="validate['required','nodigit'] form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div></div>
</div>
<div style="padding-bottom: 20px;">
<!--MODALIDAD-->
<p style="color: #a576aa; font-size: 125%; font-weight: bold">MODALIDAD</p><div class="form-group gcore-form-row" id="form-row-multi-65"><div class="gcore-subinput-container" id="fitem-radio65"><div class="gcore-input pull-left gcore-sub-input gcore-display-table" id="fin-radio65"><div class="gcore-single-column" id="fclmn"><div class="gcore-radio-item" id="fitem"><input name="radio65" id="radio65" value="Skype" class="validate['group:65'] A" title="" style="" data-load-state="" data-tooltip="" type="radio" />
<label class="control-label gcore-label-checkbox" for="radio65">Skype</label></div>
<div class="gcore-radio-item" id="fitem1"><input name="radio65" id="radio651" value="Presencial" class="validate['group:65'] A" title="" style="" data-load-state="" data-tooltip="" type="radio" />
<label class="control-label gcore-label-checkbox" for="radio651">Presencial (Barcelona)</label></div>
<div class="gcore-radio-item" id="fitem2"><input name="radio65" id="radio652" value="Teléfono" class="validate['group:65'] A" title="" style="" data-load-state="" data-tooltip="" type="radio" />
<label class="control-label gcore-label-checkbox" for="radio652">Teléfono</label></div></div></div></div>
<div class="gcore-subinput-container" id="fitem-text66"><label for="text66" class="control-label gcore-label-left">Nombre usuario</label>
<div class="gcore-input pull-left gcore-sub-input gcore-display-table" id="fin-text66"><input name="text66" id="text66" value="" placeholder="" maxlength="" size="" class="form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div></div>
</div>
<div style="padding-bottom: 20px;">
<!--FECHAHORA-->
<p style="color: #a576aa; font-size: 125%; font-weight: bold">FECHA/HORA</p><div class="form-group gcore-form-row" id="form-row-multi-43"><div class="gcore-subinput-container" id="fitem-datepicker27"><label for="datepicker27" class="control-label gcore-label-left">Día</label>
<div class="gcore-input pull-left gcore-sub-input gcore-display-table" id="fin-datepicker27"><input name="datepicker27" id="datepicker27" value="" data-gdatetimepicker-format="d-m-Y" placeholder="" size="" class="validate['required'] form-control A" title="" style="" data-load-state="" data-tooltip="" type="text" data-fieldtype="gdatetimepicker" data-start_view="d" /></div></div>
<div class="gcore-subinput-container" id="fitem-text28"><label for="text28" class="control-label gcore-label-left">Hora</label>
<div class="gcore-input pull-left gcore-sub-input gcore-display-table" id="fin-text28"><input name="text28" id="text28" value="" placeholder="18:00" maxlength="5" size="" class="validate['required','nospace'] form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div></div><div class="form-group gcore-form-row" id="form-row-custom1"><div class="gcore-input gcore-display-table" id="fin-custom1">*Por favor, ten en cuenta que el horario hace referencia a la hora local de España. Si escribes desde otro país, por favor, calcula cual sería tu hora elegida.</div></div><div class="form-group gcore-form-row" id="form-row-button4"><div class="gcore-input gcore-display-table" id="fin-button4"><input name="Enviar" id="button4" type="submit" value="enviar" class="btn btn-default_B form-control A" style="" data-load-state="" <p style=""color: #a576aa; font-size: 125%; font-weight: bold">DATOS PERSONALES</p>" /></div></div></div></div>
Is there a way to truncate the text so it doesn’t overflow?
Thanks
I’m writing about an issue I have with the phone version of Chronoforms. I have a form with a dropdown that has very long lines, which causes it to overflow past the div. I’d like to know if there is some way to cut it so id adjusts to the phone’s screen size.
This is a screencap of how it looks now.
And this is the code I use on the form at this point.
<hr>
<a name="ancla"></a>
<!--EMPIEZACABECERA-->
<div class="form-group gcore-form-row" id="form-row-custom"><div class="gcore-input gcore-display-table" id="fin-custom" width><p style="text-align: center"><img src="http://www.gemmavilapages.com/web/images/images/elementos/formulario_icono_consulta.jpg"></p>
<br></br>
<p>Las consultas se pueden realizar vía telefónica llamando al <span style="color: #a576aa"><strong>+34 622 08 29 30</strong></span>, de forma online (Skype) o de forma presencial. </p>
<p>Si prefieres hacerlo vía Skype o de forma presencial, sólo tienes que enviar este formulario y en breve me pondré en contacto contigo para confirmar la cita.</p>
<p style="text-align: left"><img src="http://www.gemmavilapages.com/web/images/images/elementos/paypal.png"> Los pagos se pueden realizar a través de Paypal.</p></div></div>
<!--FORMULARIO INICIO-->
<!--BORDEFORMULARIO--><div style="border: 1px solid #a576aa; padding: 20px;">
<div style="padding-bottom: 20px;">
<!--TÍTULO-->
<p style="color: #a576aa; font-size: 125%; font-weight: bold">CONSULTAS</p>
<div class="form-group gcore-form-row" id="form-row-Elige un curso"><label for="Elige una consulta" class="control-label gcore-label-left">Elige una consulta</label>
<div class="gcore-input gcore-display-table" id="fin-Elige un curso"><select name="Cursos_elegido" id="Elige un curso" size="" class="validate['required'] form-control A" title="" style="" data-load-state="" data-tooltip="">
<option value="Consulta numerológica personal con interpretación de la firma">Consulta numerológica personal con interpretación de la firma</option>
<option value="Consulta numerológica de empresa ">Consulta numerológica de empresa</option>
<option value="Lectura General ">Lectura General</option>
<option value="Lectura de vidas pasadas">Lectura de Vidas Pasadas</option>
<option value="Lectura de relaciones">Lectura de Relaciones</option>
<option value="Lectura de prosperidad y abundancia">Lectura de Prosperidad y Abundancia</option>
<option value="Lectura de Viajes y/o Camino Espiritual">Lectura de Viajes y/o Camino Espiritual</option>
<option value="Lectura de Energía Femenina">Lectura de Energía Femenina</option>
<option value="Desprogramación Biológica">Desprogramación Biológica</option>
<option value="Lectura de Prosperidad y Abundancia">Lectura de Prosperidad y Abundancia</option>
<option value="Consulta numerológica de empresa">Consulta numerológica de empresa</option>
<option value="Selección de personal a través de numerología y grafología">Selección de personal a través de numerología y grafología</option>
</select></div></div></div>
<div style="padding-bottom: 20px;">
<!--DATOS PERSONALES-->
<p style="color: #a576aa; font-size: 125%; font-weight: bold">DATOS PERSONALES</p><div class="form-group gcore-form-row" id="form-row-Nombre y apellidos"><label for="Nombre y apellidos" class="control-label gcore-label-left">Nombre y apellidos</label>
<div class="gcore-input gcore-display-table" id="fin-Nombre y apellidos"><input name="text11" id="Nombre y apellidos" value="" placeholder="" maxlength="" size="48%" class="validate['required','nodigit'] form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div><div class="form-group gcore-form-row" id="form-row-Mail"><label for="Mail" class="control-label gcore-label-left">Mail</label>
<div class="gcore-input gcore-display-table" id="fin-Mail"><input name="Mail" id="Mail" value="" placeholder="" maxlength="" size="59%" class="validate['required','email'] form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div><div class="form-group gcore-form-row" id="form-row-multi-37"><div class="gcore-subinput-container" id="fitem-text24"><label for="text24" class="control-label gcore-label-left">Teléfono</label>
<div class="gcore-input pull-left gcore-sub-input gcore-display-table" id="fin-text24"><input name="telefono" id="text24" value="" placeholder="" maxlength="" size="28%" class="validate['required','digit'] form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div>
<div class="gcore-subinput-container" id="fitem-text25"><label for="text25" class="control-label gcore-label-left">País</label>
<div class="gcore-input pull-left gcore-sub-input gcore-display-table" id="fin-text25"><input name="Pais" id="text25" value="" placeholder="" maxlength="" size="17%" class="validate['required','nodigit'] form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div></div>
</div>
<div style="padding-bottom: 20px;">
<!--MODALIDAD-->
<p style="color: #a576aa; font-size: 125%; font-weight: bold">MODALIDAD</p><div class="form-group gcore-form-row" id="form-row-multi-65"><div class="gcore-subinput-container" id="fitem-radio65"><div class="gcore-input pull-left gcore-sub-input gcore-display-table" id="fin-radio65"><div class="gcore-single-column" id="fclmn"><div class="gcore-radio-item" id="fitem"><input name="radio65" id="radio65" value="Skype" class="validate['group:65'] A" title="" style="" data-load-state="" data-tooltip="" type="radio" />
<label class="control-label gcore-label-checkbox" for="radio65">Skype</label></div>
<div class="gcore-radio-item" id="fitem1"><input name="radio65" id="radio651" value="Presencial" class="validate['group:65'] A" title="" style="" data-load-state="" data-tooltip="" type="radio" />
<label class="control-label gcore-label-checkbox" for="radio651">Presencial (Barcelona)</label></div>
<div class="gcore-radio-item" id="fitem2"><input name="radio65" id="radio652" value="Teléfono" class="validate['group:65'] A" title="" style="" data-load-state="" data-tooltip="" type="radio" />
<label class="control-label gcore-label-checkbox" for="radio652">Teléfono</label></div></div></div></div>
<div class="gcore-subinput-container" id="fitem-text66"><label for="text66" class="control-label gcore-label-left">Nombre usuario</label>
<div class="gcore-input pull-left gcore-sub-input gcore-display-table" id="fin-text66"><input name="text66" id="text66" value="" placeholder="" maxlength="" size="" class="form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div></div>
</div>
<div style="padding-bottom: 20px;">
<!--FECHAHORA-->
<p style="color: #a576aa; font-size: 125%; font-weight: bold">FECHA/HORA</p><div class="form-group gcore-form-row" id="form-row-multi-43"><div class="gcore-subinput-container" id="fitem-datepicker27"><label for="datepicker27" class="control-label gcore-label-left">Día</label>
<div class="gcore-input pull-left gcore-sub-input gcore-display-table" id="fin-datepicker27"><input name="datepicker27" id="datepicker27" value="" data-gdatetimepicker-format="d-m-Y" placeholder="" size="" class="validate['required'] form-control A" title="" style="" data-load-state="" data-tooltip="" type="text" data-fieldtype="gdatetimepicker" data-start_view="d" /></div></div>
<div class="gcore-subinput-container" id="fitem-text28"><label for="text28" class="control-label gcore-label-left">Hora</label>
<div class="gcore-input pull-left gcore-sub-input gcore-display-table" id="fin-text28"><input name="text28" id="text28" value="" placeholder="18:00" maxlength="5" size="" class="validate['required','nospace'] form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div></div><div class="form-group gcore-form-row" id="form-row-custom1"><div class="gcore-input gcore-display-table" id="fin-custom1">*Por favor, ten en cuenta que el horario hace referencia a la hora local de España. Si escribes desde otro país, por favor, calcula cual sería tu hora elegida.</div></div><div class="form-group gcore-form-row" id="form-row-button4"><div class="gcore-input gcore-display-table" id="fin-button4"><input name="Enviar" id="button4" type="submit" value="enviar" class="btn btn-default_B form-control A" style="" data-load-state="" <p style=""color: #a576aa; font-size: 125%; font-weight: bold">DATOS PERSONALES</p>" /></div></div></div></div>
Is there a way to truncate the text so it doesn’t overflow?
Thanks