It seems I don’t understand Classes and ID inside webflow.
Have a glance on the screen copy.
I’m trying to make a form.
Then I have several input_field.
First question : is it a good way of giving them their own name ? I wan’t them to have the same looking but sometimes the horizontal size can be different. So I gave them (as you can see) the following name :
label_field type_porteur
label_fied nom_porteur
Are type_porteur and nom_porteur IDs ?
I’m lost because I have given names to the alerting icons like
pancarte_err type_porteur
and
ico_aide type_port because when I write ico_aide type_porteur then properties of type_porteur win.
Webflow doesnt use ID’s. Everything is a class. The second ‘class’ you have entered is the nested class. Webflow handles classes a little differently and it can be confusing at times. Think of the nested class as a variation of the parent style. For inputs I would define a master style applicable to the entire site then apply nested classes where appropriate to style up differently in certain situations. e.g. if I needed an input at 50% width of its parent DOM container. I sometimes use nested classes as fake pseudo classes (first, last etc) perhaps to clear floats etc.
As far as I know, nested classes in Webflow behave in the same way if it were manually written like this:
Note the second example would only affect child DOM elements whereas the first affects the same DOM element with the nested class applied.
As much as Webflow proclaims to be a designers tool, it does help to have some HTML/CSS knowledge up front, as their design environment is basically a GUI for CSS (albeit limited)
a. use as short of class name as possible
b. use as few class names as possible. For example, in most cases, there is no reason to assign classes to containers, rows or columns and other elements that already have responsive styling.
It is ok to use classes on everything, but the more classes you have assigned, the more confusing the site design can potentially get if you have to go back and make changes later.
Finally, I would recommend to clean your unused styles from time to time in the Style Manager.
I hope this helps. If not, please let me know – I’m happy to assist further!
Thank you very much nativerez and Dave for you quick replies.
I’m so sorry but I must be not connected today.
I don’t understand why.
I have to define ID for my different form if I wan’t, for example, to show help icons by using js… don’t have ?
If a help is defined then I can show the icon and if not then I hide it. But if I name all my help icons with the same name then they’ll all disappear no ?
What would you advise me to name in this case ?
I really do blockage today !
Hi @Stefan_fr, thanks for your update. I am not quite sure I understand the question, but you can give your elements an ID or a Class. Both are optional. You can refer to elements in javascript by either ID or Class name.
If you are using js to modify some element by class name, the js will affect all elements having the same class name. If you have an element with multiple nested classes assigned, then I would use the ID to refer to your elements instead of by the class names.
Each form has it’s own settings. In form settings (on the settings tab), you can give each form a different name.
Inside my form I have several fields. These fields have the same visual style but sometimes I wan’t to have à fied shorter in horizontal size (50% or 35% instead of 100% of width) close to each field. I have mocked-up an help icon and an alerting icon. Alerting icon is for required field and help icon is for this field help. This icon is displayed only if an help is defined. If it doesn’t exist then the icon is not displayed. That’s why I thought I had to give to each icon an ID in order to manage the displays individually.
As you can see on the screen I sent my field style are same but size etc… can differ.
I don’t know if I have to class like this :
field_name porteur
entry_field porteur
help_icon porteur
alerting_icon porteur
If I do this, porteur’s class attribute wins and I don’t understand why
That’s why I wondered if I had to ID all the field
I don’t know if it’s very clear !
I must be tired and nothing works today in my design approach.
You would not refer to the porteur nested class. I would give each field it’s own class name, or ID and refer to those unique classes or ID when setting the visibility for the icons. I can tell more, if I know how you are trying to change this in the code.
or are you talking about a (CSS) “class name”… and element width - as they are used / incorporated in html.
If class name… using your “Postal Code” as an example:
Select (click on) the text entry element for Postal Code,
Then in the “Style Tab”
create (style it) a class name for it.
Then adjust the width the element to whatever value you need.
Say for example: 200px. In this case… only that particular field will have a pre-defined width of 200px.
Everything else will have a default width.
If you had another text entry field that had the same width… for example “Apartment Number”…
you might create a “generic class” (class name = “short-field” and assign the same class to each text entry field.
Thank you very much Dave and Revolution for your help.
I went to have a watch on your video.
I did understand what you showed.
As you could see, I had several field that look like.
Look at the screen extract :
you can see to input fields type de porteur and Nom. As you can see the structure of a field is :
its label
the input field
an err message under the input field which will be shown when the form is submited and if it was missed.
an err icon which will be shown at the same time of the err message
an help icon which will be shown if it’s configured else where
what would be your advices to name all these objects for these fields ? Do I have to name individually the err icons and err message for each field and help icons ?