Okay
  Public Ticket #670013
Form Select, Minimal Style
Closed

Comments

  • Nicolás started the conversation

    There any way to put a select input in a Minimal Styled form, to looks according to others text inputs?

    (Sorry for my english).

    My contact form 7 code:

    <div class="row">
     
    <div class="col span_3">
    <div class="minimal-form-input">
    <label for="your-name"><span class="text"><span class="text-inner">Nombre*</span></span></label>
    [text* your-name]
    </div>
    </div>
     
    <div class="col span_3">
    <div class="minimal-form-input">
    <label for="your-name"><span class="text"><span class="text-inner">Email</span></span></label>
    [email your-email]
    </div>
    </div>
     
    <div class="col span_3">
    <div class="minimal-form-input">
    <label for="your-name"><span class="text"><span class="text-inner">Teléfono</span></span></label>
    [tel your-tel]
    </div>
    </div>
    
    
    <div class="col span_3 col_last">
    <div class="minimal-form-input">
    <label for="your-name"><span class="text"><span class="text-inner">Tipo de Cobertura*</span></span></label>
    [select* tipo-cobertura "Tipo1" "Tipo2" "Tipo3"]
    </div>
    </div>
    
    
    <p>
    <div class="minimal-form-input textarea has-text">
    <label for="your-message"><span class="text"><span class="text-inner">Mensaje</span></span></label>
    [textarea your-message]
    </div>
    </p>
     
    </div>
    [submit "Enviar"]
  •  8,394
    Tahir replied
    Hey,

    Please provide the page url so that i can write up the custom css for whats possible.

    Thanks


    ThemeNectar Support Team 

  •  8,394
    Tahir replied

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
    body[data-fancy-form-rcs=\"1\"] .fancy-select-wrap {
        padding-top: 37px !important;
    }

    Best.



    ThemeNectar Support Team 

  • Nicolás replied

    Thanks for your reply Tahir, but this doesn\'t solve the problem (Image attached).

    PD: I also noticed that the console gives the following error: \"Failed to load resource: the server responded with a status of 404 (Not Found)\" for /wp-content/themes/salient/images/select2-spinner.gif

  •  8,394
    Tahir replied

    Hey Again,

    Remove the padding and add this instead:

    body[data-form-style=\"minimal\"] .minimal-form-input .fancy-select-wrap label span.text {
        margin-top: -17px !important;
    }
    
    
    body[data-form-style=\"minimal\"] .minimal-form-input.filled .fancy-select-wrap label span.text {
        margin-top: 12px !important;
    }

    Best.


    ThemeNectar Support Team 

  • Nicolás replied

    Thank you, that solve the problem.

    I recommend that you implement this kind of selectors on future versions for minimal forms: http://materializecss.com/forms.html#select

    Regards!