
Important Note: Also please note that all CSS code I present here come without warranty - you need to try out for yourself and test everything thoroughly - especially for multiple screen sizes, devices or browsers! I would also recommend that you ensure you have a good understanding of HTML and CSS.
.sapCpInputWidget .sapCpInput { width: 100%; }
.sapCpInputWidget .sapCpDropDown { width: 100%; height: 38px; }
.sapCpNoteWidget .sapCpTextArea { width: 100%; }
.sapCpLayout {
display: flex;
flex-flow: wrap;
min-height: unset;
}
.sapCpWidget {
flex-basis: 100%;
width: 100%;
margin-top: 8px;
}
.sapCpContentPage:not(.sapCpContentPageEditable) .inline80,
.W2L-Fields-Wrapper .inline80 {
flex: 1 3 80%;
min-width: 150px;
}
.sapCpContentPage:not(.sapCpContentPageEditable) .inline70,
.W2L-Fields-Wrapper .inline70 {
flex: 1 1 70%;
min-width: 150px;
}
.sapCpContentPage:not(.sapCpContentPageEditable) .inline50,
.W2L-Fields-Wrapper .inline50 {
flex: 1 3 50%;
min-width: 150px;
}
.sapCpContentPage:not(.sapCpContentPageEditable) .inline30,
.W2L-Fields-Wrapper .inline30 {
flex: 1 1 30%;
min-width: 150px;
}
.sapCpContentPage:not(.sapCpContentPageEditable) .inline20,
.W2L-Fields-Wrapper .inline20 {
flex: 1 1 20%;
min-width: 150px;
}
.sapCpContentPage:not(.sapCpContentPageEditable) .inline,
.W2L-Fields-Wrapper .inline {
flex-basis: 150px;
flex-shrink: 1;
}
Field | Class |
Text: 'Personal Data' | |
First Name | inline50 |
Last Name | inline50 |
Street | inline80 |
House Number | inline20 |
Postal Code | inline30 |
City | inline70 |
Country | inline50 |
Region | inline50 |
E-mail Address | inline50 |
Mobile Phone | inline50 |
Text: 'Newsletter' | |
Subscription: 'Coffee' | inline |
Subscription: 'Chocolate' | inline |
Text: 'Permissions' | |
Permission: Email | inline |
Permission: Text Message | inline |
Permission: Phone | inline |
Permission: Facebook | inline |
Submit Button |
/******************************************************************************************
General comments:
- Prefix .sapCpContentPage:not(.sapCpContentPageEditable)
This disables the styles for the edit mode in the Form editor to avoid any
interference with the editor functionality (e.g. drag&drop)
- Prefix .W2L-Fields-Wrapper
This enables the styles if used/displayed as embedded form inside a Landing Page
- If you use a form embedded in a Landing Page it is recommended to set the parameter
"Label Placement" to "On Top" for best results
- The section "Fields width = 100%" is only needed to see a nice preview in the Forms
app. In the embedded form in a Landing Page the same is achieved with the
parameter "Label Placement" = "On Top"
- To enable form fields you need to add a CSS class in the "Advanced Properties"
section:
- inline20, inline30, inline50, inline70, inline80:
The number indicates the percentage of the width to use
- inline:
For checkboxes with a fixed width
******************************************************************************************/
/******************************************************************************************
Fields width = 100%
******************************************************************************************/
/*
This makes all fields fill 100% of the width.
*/
/*--- Text Input Fields ---*/
.sapCpInputWidget .sapCpInput {
width: 100%;
}
/*--- Dropdown Fields ---*/
.sapCpInputWidget .sapCpDropDown {
width: 100%;
height: 38px;
}
/*--- Note Field ---*/
.sapCpNoteWidget .sapCpTextArea {
width: 100%;
}
/******************************************************************************************
Switch to Flex Display Model
******************************************************************************************/
/*----------------------------------------------------------------------------------------
Set default to flex and width 100%
----------------------------------------------------------------------------------------*/
.sapCpLayout {
display: flex;
flex-flow: wrap;
min-height: unset;
}
.sapCpWidget {
flex-basis: 100%;
width: 100%;
margin-top: 8px;
}
/*-----------------------------------------------------------------------------------------
Custom classes 'inline##' for different widths
-----------------------------------------------------------------------------------------*/
.sapCpContentPage:not(.sapCpContentPageEditable) .inline80,
.W2L-Fields-Wrapper .inline80 {
flex: 1 3 80%;
min-width: 150px;
}
.sapCpContentPage:not(.sapCpContentPageEditable) .inline70,
.W2L-Fields-Wrapper .inline70 {
flex: 1 1 70%;
min-width: 150px;
}
.sapCpContentPage:not(.sapCpContentPageEditable) .inline50,
.W2L-Fields-Wrapper .inline50 {
flex: 1 3 50%;
min-width: 150px;
}
.sapCpContentPage:not(.sapCpContentPageEditable) .inline30,
.W2L-Fields-Wrapper .inline30 {
flex: 1 1 30%;
min-width: 150px;
}
.sapCpContentPage:not(.sapCpContentPageEditable) .inline20,
.W2L-Fields-Wrapper .inline20 {
flex: 1 1 20%;
min-width: 150px;
}
/*-----------------------------------------------------------------------------------------
Custom class 'inline' for checkbox elements
-----------------------------------------------------------------------------------------*/
.sapCpContentPage:not(.sapCpContentPageEditable) .inline,
.W2L-Fields-Wrapper .inline {
flex-basis: 160px;
flex-shrink: 1;
}
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
4 | |
4 | |
3 | |
1 | |
1 | |
1 | |
1 | |
1 | |
1 | |
1 |