Components are changing after import....

User 2924830 Photo


Registered User
160 posts

For me (as a beginner without code skills) the Component feature is a main feature in SD – and when it does not work I’m in trouble.
In case others can share problems in component export and import I’d be happy.

Here is what I found.
I exported an navigation wrapper as a component. This wrapper was a “grid area based placement” column in a grid. I exported only the Nav wrapper.
When I imported the Nav wrapper into another site it was full of failures. Some sub-container had fogotten that they were grids etc.
The new site had nearly the same grid construction as the old one. Grid placement and column width etc. were the same. There was only a small placeholder column at the left of the column for tha Nav wrapper. So now the Nav was in column 2 before it was in column 1... And many container and items in the wrapper were messed up. even class names were changed.
My solution: I opened the site with the old Nav wrapper - saved as – deleted all other stuff and only left the Nav wrapepr in the Grid. Then I pulled the Nav Wrapper out of the Grid and made a stand alone block of it. (I only had to define the width - it had been defined n the grid - now it was defined in the Nav block. ).
This as component can now be easyly placed in any Grid …
I wonder why there have been so many changings in the Nav wrapper, when I exported it as a component from the grid. The changings had nothing to do with the Grid definitions.

Are there more "be aware" in exporting components ?
User 2924830 Photo


Registered User
160 posts

My solution I praised above does not work - Seems that Component import does not work for more complex Components.
I tried hours and hours - I have a perfectly working NAV Component - as long as I have it as a stand alone Design on a site.
As soon as I import it into a grid site with main - header etc. into the Grid reserved "navigation" space all inside the navigation wrapper gets messed up. Class names get a name-1 ad - Grid Container become Elements - Position Definitions change and even Paddings are "forgotten".

Question: Am I loosing time on a non yet finished component feature ?
User 2924830 Photo


Registered User
160 posts

I just bought the Version 50-3332
No change for my problem
User 379556 Photo


Registered User
1,535 posts

My experience is that the change of class names occurs where those names are not unique in the receiving project, and that makes good sense. Usually the changed ones simply have "-1" added at the end, and so one can easily find them to change them by putting (without the inverted commas) "-1" in the search bar at the top of the Elements Tree.

I can imagine that positioning a component directly within a CSS Grid container could be tricky. I've not tried it*, but am wondering whether it would be best simply to create container in the receiving project's grid positioned correctly, and then put the component into that container.

It would be interesting to know whether that works, and what adapting has still to be done after putting the component in that container.

Frank

* I have done very little experimenting with CSS Grid.
User 2924830 Photo


Registered User
160 posts

Thank you for the ideas, Frank. I changed and rechanged the classs names without success. Meanwhile I have contacted the support and will tell here what is happening.
Michael
User 122279 Photo


Senior Advisor
14,461 posts

It is difficult to visualize this and what is happening without actually seeing it. If you would post your project file so that we could take a look at the code, we might come up with solutions for you. To post the project file you would have to zip it, and if it is too large, then pop it into your dropbox (or similar) and let us have the link.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2924830 Photo


Registered User
160 posts

Hi Inger, thanks for your offer to invest precious time - I did send the rsd files to the support and hopefully they will find the reason(s) why, I will then share the results here. Íf I don't hear tomorrow something from the support I will upload the files
User 2924830 Photo


Registered User
160 posts

Here is a Dropbox Link where you can download 2 rsd files -
https://www.dropbox.com/sh/td8m8ownbesp … Lrira?dl=0

"site.rsd" is the destination for the Nav wrapper - the empty room is the grid prepared space for it
"stand-alone-nav" is the source - therein a Nav wrapper.
To insert the Nav wrapper into the destination just make a component from the wrapper and copy it into the "site.rsd"
The container "navigation-wrap" belongs into the Grid parent. In the Grid is a column / row named "navigation" - So "navigation-wrap" should be defined in Layout - Grid and Flexbox Layout - Grid = Grid Area basesd - Name Navigation.
However the result will take lots of time to be restored...

What is wrong ????
User 2924830 Photo


Registered User
160 posts

Now I'm biting into Components and find more things I don't understand. Working with foundation.

To get a clean component I delete all from the page - only the wanted component stays there.
I save the Component to library and it is looking fine there. Original colours etc.

I open a new, empty page. Only body and an empty grid - same as before.

I Import the Component and get the message
The Component you are adding contains selectors tthat are used on this page with different style rules…
The image shows that a lot of styling is lost - the colours are different, the fex became a block etc.
How can that be on an empty page. No class names to be doubled...
What am I doing wrong ???????
User 379556 Photo


Registered User
1,535 posts

If the attached doesn't do the trick, I've probably not properly understood what was wanted.

1. I created a container-fc in the receiving project;
2. I put the component in that container-fc;
3. I put the container-fc into the named grid area.

Class names apply to every page in a project, which is why even a blank page doesn't stop the changing of class names when importing a component that shares those class names.

Frank
Attachments:

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.