I would like to customize the Algolia search bar in my Docusaurus docs, more specifically, I would like to display the search bar at the top of the sidebar at the left, and not at the top right, which I think it's the default place.
The v2 docs are elusive about it: https://v2.docusaurus.io/docs/search/
I found the v1 docs about it, and tried to adapt it to v2 but nothing works:
https://docusaurus.io/docs/en/search#docsNav
any help would be appreciated
It looks like this was possible in v1 but no longer in v2. I believe you'll need to swizzle the Navbar component and change it yourself, as the search bar is hardcoded as the rightmost right item:
<div className="navbar__items navbar__items--right">
{rightItems.map((item, i) =>
<NavbarItem {...item} key={i} />)} {!disableColorModeSwitch &&
<Toggle className={styles.displayOnlyInLargeViewport} aria-label="Dark mode toggle" checked={isDarkTheme} onChange={onToggleChange} />}
<SearchBar handleSearchBarToggle={setIsSearchBarExpanded} isSearchBarExpanded={isSearchBarExpanded} />
</div>
The other option might be to make your own navbar search bar and insert it as a new type by swizzling NavBarItem instead or merging your search bar theme somehow. This would let you include it like you would a normal link in the location you want, like you could in v1. I'm not sure if this is actually possible though (I'm waiting for an answer on that topic myself).
You should Swizzle DocSidebar Component and render the SearchBar component somewhere.
Related
I have a question about paginationElement in Tabulator.
As per tabulator documentation, i created a DIV and used paginationElement in Table setup to render the paginator in the DIV. Well, it works. But with a drawback, no styling works, no colors, no highlighting of current page. So it is kinda inconvenient.
Is there a way to resolve this?
Otherwise, i am really happy with Tabulator! Thank you for the great work!
Cheers
You might have to style the pagination footer by css as the location of it has been changed by paginationElement.
This is because all of the table styling is based around the pagination element being inside the table.
Moving it outside the table will mean you will need to apply the styles yourself. The classes that denote that you are on the current page etc will still be applied, you just need to tell the browser how to style them.
The Styling Documentation contains more information on the classes used by tabulator and how to style the table
I'm trying to make a two-lines menu with bootstrap 4, and I found some examples on the web:
https://www.codeply.com/go/DpHESPqZsx
https://www.codeply.com/go/cxXqBnGrPx
In the first example they use "div class='navbar'" to create the menus.
<div class="navbar">...</div>
In the second example they use "nav class='navbar'" to create the menus.
<nav class="navbar">...</nav>
Which is the correct way? Which one should be used?
I have another question. Why do they NOT use the bootstrap grid with the rows and columns? When should you use it?
Thank you very much
Div and nav are similar element, in terms of what they do. However, nav is better in this situation because you want to have semantic markup. It is because of SEO and more readable for developers.
And why they are not using grid is probably because they haven't implemented it yet and should be coming. Their grid system is done with flex currently, but should change. And CSS Grid does not work that great with IE11.
You should use Grid when you feel that it will be easier to structure your site. It's a great tool, and combine it with Flex is so easy and comfortable
The difference is that a div has no meaning and a nav Element has a semantic meaning (indicating that there is a navigation). You can remove every div and span from a website and have no difference about the semantic structure of a page, every other element has a meaning: For example, states that there is the main content, says here is the header-part of the site.
These parts tell for example search engines what's on a site. So if you have the text "Stackoverflow" in your Element somewhere, google (and other search engines) know that you have a stackoverflow link in your navigation. If you have it in your Tag, you probably have a text about stackoverflow.
Keep in mind: These are some simplified examples.
The html5 nav tag has semantic meaning.
Please follow the Bootstrap docs. The grid (row>col) should not be used in the Navbar as it's not a supported component. Using the grid inside the Navbar will through off alignment, spacing and the responsive behavior controlled by the navbar-expand-* classes. I'm the author of both Navbar examples from Codeply you posted.
I'm having problems with my fixed menu. As you can see of the example beneath it's not possible to click the links "Vingårde, Dyrkning..." because of the div box with the fixed menu on top of it. I've tried ordering the layers with z-index but I just can't get it to work. Can anybody help me out?
http://itu.dk/people/mbul/humlum/
And if anyone by the way have a method on auto adjusting the height of the page so it covers the whole viewport I would be very glad to hear from you :-) In the website version above I've set the height manually to 1000px which is not preferable
Thank you!
You need to put all the wrappers' elements outside of it and put them after the left-page container and before the right-page container. Finally, remove the wrapper, it seems unnecessary for the page in order to work.
I fixed it through Chrome's dev tools, but I assume it should work if you modify the html that way.
The body should look like this:
<div id="left_page_container">...</div>
<div class="nav_humlunvim">...</div>
<div class="nav_butik">...</div>
<div class="nav_blog">...</div>
<div class="nav_kontakt">...</div>
<div id="right_page_container">...</div>
Hope it helps; as an extra observation it is more common to use "hyphen-separated-names" for selectors than to use "snake_case_names" :)
I would like to be able to specify exactly where a ContentPart is rendered in a view.
For example, in my Content.Summary.cshtml I want to wrap my title and first image from the gallery (I'm using ZenGallery) in an anchor tag. I thought I would be able to do it like this but the gallery template is not rendered.
<a href="#Url.ItemDisplayUrl((IContent)Model)">
<h2>#Model.ContentItem.TitlePart.Title</h2>
#Display(Model.ContentItem.ZenGalleryPart)
</a>
But if I do the following then the gallery template (ZenGallery.Summary.cshtml) is shown along with all other parts.
#Display(Model.Content)
I understand that the recommended way to do this is probably using Placement.info, is that right? But this way makes more sense to me and would allow for more fine grain control of the end markup. How could I achieve the markup I'm looking for?
This should give you a pretty good start on doing precisely what you want: http://weblogs.asp.net/bleroy/archive/2011/07/31/so-you-don-t-want-to-use-placement-info.aspx
I am using Magento CE v1.5. Modern theme. I would like to display Search bar on the right hand side in the Navigation bar. Basically category menus on the left and search function on the right on a horizontal menu.
I have replaced top.bar with top.menu in catalogsearch.xml. The search function displays on the right with the following CSS
.form-search { margin:3px auto; float:right; position:absolute; right:20px; top:70px; }
I am just wondering do I need to do anything to top.phtml file because many other tutorials suggest you need to add
getChildHtml('topSearch') ?>
My search displays without the above code in the top.phtml file.
Please suggest the correct way to go about achieveing search in the navigation bar in CE v1.5. Thank you.
If, getChildHtml() not loaded in a template that you work on, you can't show the block that you want. Try the following snippet :
<?php echo $this->getLayout()->getBlock('top.search')->toHtml() ?>