nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Open Data configuration

NataliyaLys

Hi, I am working on our the open data website, and i am having the following issue: When I type information in the search bar and click search - on the result page I get my footer showing right below the map and above all the datasets list. I cannot figure out why this is happening? Would appreciate any suggestions. Thank you.

タグ付きの投稿をもっと見る

Accepted answers

NataliyaLys

Klara,

I got it working. I removed the "slide-me 2". I made sure that all my <div> tags were closed.

Yes, the <style> block in my layout I added it myself. I think that is where my problem was. With all the tags, <style>, <body>, <head> I did't closed some of them. I think it was messing things up. After I closed all the tags everything worked and I didn't have the issue with footer moving up anymore.

I tried to move everything in <style> tag to the CSS block, when i did it, it caused my images to re-align vertically in one column.

I also try to use "clear float", and the website worked fine with and without it.

Appreciate you help a lot.

Nataliya

All comments

CourtneyClaessens

When configuring your site did you use the wizard or did you do custom CSS?

NataliyaLys

I used custom HTML . I didn't use the CSS (just left it all bank).

Here is the link to our open data website:

http://data.dogis.opendata.arcgis.com

The interesting thing is that this issue with the footer moving up happens only when I search for data from the Home page. I doesn't happen when I search for data from the dataset page http://data.dogis.opendata.arcgis.com/datasets‌

KlaraSchmitt

Hi Nataliya,

Courtney reached out to me to see if I could help assist you. When I look at the HTML structure of your site, it looks like the footer <footer id="footer" class="footer"> [footer contents] </footer> is above <div id="slide-me2" class="layout" style="display: none;"></div> in your page. By default, slide-me2 should be above the footer since that particular ID is what displays the search results. Is there any chance these two elements got reordered in your HTML?

Thank you,

Klara

NataliyaLys

Hi Klara,

Thank you. I see what you are saying. I looked at the page source on my browser and could see where the "footer" was above the "smice-me2". I added the <div id="slide-me2" class="layout" style="display: none;"></div> to my html.

By doing this my footer container got bigger, and the search results are displayed in the footer container (with footer text staying on the bottom).

It's probably and easy fix but I am very new to the html and probably missing obvious thing.

Here is all I have in the "footer" html:

<h3 id="about"><font size="3">About</font></h3>

<ul>

<li><a href="http://omaha-douglasconnection.com/gis/about-us">About Us</a></li>

</ul>

</div>

<p><a href="http://example.org/contact">Contact Us</a> | <a href="http://example.org/faq">FAQ</a> | <a href="http://example.org/privacy">Privacy</a> | <a href="http://example.org/tos">Terms of Use</a></p>

</div>

</footer>

Thank you,

KlaraSchmitt

Hi Nataliya,

I might be mistaken on how your code is setup. Could you do me a favor and copy your code from each block into this program: Gists so I can see what you are working with?

1. Open this link Gists

2. Copy code from header block

3. Paste code into gist textarea

4. Add a title

5. Click create secret gist

6. Send me the link via GeoNet mail (once you save, the link will be the blue title at the top of the file)

Repeat for body and footer blocks. You can either paste them all into one gist (just please put some kind of divider between blocks) or make three gists and send them to me.

Please let me know if you have any problems or I was unclear.

Thanks,

Klara

NataliyaLys

Klara,

Thanks for you help again. Here is the link to Gists: (I put all three code in one gist, separated by title and ******)

gist:e7ab469667d9b953cc27

Nataliya

KlaraSchmitt

Hi Nataliya,

No problem. Thank you for the gist. Just please bear with me as we troubleshoot. I was indeed mistaken about the setup of the file. So let's try a couple things.

First let's do a little clean up.

1) Please delete <div id="slide-me2" class="layout" style="display: none;"></div> from the footer, which I had given you prior. You shouldn't need that ID. It gets wired in behind the scenes.

2) In the body block, you have your custom <div id="container">'s closing </div> outside the </html>. Please move the </div> above </body>.

Next some questions for you. In the blank site I opened up for comparison, I don't see all <style></style></head><body> tags as shown here in your layout block:

<style>

.small-images { width: 170px; height: 130px; float:left; margin: 20px; }

#container{

width:900px;

}

</style>

</head>

<body>

Were these things you've added yourself? If so, you should really move everything between the style tags into the Header CSS block and delete the embedded style tags. They aren't actually being shown in the header. In your site, they appear in the body code if you view page source. If you also added the </head> and <body> and </body> and </html>, please delete those as well. I am fairly certain the system should add them in behind the scenes.

Finally, you have a bunch of floats on your .small-images. It is possible that because you don't clear the float, they are affecting placement of other elements on the site. My advice would be to add another class to your Header CSS block, perhaps:

.clearfloat {

clear: both;

}

And then in your code, right after you finish listing all those images/links add a div that looks like <div class="clearfloat"></div>

If you could make these changes and let me know the results, we'll proceed from there. If anything I've written is unclear, please let me know.

Thanks,

Klara

NataliyaLys

Klara,

I got it working. I removed the "slide-me 2". I made sure that all my <div> tags were closed.

I tried to move everything in <style> tag to the CSS block, when i did it, it caused my images to re-align vertically in one column.

I also try to use "clear float", and the website worked fine with and without it.

Appreciate you help a lot.

Nataliya

KlaraSchmitt

Awesome! Glad you got it working. Is it possible for you to mark this thread as "Answered?"

Thank you,

Klara

NataliyaLys

Absolutely, will do. Thanks again for the help.

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.