WPflybox not inline with button

  • Resolved helgesonk

    (@helgesonk)


    7 years, 8 months ago

    I am running your plugin on this site https://savalarm.staging.wpengine.com and it is working fine in Firefox, Chrome and Safari but I can get the box to line back up with the orange slide-out button. I have tried adjusting the CSS classes controlling the button and the box but haven’t had any luck. How do I get the box moved back up? Please let me know as soon as you get a chance. Thank you.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author cconoly

    (@cconoly)

    Try removing the css width for .wp-flybox_tab. It is currently set for 360px and as !important. .wp-flybox_tab is the wrapper for the entire tab. Your form is 362px and the button is 39px. When your container is smaller than the interior items it will stack them. Try changing the width to a larger number, or remove it all together and keep it at the default (auto).

    The css is inline and is rendering at line 49 for me. Below is a snippit of the css to help you find it… It is in the first line below…(wp-flybox_tab {width:360px !important;}

    textarea:focus {border-bottom-color: #f47c30 !important;}.bg-beta {background: #353535 !important;}.text-beta {color: #353535 !important;}.wp-flybox_tab {
  width:360px !important;
}
.wp-flybox_tab .ninja-forms-cont {
  width:300px;
}
#wp-flybox_tab1 .form-tab {
  background: rgba(0,0,0,.6) !important;
  border: #000000 1px solid !important;
  padding: 20px 30px 10px 30px !important;
}
.wp-flybox_tab .field-wrap, #ninja_forms_required_items {
  margin-bottom:6px !important;
}
.wp-flybox_tab input[type="text"], input[type="password"], input[type="email"], input[type="search"], textarea {
  border:1px solid #908e8f !important;
  background-color:#908e8f !important;
  color:#ffffff !important;
}
.wp-flybox_tab input[type="submit"]  {
  border:1px solid #908e8f !important;
  background: none !important;
  padding: 5px 21px !important;
}
.wp-flybox_tab input[type="submit"]:hover  {
  border:1px solid #f47c30 !important;
  background: #f47c30 !important;
  color:#ffffff !important;
}

    Let me know if you still have a problem. Thanks!

    • This reply was modified 7 years, 8 months ago by cconoly.
    Thread Starter helgesonk

    (@helgesonk)

    I had a feeling it was something simple that I overlooked. That worked! I had to add a width to #wp-flybox_tab1 .form-tab though in order to keep the box from getting super wide so that ended up being width:360px; instead. Thank you for your quick response!

    Plugin Author cconoly

    (@cconoly)

    OK great! I’m marking this topic as resolved. Let me know through a new thread if you run into anything else!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘WPflybox not inline with button’ is closed to new replies.