Open Data configuration

4220
10
Jump to solution
08-15-2014 12:10 PM
NataliyaLys
Occasional Contributor II

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.

OpenData.JPG

0 Kudos
1 Solution

Accepted Solutions
NataliyaLys
Occasional Contributor II

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

View solution in original post

0 Kudos
10 Replies
CourtneyClaessens
Occasional Contributor III

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

0 Kudos
NataliyaLys
Occasional Contributor II

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

0 Kudos
KlaraSchmitt
Esri Contributor

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

0 Kudos
NataliyaLys
Occasional Contributor II

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:

  <div id="slide-me2" class="layout" style="display: none;"></div> 

  <footer id="footer" class="footer">

     <div class="container">

  

     <div class="row">

      <div class="column-8">

     

        <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>

   

      <div class="column-8 last pre-8">

        <p>© 2014 Douglas County GIS</p>

            <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>

 

    </div>

   

    </div>

</footer>

Thank you,

0 Kudos
KlaraSchmitt
Esri Contributor

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

0 Kudos
NataliyaLys
Occasional Contributor II

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

0 Kudos
KlaraSchmitt
Esri Contributor

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

0 Kudos
NataliyaLys
Occasional Contributor II

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

View solution in original post

0 Kudos
KlaraSchmitt
Esri Contributor

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

Thank you,

Klara

0 Kudos