Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Recommended Posts

I am having trouble laying out the Navbar on my site, especially across different browsers.

I am trying to fit three (3) Navbar modules in the right side of the Navbar. Firefox 52.3.0 shows the Navbar in a single line, with all three modules on the right side.

59c29fd475df0_ScreenCapture-09-20-2017-A.JPG.54114fe83ef035c52d457caef7beb20f.JPG

 

Both Chrome 49.0.2623.112

59c29ffad211d_ScreenCapture-09-20-2017-B.JPG.8b860cb86cd85adda518f7397b8befeb.JPG

 

and IE8 (don't judge me, it's the last version of IE that runs on XP)

59c2a02e13cb9_ScreenCapture-09-20-2017-C.JPG.f1bf2278e9f2616ba43c613e29d2e39f.JPG

wrap the entire 'right' side of the Navbar to a new line.

Can someone explain the details of how each of the three Navbar positions (Home, Left, and Right) work?

59c2a2bbc4aa2_ScreenCapture-09-20-2017-D.JPG.9bafad2b73712754bc3a565a925b5433.JPG

Are there total width restrictions to each of these?

TIA

Malcolm

Link to comment
Share on other sites

@beerbee

https://apps.oscommerce.com/sTv12

I have adapted Store Search with Image (BS) from a Header Module to a Navbar Module.

Your question made me consider if indeed the Search module was the problem. I disabled it, and enabled @burt's NAVBAR - Search from his Summer Blowout 2016.

(#5 in the list)

Now, it seems to be working fine across all browsers <sigh>.

Now, to figure out what I have done in my adaptation to cause this. Back to the drawing board ... :wacko:

Oh, and the original question still remains ... Can someone explain how the three positions work, and if there are any width restrictions?

Malcolm

PS: Thanks, Christoph!

Link to comment
Share on other sites

@burt

I have the width of the Search Box configurable through Admin. The template file contains:

<div class="col-sm-<?php echo $content_width; ?>">
  <?php echo $search_box; ?>
</div>

If I set the width to 1 (out of 12), in Firefox, it looks like this:

59c2f52753403_ScreenCapture-09-20-2017-FF-1.JPG.784c1faa2ed2e7a443388a21db4a23e2.JPG

In Chrome, it looks like this:

59c2f5518e369_ScreenCapture-09-20-2017-Chrome-1.JPG.eda315d1373a221b7177422f7f93e5e1.JPG

I can go up to 6 (out of 12) in Firefox, and it still stays on the same line:

59c2f598afec5_ScreenCapture-09-20-2017-FF-6.JPG.41790143a02bf01e0e5008f22f4cd383.JPG

At 6 (out of 12), Chrome expands too, but still stays on the 2nd line:

59c2f5dad9282_ScreenCapture-09-20-2017-Chrome-6.JPG.7ce05ed12ea45d5f48429ddfd70ea612.JPG

If I go to 7 (out of 12), Firefox drops down to a second line:

59c2f62b25eef_ScreenCapture-09-20-2017-FF-7.JPG.40e65803fb3cae244dc66db07fe06633.JPG

But, I can continue to expand it up to 9 (out of 12) in Chrome, before it drops down to a 3rd line:

59c2f66fe8139_ScreenCapture-09-20-2017-Chrome-9.JPG.f786fd8ac065bbbc8126c99b977617b1.JPG

Malcolm

Link to comment
Share on other sites

Hi,

I don't know if it's the right way to go but you could try to change the  tep_draw_input_field in the modules file. 

e.g.: 'maxlength="20"' should go after the second comma there.

Best regards

Christoph

Link to comment
Share on other sites

*** Solved ***

(I hope :ph34r:)

After comparing the code (both source code and generated HTML code) between @burt's search box and mine, I had some class definitions that were different. When I changed some of mine to match @burt's, the cross-browser problem when away. I still don't know why the different browsers displayed things differently, but ....

I kept in place the admin control of the module's width, so I can adjust the module's width from 1 to 12. Here are some examples:

(width set to 1)

59c406824e4a0_ScreenCapture-09-21-2017-1.JPG.fe9914a5870153cb441d18aca0828ad4.JPG

 

(width set to 6)

59c406a7af195_ScreenCapture-09-21-2017-6.JPG.0d696708914b86e097874889ae396d99.JPG

 

(width set to 12)

59c406c2cebe7_ScreenCapture-09-21-2017-12.JPG.1e45e9b3de2a3de6551239516b83aa2d.JPG

 

As far as I can tell, the results are the same across Firefox, Chrome, and IE 11. I still have a little more CSS tweeking to do, but it's working! :cool:

I still think an explanation of how the Navbar module widths work would be useful!

Thank you, everyone, for your suggestions.

Malcolm

Link to comment
Share on other sites

Assuming you are using the out of the box navbar...it doesn't use widths like content modules do...

<li>navbar item</li>
<li>navbar item</li>
<li>navbar item</li>
<li>search box</li>

As you have a way to set the width (of the search box) you are setting the width to "nothing" as there is no parent container...so although you set it to (say) 12...it's guessing what it should do.

Get rid of the width div entirely and the search box should then align correctly inside its own List Item (li).  Assuming it has a li, unknown as it's evidently an addon!

Link to comment
Share on other sites

@CGhoST

Do you want it in the Header, or the NavBar? I've been working to make this work in the NavBar, not the Header.

If you are looking for a simple way to implement the stock search function in the Navbar, @burt offered one in his Summer Blowout 2016 bundle

What I was doing was adapting Store Search Bar (BS) to change it from a Header module to a NavBar module ...

The latest Header module version is here ... https://apps.oscommerce.com/sTv12&store-search-with-image-bs

And the original Header module version is here ... https://apps.oscommerce.com/ju7Fv&store-search-bs

I hope to soon ZIP up what I've done and share it here (or, should I say, let y'all debug it for me :cool: )

Malcolm

Link to comment
Share on other sites

@CGhoST

So, here is my attempt to convert this from a Header module to a Navbar module. This has been written for the latest version of Edge. No core changes. Just copy the files, install, configure, and go.

Note: If you are installing this Navbar module into a store where you already have the Header version, this will overwrite one file, breaking your Header version! Since I do not see an instance where that would happen, I don't see it as a problem. But, consider yourself warned.

Please let me know if your have any questions or problems.

Store Search (BS) - NavBar - Edge v1.0.zip

Malcolm

Link to comment
Share on other sites

@CGhoST

Length? or Height?

If you read this post above:

you will see that I tried playing around with the length of the search box. I ended up removing all 'length' settings, and letting the combination of Bootstrap and the NavBar code set the final size.

If you want anything more than that, you're going to have to try to adjust the size through CSS. For example:
 

.navbar-searching {
  width: 400px;
}

.input-group.nb-store-search {
  width: 400px;
}

You can try adjusting these individually, or both together. Just be careful. Depending on what else you have in the navbar, at some screen resolutions, you could have the entire Right navbar group wrap down to another line.

Don't forget the XS mode too. If the Search box is wider than the screen width (think old cell phones), you'll have a left-right scroll bar just to accommodate the Search Box (unless, of course, you also have specific CSS code just to size the Search Box for that screen size).

HTH

Malcolm

Link to comment
Share on other sites

@CGhoST

One more thing: In the code bundle, I have you add this bit to your user.css file:

.typeahead.dropdown-menu {
  width: 500px;
  left: -290px !important;
}

If you adjust the size of the Search Box through CSS, you will probably want to change the above to adjust the size and location of the drop-down search suggestions.

Malcolm

Link to comment
Share on other sites

@CGhoST

I *thought* that, as you begin to type your search phrase, and when the drop-down suggestions would appear, the Search Highlight will highlight (or darken, as the case might be) the letter(s) found in the search results.

However, I just disabled the Search Highlight Header Tag in my test store, and the 'highlights' still appear.

Mind you, I did not write the original code. I just adapted it from a Header module to a Navbar module.

You way wish to ask @milerwan here:

Now, I'm curious too :cool:

Malcolm

Link to comment
Share on other sites

7 hours ago, CGhoST said:

What does that search highlight do?

Hi,

The "search highlight" displays background color behind each word of product titles that matches with the search in the "advanced search results" list.

Osc v2.3.4 BS "custom"
PHP 7.3 compatible (710 modified files => o_O')

Link to comment
Share on other sites

24 minutes ago, ArtcoInc said:

@milerwan

Thank you. Can you post a screen shot of what that's supposed to look like? I'm still having difficulty figuring that out.

Thanks!

Malcolm

Here an example with search "power ps3".

Screenshot_2017-10-04-22-05-51.png

Osc v2.3.4 BS "custom"
PHP 7.3 compatible (710 modified files => o_O')

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...