JCrowNM
October 19, 2023, 10:15pm
1
There is a module that was developed for my site that includes a form called form-with-text. I added CSS to the module to allign radio buttons horizontally:
#radioGroup .wrap {
display: inline-block;
}
#radioGroup label {
display: block;
text-align: center;
margin: 0 0.2em;
}
#radioGroup input[type="radio"] {
display: block;
margin: 0.5em auto;
}
In the page editor I added the Custom Class and Custom ID as so:
It still isn’t working. Can anyone tell me what I am doing wrong?
Thanks,
Jonathan
Hi @JCrowNM ,
Thanks for reaching out!
I understand that you would add CSS to align radio buttons horizontally on a custom module, however, it’s not working, correct?
Are you seeing an error message or are the radio buttons not aligning as expected? Do you have any screenshots and/or links to the webpage with the module so we can take a look?
Thank you!
Best,
Kristen
Hi Kristen,
Thanks for the response. No, there is no error message, it is just that the radio buttons appear vertically rather than horizontally.
The page is at NJSBA Contacts Us Page
I have tried adding the CSS to the module HTML and forcing it via !important.
I have tried calling the class and id from the page fields (shown in screenshot above).
I can manipulate the code in the Chrome DevTools to get it to look like this:
Which is the direction I want to go in instead of this:
But I just need to get the CSS to override whatever the defaults are for this specific page or module.
Thanks,
Jonathan
@JCrowNM , it appears you got it working! If you are still seeing the vertical version, make sure to bust the cache
Thanks. I did. I would still like to know how to use the Custom Class and Custom ID fields in the page editor, but for now at least I have it working in the straight up CSS.
Can you post the module code? When you apply that custom class, do you see it in the dev inspector?
Here is the module code:
<div{% if module.custom_id %} id="{{ module.custom_id }}"{% else %} id="{{ module.hero_content.heading|striptags|lower|replace(' ','-') }}"{% endif %} class="form-with-text-wrapper {{'form-with-text-wrapper-'~name}} {{ module.custom_class }}">
<div class="container">
{# BACKGROUND OPTIONS #}
<div class="bg-type">
{% if module.style.hero_background_type.background_type =='img' %}
<div class="img">
<img src="{{ module.style.hero_background_type.image_field.src }}" alt="{{ module.hero_background_type.image_field.alt }}" {{ loadingAttr }} {{ sizeAttrs }}>
</div>
{% elif module.style.hero_background_type.background_type =='color' %}
<div class="clr"></div>
{% endif %}
</div>
{# CONTENT #}
<div class="column-group">
{# CONTENT column#}
<div class="content-column">
<div class="column-inner">
{% if module.hero_content.heading_type =='h1' %}
<h1 class="title">{{ module.hero_content.heading }}</h1>
{% elif module.hero_content.heading_type =='h2' %}
<h2 class="title">{{ module.hero_content.heading }}</h2>
{% elif module.hero_content.heading_type =='h3' %}
<h3 class="title">{{ module.hero_content.heading }}</h3>
{% elif module.hero_content.heading_type =='h4' %}
<h4 class="title">{{ module.hero_content.heading }}</h4>
{% endif %}
<div class="description">{{ module.hero_content.content }}</div>
</div>
</div>
{# form column#}
<div class="form-column">
<div class="form-inner">
{% if module.hero_image.check_for_form_title %}
<h3 class="form_title">{{ module.hero_image.form_title }}</h3>
{% endif %}
{% form
form_to_use="{{ module.hero_image.form_field.form_id }}"
response_response_type="{{ module.hero_image.form_field.response_type }}"
response_message="{{ module.hero_image.form_field.message }}"
response_redirect_id="{{ module.hero_image.form_field.redirect_id }}"
response_redirect_url="{{module.hero_image.form_field.redirect_url}}"
gotowebinar_webinar_key="{{ module.hero_image.form_field.gotowebinar_webinar_key }}"
%}
</div>
</div>
</div>
</div>
</div>
{#CUSTOM CSS#}
{% require_css %}
<style>
/* Align radio buttons horizontally */
form .inputs-list {
display: flex!important;
list-style: none!important;
margin: 5px!important;
padding: 5px!important;
}
form .inputs-list>li {
padding: 15px!important;
display: flex!important;
margin: .7rem 0!important;
}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper {
position:relative;overflow:hidden;
{{ module.style.section_spacing.spacing.css }}
}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .bg-type .clr {
width:100%;height:100%;position:absolute;left:0;top:0;z-index:-1;
background:rgba({{ module.style.hero_background_type.color_field.color|convert_rgb }},{{ module.style.hero_background_type.color_field.opacity~'%' }});
}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .bg-type{background-size:cover;background-repeat:no-repeat;background-position:center center}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .bg-type img,
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .bg-type .video{position:absolute;top:0;left:0;z-index:-1;width:100%;min-width:100%;min-height:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .column-group{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;margin:0 -20px}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .column-group .content-column{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;width:50%;padding:0 20px;-webkit-box-sizing:border-box;box-sizing:border-box}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .column-group .form-column{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;width:50%;padding:0 20px;-webkit-box-sizing:border-box;box-sizing:border-box}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner{padding:40px}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner .form-title{display:none}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner form .hs-form-field label{font-size:16px}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner form .hs-input{font-size:16px;padding:10px;background:#fff;border-radius:0;border:2px solid #d1dacc;margin-right:15px;width:100%;display:block;-webkit-box-sizing:border-box;box-sizing:border-box}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner form .hs-input:focus,
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner form .hs-input:hover{outline:0}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner form input.hs-button{min-width:160px;font-size:16px;line-height:22px;color:#344263;background:#81d8fd;padding:10px 50px;border:none;cursor:pointer;border:2px solid #81d8fd}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner form ul.hs-error-msgs{padding:0;list-style:none;margin-top:0}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .submitted-message{
color: {{ module.style.form_settings.form_success_message_settings.title_primary_color.color }};
{{ module.style.form_settings.form_success_message_settings.title_alignment_field_1.css }};
}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner form .hs_error_rollup { display:none; }
{% if module.style.check_to_set_container_width %}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .container { max-width:{{ module.style.container_width }}px;margin:0 auto; }
{% endif %}
{% if module.image_position =='left' %}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .column-group .form-column{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .column-group .content-column{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;padding-bottom:30px}
{% elif module.image_position =='right' %}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .column-group .form-column{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;padding-bottom:30px}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .column-group .content-column{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}
{% elif module.image_position =='text_top' %}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .column-group{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-width:850px;margin-right:auto;margin-left:auto}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .column-group .content-column,
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .column-group .form-column{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;padding:0 20px;-webkit-box-sizing:border-box;box-sizing:border-box}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .column-group .content-column{padding-bottom:30px}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner form fieldset{max-width:100%}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner form .actions{text-align:center}
{% endif %}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .content-column .title {
margin-top:0;margin-bottom:15px;
{{ module.style.heading_settings.textalignment_field.css }};
color:{{ module.style.heading_settings.color_field_2.color }};
}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .content-column .description h2,
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .content-column .description h3,
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .content-column .description h4,
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .content-column .description h5,
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .content-column .description h6{
margin:0 0 15px;
{{ module.style.content_settings.textalignment_field.css }};
color:{{ module.style.content_settings.color_field_2.color }};
}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .content-column .description,
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .content-column .description p,
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .content-column .description ul li,
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .content-column .description ol li{
{{ module.style.content_settings.textalignment_field.css }};
color:{{ module.style.content_settings.color_field_2.color }};
}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .content-column .description ul li,
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .content-column .description ol li{ margin-bottom:10px; }
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .content-column .description p:last-child,
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .content-column .description ul li:last-child,
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .content-column .description ol li:last-child{ margin-bottom:0; }
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .content-column .btn-grp{ {{ module.style.button_settings.button_alignment.css }} }
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .column-group .form-column .form_title{
margin:0 0 30px;
color:{{ module.style.form_settings.form_title_settings.title_primary_color.color }};
{{ module.style.form_settings.form_title_settings.title_alignment_field_1.css }}
}
{% if module.style.form_settings.form_styling.form_background_type =='bg_clr' %}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner { background:rgba({{ module.style.form_settings.form_styling.color_field_1.color|convert_rgb }},{{ module.style.form_settings.form_styling.color_field_1.opacity~'%' }}); }
{% elif module.style.form_settings.form_styling.form_background_type =='transparent' %}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner { background:transparent;padding:0; }
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner form .hs-input { border-color:#fff; }
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner form .submitted-message { color:#fff; }
{% endif %}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner form .hs-input,
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner form .hs-form-field label,
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner form .hs-input::placeholder { color:{{ module.style.form_settings.form_text_settings.content_color.color }}; }
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner form .actions{ margin-right:8px;{{ module.style.form_settings.button_settings.button_alignment.css }}; }
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner form label.hs-error-msg{ color:#f00;font-size:14px; }
/*BUTTON HOVER*/
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner form input.hs-button {
background:rgba({{ module.style.form_settings.button_settings.background_color_.color|convert_rgb }},{{ module.style.form_settings.button_settings.background_color_.opacity~'%' }});
color:{{ module.style.form_settings.button_settings.text_color.color }};
border:2px solid {{ module.style.form_settings.button_settings.border_color_.color }};
border-radius:{{ module.style.form_settings.button_settings.border_radius }}px;
}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner form input.hs-button:hover{
background:rgba({{ module.style.form_settings.button_settings.background_color.color|convert_rgb }},{{ module.style.form_settings.button_settings.background_color.opacity~'%' }});
color:{{ module.style.form_settings.button_settings.hover_text_color.color }};
border:2px solid {{ module.style.form_settings.button_settings.border_color.color }};
}
/*MOBILES STYLE*/
@media(max-width:1024px){
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper{ {{ module.style.section_spacing.ipad_spacing.css }}; }
}
@media(max-width:767px){
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper{ {{ module.style.section_spacing.mobile.css }} }
{% if module.image_position =='left' %}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .column-group .form-column { order:1;padding-bottom:30px; }
{% elif module.image_position =='right' %}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .column-group .content-column { order:1;padding-bottom:30px; }
{% endif %}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .column-group .content-column { flex:0 0 100%;width:100%; }
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .column-group .content-column br {
display:none;
}
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .column-group .form-column { flex:0 0 100%;width:100%; }
.{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .content-column .contact-button { min-width:120px; }
}
</style>
{% end_require_css %}
When I apply the custom class I don’t see it in the inspector. I was able to just make everything !important and it worked, but it would be nice to have another class that can be referenced from the page editor.
Thanks,
Jonathan
Ok. So that if statement in the beginning must not be working properly.
In the module again, look for the text field with the label C ustom ID. We need to make sure that the name is the same as in the if statement.
It should be custom_id
If it is not, change the name of it to be that.
If you are looking in the design manager, you can click on the field name in the right sidebar and have an option to copy the HubL variable value. Clicking on that and pasting it somewhere should return this: {{ module.custom_id }}
I copied the variable and got {{ module.custom_id }}
@Anton , do you see anything i am missing here?
my next step would be to clone the module put those two variables outside to print to screen. the class one is not enclosed in the if statement so it should be printing.
JCrowNM
November 27, 2023, 7:23pm
11
I tried creating a class in both the module.html and then the module.css:
.fmtest {
color: red!important;
font-size: 100px!important;
padding: 100px!important;
}
I then tried adding the custom class “.fmtest” and “fmtest” to the Custom Class field on the Form With Text page editor.
Nothing changed.
