Show all articles on Category page for Zendesk Guide Help Centre - zendesk

Does anyone know how to get all the articles that are in the Section displaying as a list in the Category page at all?
Here's what I've got, and I'm trying to achieve the full list rather than the 'See all X articles, similar to how Slack are doing here.
This is my category page, which is the standard Copenhagen theme
<section id="main-content" class="hero">
<div class="hero-inner">
<h2 class="search_title">Help Centre</h2>
<h2 class="visibility-hidden">{{ t 'search' }}</h2>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="search-icon" aria-hidden="true">
<circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/>
<path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"/>
</svg>
{{search submit=false instant=settings.instant_search class='search search-full' placeholder='Find anything'}}
<div class="search_topics"><strong>Common topics: </strong>1, 2, 3 rights</div>
</div>
</section>
<div class="container-divider"></div>
<div class="container">
<nav class="sub-nav">
{{breadcrumbs}}
<!-- <div class="search-container">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="search-icon" aria-hidden="true">
<circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/>
<path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"/>
</svg>
{{search scoped=settings.scoped_kb_search submit=false}}
</div> -->
</nav>
<div class="category-container">
<div class="category-content">
<header class="page-header">
<h1>{{category.name}}</h1>
{{#if category.description}}
<p class="page-header-description">{{category.description}}</p>
{{/if}}
</header>
<div id="main-content" class="section-tree">
{{#each sections}}
<section class="section">
<h2 class="section-tree-title">
{{name}}
</h2>
{{#if articles}}
<ul class="article-list">
{{#each articles}}
<li class="article-list-item{{#if promoted}} article-promoted{{/if}}">
{{#if promoted}}
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="icon-star" title="{{t 'promoted'}}">
<path fill="currentColor" d="M2.88 11.73c-.19 0-.39-.06-.55-.18a.938.938 0 01-.37-1.01l.8-3L.35 5.57a.938.938 0 01-.3-1.03c.12-.37.45-.63.85-.65L4 3.73 5.12.83c.14-.37.49-.61.88-.61s.74.24.88.6L8 3.73l3.11.17a.946.946 0 01.55 1.68L9.24 7.53l.8 3a.95.95 0 01-1.43 1.04L6 9.88l-2.61 1.69c-.16.1-.34.16-.51.16z"/>
</svg>
{{/if}}
{{title}}
{{#if internal}}
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="icon-lock" title="{{t 'internal'}}">
<rect width="12" height="9" x="2" y="7" fill="currentColor" rx="1" ry="1"/>
<path fill="none" stroke="currentColor" d="M4.5 7.5V4a3.5 3.5 0 017 0v3.5"/>
</svg>
{{/if}}
</li>
{{/each}}
</ul>
{{#if more_articles}}
<a href="{{url}}" class="see-all-articles">
{{t 'show_all_articles' count=article_count}}
</a>
{{/if}}
{{/if}}
</section>
{{else}}
<i class="category-empty">
{{t 'empty'}}
</i>
{{/each}}
</div>
</div>
</div>
</div>

According to Zendesk's own documentation the maximum number of articles that can be shown under each section is 6, for sections shown on category pages: https://developer.zendesk.com/documentation/help_center/help-center-templates/objects/#section-object
I'm not sure how Slack does it, but you could use the Zendesk Help Center API to achieve what you want. See https://developer.zendesk.com/api-reference/help_center/help-center-api/articles/#list-articles

Related

HOW TO Bootstrap 5 modal right

How can I set the modal to the right in Bootstrap 5? I’ve seen a few answers from Google, but most of them aren’t for Bootstrap 5. On big screens, the modal should appear on the right side.
My code
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div>
<div style="position: fixed; bottom: 5px; right: 5px; margin: 0px; padding: 5px 3px; z-index: 1;">
<button type="button" class="btn btn-outline-primary btn-lg" data-bs-toggle="modal" data-bs-target="#NewsModal" #click="getNews()" style="padding: 7px 11px;">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-newspaper" viewBox="0 0 16 16">
<path
d="M0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v10.528c0 .3-.05.654-.238.972h.738a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 1 1 0v9a1.5 1.5 0 0 1-1.5 1.5H1.497A1.497 1.497 0 0 1 0 13.5v-11zM12 14c.37 0 .654-.211.853-.441.092-.106.147-.279.147-.531V2.5a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5v11c0 .278.223.5.497.5H12z"/>
<path d="M2 3h10v2H2V3zm0 3h4v3H2V6zm0 4h4v1H2v-1zm0 2h4v1H2v-1zm5-6h2v1H7V6zm3 0h2v1h-2V6zM7 8h2v1H7V8zm3 0h2v1h-2V8zm-3 2h2v1H7v-1zm3 0h2v1h-2v-1zm-3 2h2v1H7v-1zm3 0h2v1h-2v-1z"/>
</svg>
</button>
</div>
<div class="modal fade" id="NewsModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="NewsModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="NewsModalLabel">Yangliklar</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-3">
<div class="col-12 mb-3" v-for="(item, key) in news">
<div class="card">
<img class="img-fluid" :src="item.photo" role="img" alt="news image" v-if="item.photo !== null">
<img class="img-fluid" src="~/assets/images/news.jpg" role="img" alt="news image" v-else>
<div class="card-body">
<h5 class="card-title">{{ item.name }}</h5>
<div class="collapse card-text" :id="'collapseExample'+item.id" v-html="item.content"></div>
<p class="mt-1">
<div data-bs-toggle="collapse" :data-bs-target="'#collapseExample'+item.id" aria-expanded="false" :aria-controls="'collapseExample'+item.id">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-chevron-up rotate180" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Yopish</button>
</div>
</div>
</div>
</div>
</div>
Add this to your CSS:
#media screen and (min-width: 1400px) {
.modal-dialog {
margin-right: 0 !important;
margin-top: 0 !important;
}
}
If the screen is 1400px or bigger, the modal will be positioned to the right.
See the snippet below.
#media screen and (min-width: 1400px) {
.modal-dialog {
margin-right: 0 !important;
margin-top: 0 !important;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div>
<div style="position: fixed; bottom: 5px; right: 5px; margin: 0px; padding: 5px 3px; z-index: 1;">
<button type="button" class="btn btn-outline-primary btn-lg" data-bs-toggle="modal" data-bs-target="#NewsModal" #click="getNews()" style="padding: 7px 11px;">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-newspaper" viewBox="0 0 16 16">
<path d="M0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v10.528c0 .3-.05.654-.238.972h.738a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 1 1 0v9a1.5 1.5 0 0 1-1.5 1.5H1.497A1.497 1.497 0 0 1 0 13.5v-11zM12 14c.37 0 .654-.211.853-.441.092-.106.147-.279.147-.531V2.5a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5v11c0 .278.223.5.497.5H12z" />
<path d="M2 3h10v2H2V3zm0 3h4v3H2V6zm0 4h4v1H2v-1zm0 2h4v1H2v-1zm5-6h2v1H7V6zm3 0h2v1h-2V6zM7 8h2v1H7V8zm3 0h2v1h-2V8zm-3 2h2v1H7v-1zm3 0h2v1h-2v-1zm-3 2h2v1H7v-1zm3 0h2v1h-2v-1z" />
</svg>
</button>
</div>
<div class="modal fade" id="NewsModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="NewsModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="NewsModalLabel">Yangliklar</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-3">
<div class="col-12 mb-3" v-for="(item, key) in news">
<div class="card">
<img class="img-fluid" :src="item.photo" role="img" alt="news image" v-if="item.photo !== null">
<img class="img-fluid" src="~/assets/images/news.jpg" role="img" alt="news image" v-else>
<div class="card-body">
<h5 class="card-title">{{ item.name }}</h5>
<div class="collapse card-text" :id="'collapseExample'+item.id" v-html="item.content"></div>
<p class="mt-1">
<div data-bs-toggle="collapse" :data-bs-target="'#collapseExample'+item.id" aria-expanded="false" :aria-controls="'collapseExample'+item.id">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-chevron-up rotate180" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z" />
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Yopish</button>
</div>
</div>
</div>
</div>
</div>

Unable to find link "New country" (Capybara::ElementNotFound)

Please, help!
I run the test (cucumber) and it gives this error : Unable to find link "New country" (Capybara::ElementNotFound)
<% content_for :page_header do %>
<% render partial: "layouts/app_page_header" , locals: { page_title: "Countries" } %>
<% end %>
<div class="flex flex-col">
<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
<table class="min-w-full divide-y divide-gray-200">
<thead>
<tr>
<th scope="col" class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Country code
</th>
<th scope="col" class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Country name
</th>
<th scope="col" class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Cities count
</th>
<th scope="col" class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Legal forms count
</th>
<th scope="col" class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Taxation forms count
</th>
<th scope="col" class="px-6 py-3 bg-gray-50">
<span class="sr-only">Actions</span>
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200" id="countries">
<%= render #countries %>
</tbody>
</table>
</div>
</div>
</div>
</div> <br>
<%= link_to t('.new_country_button'), new_admin_country_path, id:'new_admin_country_submit', class: 'btn btn-primary' %>
<p>
<%== render partial: "shared/pagy" , locals: {pagy: #pagy} if #pagy.pages> 1 %>
</p>
when I enter "print page.html" it shows that I am on the correct page and I don’t understand why I don’t find the "New country" button I need.
UPD
so I ran the command "puts page.body" in the console and got the html
<!DOCTYPE html>
<html>
<head>
<title>CosmoPort</title>
<script src="/packs-test/js/application-0a4f8f4726a3a8685a4c.js"></script>
</head>
<body>
<div
x-data="{ sidebarOpen: false }"
#keydown.window.escape="sidebarOpen = false"
class="h-screen flex overflow-hidden bg-gray-100">
<!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->
<div
x-show="sidebarOpen"
x-description="Off-canvas menu for mobile, show/hide based on off-canvas menu state."
class="md:hidden">
<div class="fixed inset-0 flex z-40">
<div
#click="sidebarOpen = false"
x-show="sidebarOpen"
x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state."
x-transition:enter="transition-opacity ease-linear duration-300"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition-opacity ease-linear duration-300"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
class="fixed inset-0" aria-hidden="true">
<div class="absolute inset-0 bg-gray-600 opacity-75"></div>
</div>
<div
x-show="sidebarOpen"
x-description="Off-canvas menu, show/hide based on off-canvas menu state."
x-transition:enter="transition ease-in-out duration-300 transform"
x-transition:enter-start="-translate-x-full"
x-transition:enter-end="translate-x-0"
x-transition:leave="transition ease-in-out duration-300 transform"
x-transition:leave-start="translate-x-0"
x-transition:leave-end="-translate-x-full"
class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-gray-800">
<div class="absolute top-0 right-0 -mr-12 pt-2">
<button
x-show="sidebarOpen"
#click="sidebarOpen = false"
class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
<span class="sr-only">Close sidebar</span>
<!-- Heroicon name: x -->
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
<div class="flex-shrink-0 flex items-center px-4">
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg" alt="Workflow">
</div>
<div class="mt-5 flex-1 h-0 overflow-y-auto">
<nav class="px-2 space-y-1">
<a class="sidebar-navigation-link" href="/">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
Dashboard
</a>
<a class="sidebar-navigation-link active" aria-current="page" href="/admin">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
</svg>
Admin
</a><br/>
<div class="space-y-1">
<h3 class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider" id="admin-headline">
Admin
</h3>
<ul class="space-y-1" role="group" aria-labelledby="admin-headline">
<li>
<a class="sidebar-submenu-link" href="/admin/users">Users</a>
</li>
<li>
<a class="sidebar-submenu-link active" aria-current="page" href="/admin/countries">Countries</a>
</li>
<li>
<a class="sidebar-submenu-link" href="/admin/cities">Cities</a>
</li>
<li>
<a class="sidebar-submenu-link" href="/admin/legal_forms">Legal forms</a>
</li>
<li>
<a class="sidebar-submenu-link" href="/admin/taxation_forms">Taxation forms</a>
</li>
<li>
<a class="sidebar-submenu-link" href="/admin/businesses">Businesses</a>
</li>
<li>
<a class="sidebar-submenu-link" href="/admin/conversations">Conversations</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="flex-shrink-0 w-14" aria-hidden="true">
<!-- Dummy element to force sidebar to shrink to fit close icon -->
</div>
</div>
</div>
<!-- Static sidebar for desktop -->
<div class="hidden md:flex md:flex-shrink-0">
<div class="flex flex-col w-64">
<!-- Sidebar component, swap this element with another sidebar if you like -->
<div class="flex flex-col h-0 flex-1">
<div class="flex items-center h-16 flex-shrink-0 px-4 bg-gray-900">
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg" alt="Workflow">
</div>
<div class="flex-1 flex flex-col overflow-y-auto">
<nav class="flex-1 px-2 py-4 bg-gray-800 space-y-1">
<a class="sidebar-navigation-link" href="/">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
Dashboard
</a>
<a class="sidebar-navigation-link active" aria-current="page" href="/admin">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
</svg>
Admin
</a><br/>
<div class="space-y-1">
<h3 class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider" id="admin-headline">
Admin
</h3>
<ul class="space-y-1" role="group" aria-labelledby="admin-headline">
<li>
<a class="sidebar-submenu-link" href="/admin/users">Users</a>
</li>
<li>
<a class="sidebar-submenu-link active" aria-current="page" href="/admin/countries">Countries</a>
</li>
<li>
<a class="sidebar-submenu-link" href="/admin/cities">Cities</a>
</li>
<li>
<a class="sidebar-submenu-link" href="/admin/legal_forms">Legal forms</a>
</li>
<li>
<a class="sidebar-submenu-link" href="/admin/taxation_forms">Taxation forms</a>
</li>
<li>
<a class="sidebar-submenu-link" href="/admin/businesses">Businesses</a>
</li>
<li>
<a class="sidebar-submenu-link" href="/admin/conversations">Conversations</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="flex flex-col w-0 flex-1 overflow-hidden">
<div class="relative z-10 flex-shrink-0 flex h-16 bg-white shadow">
<button
#click.stop="sidebarOpen = true"
class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 md:hidden">
<span class="sr-only">Open sidebar</span>
<!-- Heroicon name: menu-alt-2 -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"/>
</svg>
</button>
<div class="flex-1 px-4 flex justify-end">
<div class="ml-4 flex items-center md:ml-6">
<button class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<span class="sr-only">View notifications</span>
<!-- Heroicon name: bell -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
</svg>
</button>
<!-- Profile dropdown -->
<div #click.away="open = false" x-data="{ open: false }" class="ml-3 relative">
<div>
<button
#click="open = !open"
x-bind:aria-expanded="open"
class="max-w-xs bg-white flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" id="user-menu" aria-haspopup="true">
<span class="sr-only">Open user menu</span>
<svg class="h-8 w-8 text-gray-600 rounded-full" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
</button>
</div>
<!--
Profile dropdown panel, show/hide based on dropdown state.
Entering: "transition ease-out duration-100"
From: "transform opacity-0 scale-95"
To: "transform opacity-100 scale-100"
Leaving: "transition ease-in duration-75"
From: "transform opacity-100 scale-100"
To: "transform opacity-0 scale-95"
-->
<div
x-show="open"
x-description="Profile dropdown panel, show/hide based on dropdown state."
x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="transform opacity-0 scale-95"
x-transition:enter-end="transform opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95"
class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
<a role="menuitem" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" href="/users/edit">Account</a>
<a role="menuitem" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" href="/profiles/edit">Edit profile</a>
<a role="menuitem" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" rel="nofollow" data-method="delete" href="/users/sign_out">Logout</a>
</div>
</div>
</div>
</div>
</div>
<main
x-data=""
x-init="$el.focus()"
class="flex-1 relative overflow-y-auto focus:outline-none" tabindex="0">
<div class="py-6">
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
<h1 class="text-2xl font-bold text-gray-900">
Countries
</h1>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
<div class="flex flex-col">
<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
<table class="min-w-full divide-y divide-gray-200">
<thead>
<tr>
<th scope="col" class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Country code
</th>
<th scope="col" class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Country name
</th>
<th scope="col" class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Cities count
</th>
<th scope="col" class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Legal forms count
</th>
<th scope="col" class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Taxation forms count
</th>
<th scope="col" class="px-6 py-3 bg-gray-50">
<span class="sr-only">Actions</span>
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200" id="countries">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">RU</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Russian Federation</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">0</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">0</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">0</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<a class="text-indigo-600 hover:text-indigo-900" href="/admin/countries/eb1c9426-8d31-443d-8131-12d5026ec220">Show</a> |
<a class="text-indigo-600 hover:text-indigo-900" href="/admin/countries/eb1c9426-8d31-443d-8131-12d5026ec220/edit">Edit</a> |
<a data-confirm="Are you sure?" class="text-red-600 hover:text-red-900" rel="nofollow" data-method="delete" href="/admin/countries/eb1c9426-8d31-443d-8131-12d5026ec220">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div> <br>
<a id="new_admin_country_submit" class="btn btn-primary" href="/admin/countries/new">New country</a>
<p>
</p>
</div>
</div>
</main>
</div>
</div>
<footer class="footer">
<div class="container mx-auto mt-5">
© <span id="current_year"></span> CosmoZoo Inc, All rights reserved.
</div>
</footer>
</body>
</html>
test code (
the required line starts with #New country):
password = (0...20).map { ("a".."z").to_a[rand(26)] }.join
# See countries
Given("I am an admin") do
admin_user = FactoryBot.create(:user, name: "Tim Cook", email: "tester#example.com", password: password, confirmed_at: Time.zone.today)
admin_user.add_role :admin
expect(admin_user.has_role?(:admin)).to be_truthy
expect(admin_user).not_to be_nil
end
When("I am log in as an admin") do
visit user_session_path
fill_in "user_email", with: "tester#example.com"
fill_in "user_password", with: password
click_button "Log in"
end
Then("I should be logged in as an admin") do
expect(page).to have_content("Signed in successfully.")
end
When("I create countries") do
FactoryBot.create(:country,
country_code: "RU")
end
Then("I should see countries") do
visit admin_dashboard_path
click_link("Countries", match: :first)
expect(page).to have_content("RU")
puts page.body
end
# New country
When "I submit a new country" do
click_link "New country"
end
Then("I should see the new country") do
pending # Write code here that turns the phrase above into concrete actions
end
From the HTML the element should match the :link selector. That means there's really only a couple of possible reasons.
The link isn't actually visible on the page - add page.save_and_open_screenshot before the click_link to see what the page actually looks like. Is it possible you're not running the browser wide enough, and it's collapsing to a mobile layout or something?
You have CSS being applied to the link which is changing the case of the text - screenshot would show that too
One other thing to try would be click_link('new_admin_country_submit') and see if that actually finds and clicks the link (which would indicate an issue with text case, etc)

Why does this hover in scss & bootstrap not work?

I have the following Boostrap HTML:
<div class="d-flex mx-2 ml-auto">
<a href="#">
<%= inline_svg_tag("icons/interface/heart.svg", alt: "like", class: "icon icon-lg bg-danger heart-like-icon") %>
</a>
</div>
That generates the following HTML:
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="icon icon-lg bg-danger heart-like-icon">
<path d="M16.5 5C14.8905 5 13.0082 6.82463 12 8C10.9918 6.82463 9.1095 5 7.5 5C4.651 5 3 7.22218 3 10.0504C3 13.1835 6 16.5 12 20C18 16.5 21 13.25 21 10.25C21 7.42177 19.349 5 16.5 5Z" fill="#212529"></path>
</svg>
</a>
The above is in my articles/show.html.erb.
In my articles.scss, I have the following:
.heart-like-icon {
&:hover {
opacity: 0.5;
}
}
The heart.svg renders fine, but when I hover over the icon it doesn't change the opacity and when I check the element order in my developer console I don't see the heart-like-icon:hover style listed.
How do I fix this?
Remove the .heart-like-icon and change the "&" to "a". your css code should only be this:
a:hover {
opacity: 0.5;
}
Working example: https://jsfiddle.net/uaL4nxd3/2/

Navbar fits to screen even after using .container class from bootstrap in Asp.Net MVC 5

I am a beginner in ASP.NET MVC.
I am working on a project in which the navbar of my partial view for shared layout fits to screen even though I added .container class from bootstrap.
I want my navbar to be in the default size that .container class sets its content into.
If you refer the _Layout.cshtml script, you will see that the #RenderBody() is used to render the contents present in the body.
But the output of it is not what I expected. Why could this be happening?
_Layout.cshtml:
<!DOCTYPE html>
<html lang="en">
<head>
<title>#ViewBag.Title - BBC Application</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--Links to other CSS-->
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/mdb.css" rel="stylesheet" />
<link href="~/Content/mdb.min.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
</head>
<body>
<!--Navigation Bar-->
<nav class="navbar navbar-expand-sm navbar-light fixed-top z-depth-1" style="background-color: #F5F5F5">
<!--Navbar toggle button-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!--Logo-->
<a class="navbar-brand" href="#">
<img src="~/Content/Images/BBCLogo.png" height="50" width="50" />
</a>
<!--Links-->
<div class="collapse navbar-collapse" id="nav-content">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link hoverable" href="#">Home</a>
</li>
<li class="divider-vertical">
</li>
<li class="nav-item">
<a class="nav-link hoverable" href="#">About Us</a>
</li>
<li class="divider-vertical">
<li class="nav-item">
<a class="nav-link hoverable" href="#">Contact</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link hoverable" href="#">Login</a>
</li>
<li class="divider-vertical">
<li class="nav-item">
<a class="nav-link hoverable" href="#">Register</a>
</li>
</ul>
</div>
</nav>
<div class="container body-content">
#RenderBody()
<hr />
<footer class="footer">
<div class="container">
<span class="text-muted">© Copyright 2017 Big Boy Cars #DateTime.Now </span>
</div>
</footer>
</div>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery-3.2.1.min.js"></script>
<script src="~/Scripts/mdb.js"></script>
<script src="~/Scripts/mdb.min.js"></script>
<script src="~/Scripts/popper.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</body>
</html>
Index.cshtml:
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>#ViewBag.Title - Index</title>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/mdb.css" rel="stylesheet" />
<link href="~/Content/mdb.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div id="MyCarousel" class="carousel slide carousel-fade" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="MyCarousel" data-slide-to="0" class="active"></li>
<li data-target="MyCarousel" data-slide-to="1"></li>
<li data-target="MyCarousel" data-slide-to="2"></li>
</ol>
<!--Slides-->
<div class="carousel-inner z-depth-1" role="listbox">
<div class="carousel-caption">
<h3 class="h3-responsive">Big Boy Cars</h3>
<p>Best car dealers in market</p>
</div>
<!--First Slide-->
<div class="carousel-item active">
<div class="view hm-black-light">
<img class="d-block w-100" src="~/Content/Images/CarouselImage01.jpg" alt="First Slide" />
<div class="mask"></div>
</div>
</div>
<!--Second Slide-->
<div class="carousel-item">
<div class="view hm-black-light">
<img class="d-block w-100" src="~/Content/Images/CarouselImage02.jpg" alt="First Slide" />
<div class="mask"></div>
</div>
</div>
<!--Third Slide-->
<div class="carousel-item">
<div class="view hm-black-light">
<img class="d-block w-100" src="~/Content/Images/CarouselImage03.jpg" alt="First Slide" />
<div class="mask"></div>
</div>
</div>
</div>
<!--Controls-->
<a class="carousel-control-prev" href="#MyCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#MyCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery-3.2.1.min.js"></script>
<script src="~/Scripts/mdb.js"></script>
<script src="~/Scripts/mdb.min.js"></script>
<script src="~/Scripts/popper.min.js"></script>
</body>
</html>
Your partial view should include only what you want to have in place of the RenderBody helper. You are including the head and body tags again, which is just breaking everything apart.
So your Index.cshtml should be:
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div id="MyCarousel" class="carousel slide carousel-fade" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="MyCarousel" data-slide-to="0" class="active"></li>
<li data-target="MyCarousel" data-slide-to="1"></li>
<li data-target="MyCarousel" data-slide-to="2"></li>
</ol>
<!--Slides-->
<div class="carousel-inner z-depth-1" role="listbox">
<div class="carousel-caption">
<h3 class="h3-responsive">Big Boy Cars</h3>
<p>Best car dealers in market</p>
</div>
<!--First Slide-->
<div class="carousel-item active">
<div class="view hm-black-light">
<img class="d-block w-100" src="~/Content/Images/CarouselImage01.jpg" alt="First Slide" />
<div class="mask"></div>
</div>
</div>
<!--Second Slide-->
<div class="carousel-item">
<div class="view hm-black-light">
<img class="d-block w-100" src="~/Content/Images/CarouselImage02.jpg" alt="First Slide" />
<div class="mask"></div>
</div>
</div>
<!--Third Slide-->
<div class="carousel-item">
<div class="view hm-black-light">
<img class="d-block w-100" src="~/Content/Images/CarouselImage03.jpg" alt="First Slide" />
<div class="mask"></div>
</div>
</div>
</div>
<!--Controls-->
<a class="carousel-control-prev" href="#MyCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#MyCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
EDIT
In regards to the navbar. You have to wrap it in a .container:
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
..
</nav>
</div>
It's on the docs

Angular Material md-tabs: setting md-dynamic-height causing the tabs to scroll instead of the content

I'm trying out angular material and using the md-tabs but some reason when applying md-dynamic-height the tabs plus content if the content exceeds the length of the screen. I just what the content to scroll can't figure out what I'm doing wrong. Here's an example of what I am doing.
<md-tabs md-dynamic-height md-border-bottom md-center-tabs md-stretch-tabs md-swipe-content>
<!--First Tab-->
<md-tab md-dynamic-height label="First INFO">
<div class="">
<div class="bold">
</div>
<hr />
<img src="images/map-pin.png" width="45" height="45" class="left up10" />
<button class="btn-icon right up10"/>
<img src="images/compose.svg" width="25" height="25" />
</button>
<span></span>
<div >
</div>
<div style="clear: both"></div>
</div>
</md-tab>
<!--Second Tab-->
<md-tab md-dynamic-height label="Second INFO">
<div class="">
<div class="bold">
</div>
<hr />
<img src="images/map-pin.png" width="45" height="45" class="left up10" />
<button class="btn-icon right up10"/>
<img src="images/compose.svg" width="25" height="25" />
</button>
<span></span>
<div >
</div>
<div style="clear: both"></div>
</div>
</md-tab>
<!--Third Tab-->
<md-tab md-dynamic-height label="Third INFO">
<div class="">
<div class="bold">
</div>
<hr />
<img src="images/map-pin.png" width="45" height="45" class="left up10" />
<button class="btn-icon right up10"/>
<img src="images/compose.svg" width="25" height="25" />
</button>
<span></span>
<div >
</div>
<div style="clear: both"></div>
</div>
</md-tab>
Sample layout :
<md-tabs md-dynamic-height md-border-bottom md-center-tabs md-stretch-tabs md-swipe-content>
<md-tab label="1">
<md-content style="height:100%">
tab content here
</md-content>
</md-tab>
<md-tab label="2">
<md-content style="height:100%">
tab content here
</md-content>
</md-tab>
<md-tab label="3">
<md-content style="height:100%">
tab content here
</md-content>
</md-tab>
</md-tabs>
Try md-dynamic-height="" in md tabs
<md-tabs md-dynamic-height="">

Resources