Email Form Deformed

This is this file

http://www.sjktours.com/yt-assets/developing/templates %5Esj_decou%5Eless%5Eresponsive.css

In group @media (max-width: 767px)

This tries to make table responsive and stack its cells into row.

Hi Sergey,

Thanks for this quick reply, I had a look at the css code you mention, unfortunately, I must agree, I am not that good with css stuff, if someone here could help me to solve this issue, that would be very great because the Smartaddons guys are not answering to support request on their forum or they are taking days to answer to support request, so I hope someone here could assist me in this.

This is the code that you mention:

@media (max-width: 767px){

          //Bootstrap

          .row-fluid [class*="span"] {display: block;float: none;margin-left: 0;margin-right: 0;width: auto;}



          //Base Joomla

          #yt_wrapper {padding:0; font-size: 13px;}

              table {width: 100%; border-collapse: collapse; border-spacing: 0; display: block;

              //Responsive Tables

              #flip-scroll();

          }

          table.category{border: 1px solid #CCCCCC !important; border-collapse: collapse;border-spacing: 0; display: block; width: 100%;

            thead  tr{ 

              th{ background: none repeat scroll 0 0 #ddd; border-bottom: 0 none;

                  border-left: 0 none;border-radius: 0 0 0 0;  font-size: 100%;

                  display: block; min-height: 27px;padding: 7px 10px 5px; 

              }              

            } 

            tbody tr{ border-right: 1px solid #CCCCCC; display: inline-block; margin-left: -4px;vertical-align: top; border-left: none;              

              td{ border-bottom: 0 none; border-left: 0 none; border-right: 0 none; display: block; min-height: 26px; 

                  padding: 7px 10px 5px; text-align: left; background: transparent;

                }

            }

          }

Hope that someone can guide me through this.

Hope that someone can guide me through this.

Not sure what is the general idea for their very common table style overrides in responsive CSS. Never seen before.

Just had a quick look...,

A.) Make a backup! Then you might alter the TR, TD styles and their display property.

Or see for all common TABLE, TABLE TR, TABLE TD styles, then remove all of them. Check out the result. Does it behave normal?

B.) Alternatively, make a backup of the Cobalt Email-field FORM template. Add a unique ID to the TABLES. Maybe this prevents the style overrides from applying?!

@Sergey

Also had a quick look into the Email-field form template (default.php). Maybe a good idea to have another template with basic and standard bootstrap markup. No tables, please. I think you have already used it in article submission form.

Example - Markup

(fieldset / Div control-group / label / div controls etc.) :

<form class="form-horizontal">

<fieldset>

<!-- Form Name -->

<legend>Form Name</legend>

<!-- Text input-->

<div class="control-group">

  <label class="control-label" for="textinput">Text Input</label>

  <div class="controls">

    <input id="textinput" name="textinput" type="text" placeholder="placeholder" class="input-xlarge">

  </div>

</div>

<!-- Multiple Checkboxes -->

<div class="control-group">

  <label class="control-label" for="checkboxes">Multiple Checkboxes</label>

  <div class="controls">

    <label class="checkbox" for="checkboxes-0">

      <input type="checkbox" name="checkboxes" id="checkboxes-0" value="Option one">

      Option one

    </label>

    <label class="checkbox" for="checkboxes-1">

      <input type="checkbox" name="checkboxes" id="checkboxes-1" value="Option two">

      Option two

    </label>

  </div>

</div>

<!-- Select Basic -->

<div class="control-group">

  <label class="control-label" for="selectbasic">Select Basic</label>

  <div class="controls">

    <select id="selectbasic" name="selectbasic" class="input-xlarge">

      <option>Option one</option>

      <option>Option two</option>

    </select>

  </div>

</div>

<!-- etc. -->

</fieldset>

</form>

In fact I made it table to avoid what is happening right now. Since popup is a small window it always aligned into one column and table was a solution.

Hi,

At my side, problem is solved, after few complaints on there forum and sending ticket through their help desk, Smartaddons team finally came to my website and solved it out, the entire table code were edited as below:

@media (max-width: 767px) {

  .row-fluid [class*="span"] {

    display: block;

    float: none;

    margin-left: 0;

    margin-right: 0;

    width: auto;

  }

  #yt_wrapper {

    padding: 0;

    font-size: 13px;

  }

    table {

    width: 100%;

    border-collapse: collapse;

    border-spacing: 0;

    display: block;

  }

  table table.category {

    width: 100%;

    border-collapse: collapse;

    border-spacing: 0;

    display: block;

  }

  table th,

  table td {

    margin: 0;

    vertical-align: top;

  }

  table thead {

    display: block;

    float: left;

  }

  table tbody {

    width: auto;

    position: relative;

    overflow-x: auto;

    white-space: nowrap;

  }

  table tbody tr {

    border-right: 1px solid #ccc;

    vertical-align: top;

    border-left: 1px solid #ccc;

    margin-left: -4px;

  }

  table th:last-child,

  table td:last-child {



  }

  table th {

    display: block;

    text-align: right;

    border-bottom: 0;

    border-left: 0;

  }

  table td {



    padding: 7px 10px 8px;

    min-height: 11px;

    text-align: left;

    border-left: 0;

    border-right: 0;

    border-bottom: 0;

  }

  table.category {

    border: 1px solid #CCCCCC !important;

    border-collapse: collapse;

    border-spacing: 0;

    display: block;

    width: 100%;

  }

  table.category thead  tr th {

    background: none repeat scroll 0 0 #ddd;

    border-bottom: 0 none;

    border-left: 0 none;

    border-radius: 0 0 0 0;

    font-size: 100%;

    display: block;

    min-height: 27px;

    padding: 7px 10px 5px;

  }

  table.category tbody tr {

    border-right: 1px solid #CCCCCC;

    display: inline-block;

    margin-left: -4px;

    vertical-align: top;

    border-left: none;

  }

  table.category tbody tr td {

    border-bottom: 0 none;

    border-left: 0 none;

    border-right: 0 none;

    display: block;

    min-height: 26px;

    padding: 7px 10px 5px;

    text-align: left;

    background: transparent;

  }

A completely different structure and now email form look just fine, see below:

As usual, thank you very much for this very good support guys.

It looks like this time good support was from template developers.

Somehow yes, but it was more a template issue than an issue with Cobalt :D

Cobalt team is and will always remain the best of all...

Hello golfads,

I'm planning to buy Smartaddons templates; but, i'd like be sure that Cobalt works perfectly on SJ-Perty template. Can you tell me a little about your experience with this specific template please ?

Best regards.