Skip to content

Instantly share code, notes, and snippets.

@tony-keller
Created August 15, 2018 09:10
Show Gist options
  • Save tony-keller/3dd7edcc6bf12d382e6f59d41812dd10 to your computer and use it in GitHub Desktop.
Save tony-keller/3dd7edcc6bf12d382e6f59d41812dd10 to your computer and use it in GitHub Desktop.
Inline Gravity form with one field - flexbox
.my-custom-wrapper{
.gform_wrapper {
margin:0;
//position: relative;
form{
display: flex!important;
justify-content: space-between;
.gform_body{
width:100%;
}
}
//Some Gravity garbage needs reset:
ul, li{
margin: 0!important;
padding: 0!important;
width:auto!important;
}
// The main validation error message comes and disrupt the flexbox,
// as it adds an item, so we hide since it is pretty useless:
.validation_error{
display: none!important;
}
input[type=text]{
width:calc(100% + 35px)!important; // this is to hide the end of input under the submit button.
height:40px;
padding: 6px 10px!important;
background: #FFF;
border: 1px solid #CCC;
font-size: 16px;
outline:none;
}
//the container of submit button:
.gform_footer {
width: auto;
input[type=submit] {
cursor: pointer;
margin: 0 !important;
height:40px!important;
padding: 6px 10px;
font-size: 16px;
}
}
}
}
@tony-keller
Copy link
Author

There is also a class made by Gravity form but it uses display: inline-table and I don't find it so good: .gf_simple_horizontal as seen here in the comments: https://www.ryanrudolph.com/creating-a-horizontal-gravity-form-using-css/#comment-14869

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment