ArtcoInc Posted September 20, 2017 Share Posted September 20, 2017 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. Both Chrome 49.0.2623.112 and IE8 (don't judge me, it's the last version of IE that runs on XP) 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? Are there total width restrictions to each of these? TIA Malcolm Link to comment Share on other sites More sharing options...
beerbee Posted September 20, 2017 Share Posted September 20, 2017 Hi, which navbar module do you use for search? Best regards Christoph Link to comment Share on other sites More sharing options...
ArtcoInc Posted September 20, 2017 Author Share Posted September 20, 2017 @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 ... 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 More sharing options...
burt Posted September 20, 2017 Share Posted September 20, 2017 I suspect that your search input box needs to have a set (smallish) width. Link to comment Share on other sites More sharing options...
ArtcoInc Posted September 20, 2017 Author Share Posted September 20, 2017 @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: In Chrome, it looks like this: I can go up to 6 (out of 12) in Firefox, and it still stays on the same line: At 6 (out of 12), Chrome expands too, but still stays on the 2nd line: If I go to 7 (out of 12), Firefox drops down to a second line: But, I can continue to expand it up to 9 (out of 12) in Chrome, before it drops down to a 3rd line: Malcolm Link to comment Share on other sites More sharing options...
beerbee Posted September 21, 2017 Share Posted September 21, 2017 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 More sharing options...
ArtcoInc Posted September 21, 2017 Author Share Posted September 21, 2017 *** Solved *** (I hope ) 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) (width set to 6) (width set to 12) 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! 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 More sharing options...
burt Posted September 22, 2017 Share Posted September 22, 2017 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 More sharing options...
ArtcoInc Posted September 22, 2017 Author Share Posted September 22, 2017 Thank you, @burt I've deleted the width div (and all reference to the width in the module itself), and everything seems to working fine now. Malcolm Link to comment Share on other sites More sharing options...
CGhoST Posted September 23, 2017 Share Posted September 23, 2017 @ArtcoInc Can you please share your code of the search in header please. Appreciate it. Link to comment Share on other sites More sharing options...
ArtcoInc Posted September 23, 2017 Author Share Posted September 23, 2017 @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 ) Malcolm Link to comment Share on other sites More sharing options...
ArtcoInc Posted September 24, 2017 Author Share Posted September 24, 2017 @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 More sharing options...
CGhoST Posted September 26, 2017 Share Posted September 26, 2017 @ArtcoInc Thank you for that. Im just doing something else then i will give this a shot. Appreciate it Link to comment Share on other sites More sharing options...
CGhoST Posted September 29, 2017 Share Posted September 29, 2017 Looks great. Works nicely. I was wondering what this was: 4) *Optional* In Admin > Modules > Header Tags, install and enable the Search Result Highlight module. I didnt find that in Header Tags Link to comment Share on other sites More sharing options...
ArtcoInc Posted September 29, 2017 Author Share Posted September 29, 2017 @CGhoST Oops ... failed to include one file in the ZIP package. Sorry! Let's try this again ... Store Search (BS) - NavBar - Edge v1.01.zip (no changes, just added the one missing file) Malcolm Link to comment Share on other sites More sharing options...
CGhoST Posted October 3, 2017 Share Posted October 3, 2017 Do you know how to increase the size of the search box? I am trying to do it but cant figure it out. Link to comment Share on other sites More sharing options...
ArtcoInc Posted October 3, 2017 Author Share Posted October 3, 2017 @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 More sharing options...
ArtcoInc Posted October 3, 2017 Author Share Posted October 3, 2017 @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 More sharing options...
CGhoST Posted October 4, 2017 Share Posted October 4, 2017 What does that search highlight do? Link to comment Share on other sites More sharing options...
ArtcoInc Posted October 4, 2017 Author Share Posted October 4, 2017 @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 Malcolm Link to comment Share on other sites More sharing options...
milerwan Posted October 4, 2017 Share Posted October 4, 2017 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 More sharing options...
ArtcoInc Posted October 4, 2017 Author Share Posted October 4, 2017 @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 Link to comment Share on other sites More sharing options...
milerwan Posted October 4, 2017 Share Posted October 4, 2017 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". Osc v2.3.4 BS "custom" PHP 7.3 compatible (710 modified files => o_O') Link to comment Share on other sites More sharing options...
ArtcoInc Posted October 4, 2017 Author Share Posted October 4, 2017 Thank you. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.