131 comments found.
Possible to collapse all / a sub-menu header when a main-menu header is clicked?
What do you mean by ‘main-menu header’? Uppercased header eg. ‘APPLICATIONS’ or eg. ‘Components’?
In the demo say I expand Components menu, then I click Chat menu, how to collapse Components menu (or all expanded menus) when using Ajax (so no page reload)?
$('.sc-js-submenu-trigger.sc-section-active').children('a').trigger('click')
Could you upgrade TinyMCE to latest for mobile support? Thanks!
Hi, I’ll add your suggestion to todo list. Thank you
Sounds great, thanks.
I’ve found the screen overlay you use in the mailbox example and have started using it with a spinner when I process ajax post backs.
However, it doesn’t cover the left-hand main menu; is this intentional?
If I increase the overlay z-index to cover the menu it appears on top of the spinner.
Hi, this overlay is mainly used for the page content (mailbox example). In next release I’ll include separate example with this overlay component (page content overlay, whole page overlay, overlay with the spinner etc.)
Sounds great, thanks.
Hi, is there a way to have “help” text under items in a dropdown as per Facebook?
https://ibb.co/M1CXgM4
<div data-uk-dropdown>
<ul class="uk-nav uk-dropdown-nav">
<li>
<a href="#">
Hide post
<small class="uk-display-block uk-text-muted">See fewer posts like this.</small>
</a>
</li>
...
</ul>
</div>
Thanks, awesome support as always!
On pages like the chat example could you add a way to hide the off canvas on small screens when a list item is clicked?
data-uk-offcanvas="selClose: .my-close-class" // link in offcanvas <a href="#" class="my-close-class">Link</a>https://github.com/uikit/uikit/issues/4001#issuecomment-597120697
Does the colorpicker support choosing / entering a custom color?
data-sc-colorpicker='{ "pallete": ["#ccc", "#ddd", "#000"]}'
I know that word “pallete” is wrong, it should be “palette” but for now please use this wrong version 
I’ll fix that in next release
Thanks, I saw that settings, however I was thinking from the user perspective. If they need a color that’s not in the palette they can choose from a picker, enter a hex value, etc.
It’s not possible with this colorpicker.
If you need more powerfull colorpicker please check this plugin https://seballot.github.io/spectrum
Hi Tomek, could please add a dark theme and an accessible theme to the Scutum to-do list? Thanks!
Hi, thank you for your suggestions, I’ll add them to todo list.
How could I put a scrollable div in a card column without making the whole card contents scroll?
You can put sc-js-scrollable enywhere
<div class="uk-card-body">
<div data-uk-grid>
<div class="uk-width-2-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores eum ex excepturi exercitationem explicabo maiores nihil, perspiciatis quod sed voluptates.</div>
<div class="uk-width-1-3">
<div class="uk-height-medium sc-js-scrollable">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aut eligendi exercitationem facilis, fuga numquam odio perferendis perspiciatis quaerat veniam. Adipisci aliquam consequatur molestias non pariatur quibusdam veniam. Aliquid at cum dignissimos ducimus excepturi fugiat impedit inventore ipsam labore mollitia nisi, officia praesentium provident reiciendis reprehenderit repudiandae rerum saepe suscipit veniam, voluptatum! A consequuntur dolorum, enim libero modi nam odit perspiciatis placeat possimus, quasi rem, soluta veniam vero voluptatem voluptatibus. A assumenda, consequuntur cupiditate earum exercitationem ipsa nostrum odit, pariatur quae quidem quos, rem totam voluptas. Aliquid commodi cumque delectus deserunt dignissimos excepturi hic in ipsam iste, itaque magnam maiores, mollitia nam neque perferendis placeat quas reiciendis saepe, temporibus veritatis. Ad architecto beatae debitis delectus dolorem ea eos ipsam mollitia nam necessitatibus numquam officiis perferendis porro praesentium quas quibusdam, reiciendis sequi. Accusantium ad animi architecto aut autem beatae consequuntur cum cupiditate dicta distinctio eius eum exercitationem inventore ipsam ipsum itaque iusto minus mollitia nemo nesciunt non odio odit omnis quae quidem reiciendis, repellat sint sit soluta tenetur ullam vel vitae voluptate voluptatem voluptates voluptatibus voluptatum? Aut beatae dolor dolorum facere, fuga ipsam magnam modi necessitatibus neque nostrum obcaecati, placeat porro possimus quo repellendus tenetur unde vel. A aliquid, amet asperiores aspernatur at blanditiis consequuntur corporis debitis doloremque eligendi, esse fugit hic itaque magnam nam porro quaerat qui quis recusandae sequi unde voluptatem voluptatum. A accusamus, aliquam architecto cum dolorem eaque earum esse eum exercitationem, harum impedit ipsam iure laborum molestias neque nostrum praesentium quod rem tempore temporibus ullam vero voluptates?
</div>
</div>
</div>
</div>
Yes, but it scrolls all the columns in the card, not just the contents in the scrollable div.
You can put <div class="uk-height-medium sc-js-scrollable"></div> anywhere you want. Please check the code in my previous comment.
Yes, I tried it and the whole card scrolls. Odd, I’ll try and adjust one of your sample pages and report back. Thanks as always.
How to replace logo in header with text heading?
<h5 class="uk-margin-remove"><a href="dashboard-v1.html" class="md-color-white">Scutum</a></h5>
Thanks for the reply, however with long text it causes unsightly wrapping and pushes the search bar over, etc.
Is there any way to have a text heading which truncates and still doesn’t push search, icons, etc. over?
<div class="uk-navbar-left nav-overlay-small uk-margin-right uk-navbar-aside uk-flex">
<a href="#" id="sc-sidebar-main-toggle"><i class="mdi mdi-backburger sc-menu-close"></i><i class="mdi mdi-menu sc-menu-open"></i></a>
<div class="uk-visible@s uk-flex-1 uk-overflow-hidden">
<h5 class="uk-margin-remove uk-text-truncate md-color-white">
<a href="dashboard-v1.html" class="md-color-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, pariatur!</a>
</h5>
</div>
</div>
Thanks for adding sc-uk-dropdown-close, however it only checks for uk-dropdown. Please could it also check for / close uk-dropdown-small?
<div class="uk-inline">
<button class="sc-button sc-button-outline" type="button">small</button>
<div class="uk-dropdown-small" data-uk-dropdown="pos: top-left;delay-hide: 100">
<ul class="uk-nav uk-dropdown-nav">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#" class="sc-uk-dropdown-close">Close</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
Hi Tomek! How would I add a checkbox to the left and a dropdown to the right of the avatar on the Contact List page? Trying to achieve something similar to the contact list(s) in Altair. Thanks!
<ul id="sc-contact-list" class="uk-child-width-1-1 uk-child-width-1-2@m uk-child-width-1-3@l" data-uk-grid>
<li>
<div class="uk-card uk-card-hover">
<div class="uk-card-body sc-padding-remove">
<div class="uk-grid-divider uk-grid-collapse" data-uk-grid>
<div class="uk-width-1-3@l uk-flex uk-flex-middle uk-flex-center uk-position-relative">
<div class="uk-position-absolute uk-position-top-left uk-margin-small-top uk-margin-small-left">
<input type="checkbox" id="square-checkbox-1" data-sc-icheck>
</div>
<div class="uk-position-absolute uk-position-top-right uk-margin-mini-top uk-margin-small-right">
<div class="sc-actions">
<div class="sc-dropdown sc-dropdown-ico">
<a href="#" class="sc-actions-icon mdi mdi-dots-vertical"></a>
<div class="uk-dropdown-small" data-uk-dropdown="mode:click">
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Action 1</a></li>
<li><a href="#">Action 2</a></li>
<li><a href="#">Action 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="sc-padding-medium uk-text-center">
<img src="assets/img/avatars/avatar_04_md.png" class="sc-avatar sc-border" alt="qhowe"/>
<p class="sc-text-semibold uk-margin uk-margin-remove-bottom">
Burley Erdman
</p>
<p class="uk-margin-remove sc-color-secondary uk-text-medium">Nolan, Deckow and Pfeffer</p>
</div>
</div>
<div class="uk-width-2-3@l">
...
</div>
</div>
</div>
</div>
</li>
...
</ul>
Hi, thanks for this; FYI a long dropdown appears “inside” the card and makes it scroll, rather than appearing over the top. Is there a fix?
Hi, I can’t reproduce this issue. On the contact list dropdown appears over the top. Please send me a reduced HTML code, I’ll check what’s wrong.
Hi, I’m using an expanded header layout which causes the issue. Just use <html lang=”en” class=”sc-card-fixed sc-header-expanded”> in the pages-contact_list.html example and you’ll see the popup (above code) is within the card. The sc-card-fixed class causes the issue as I’m showing cards within a fixed layout card.
<div id="sc-page-content" class="uk-height-1-1" data-sc-scrollbar>
Thanks for adding sc-uk-dropdown-close, however it only checks for uk-dropdown. Please could it also check for / close uk-dropdown-small?
How could I make sc-top-bar fixed / sticky? For example, on the view issue page sample.
Any Scutum plans or suggestions for an image upload with preview as per the Altair avatar?
data-uk-sticky="offset:48"
<div id="sc-page-top-bar" class="sc-top-bar" data-uk-sticky="offset:48">...</div>
I’ll add image upload with preview to todo list for Scutum. Thank you for your suggestion.
Thanks as always Tomek! For the image upload, a simple crop / square avatar selection as per Facebook would be great too.
On my android mobile phone (version 9) the header is not fixed and goes off the page with scrolling. It is fixed on desktop (windows 10.)
How can I get Scutum to have the header fixed in all situations?
components/Header.vue and in mounted hook set options to {}
mounted () {
// sticky header
var options = {};
UIkit.sticky(this.$refs.header, options);
}
Here you can find all the options for sticky component https://getuikit.com/docs/sticky#component-options
The “car rental” example form has a blue “book now” button. How do i change all buttons globally and the header background (lol, that should be easier) from the green to this same hue of blue across the scutum?
1.open
assets/scss/common/_variables_mixins.scss and change$_theme-color to blue. After that your header and primary button will be blue but if you want the exact hue of the blue color (600) please do the next steps2. open
assets/scss/partials/_header.scss and change .uk-navbar background to $theme-color
#sc-header {
...
.uk-navbar {
...
background: $theme-color;
}
...
3. open assets/scss/components/_buttons.scss and change .sc-button-primary background to $theme-color
.sc-button {
...
&-primary {
@include buttonVariant {
background: $theme-color;
}
}
...
Hi Tomek, do you know how to add map marker infowindows onclick to Markers demo?
Hi. If you click on the “Booking form” under Form Examples and then click the menu again, menu displays under the booking form component rather than first erasing it (destroying the component?) why is this?
HI, it seems that inline calendar has higher z-index than any other component on the page. It will be fixed in next release. Thank you for the info.
Great. Pls point me to where exactly the zindex can be changed
.date-picker-wrapper {
...
z-index: $z-index-sidebar + 50;
}
to
.date-picker-wrapper {
...
&:not(.inline-wrapper) {
z-index: $z-index-sidebar + 50;
}
}
Hi Tomek,
this is not really finished:
Add new task function in Task Board
Is the release up to date, or did you forget to push?
Never mind. Keep up the great work!
Hi, this feature has been added to Scutum Template in latest release, please try to click on ‘Add Card’ in dropdown menu. Modal with the input fields should open, after filling the data click on ‘Add card’. New task should be added at the bottom of the column. There is no saving to db or cache but this functionality can be easilly added.
Right, thank you. My confusion was after clicking plus button. But with ‘Add Card ’ everything works as expected.
I’m considering moving from Altair to Scutum but I see Scutum doesn’t have a speed dial FAB? Any reason why you no longer have a speed dial button or can you add one to Scutum? Thanks!
Hi, sorry for the late reply.Speed dial FAB is on my todo list, I’ll add it to Scutum asap (I’ll try to include this feature in next release).
Next update will be released in about 10 days, sorry for the delay.
Thanks Tomek, looking forward to update.
Hi Tomek, any idea / demo on how to achieve a chapter / content builder as per Thinkific in Scutum?
https://mk0thinkificig8baqk3.kinstacdn.com/wp-content/webp-express/webp-images/doc-root/wp-content/themes/thinkific/assets/images/features/features-build-chapter-preview.png.webpPossibly with Accordion component / dynamic fields?
They also have a nice UI where on a large screen the builder is on the left and clicking an entry shows the content on the right.
https://mk0thinkificig8baqk3.kinstacdn.com/wp-content/webp-express/webp-images/doc-root/wp-content/themes/thinkific/assets/images/features/features-build-course-builder-background--desktop.jpg.webpBut when on a small screen the builder is full screen and clicking an entry the content slides in to cover the page automatically (similar to the right hand menu in Scutum).
Hi, I think with the accordion/dynamic component this content builder can be achieved. I see that there is also a drag/drop funcionallity implemented so I think that sortable component should also be used for that or better https://quirky-hodgkin-15c56c.netlify.com/ if you need nesting functionallity.
It would require some custom work but it can be achieved. If you need help with this builder please send me message through support page or email.
Thanks Tomek for all your support and advice!
On a related note; is there a way to enable the secondary (right hand) menu on all screen sizes and have it “slide in” on an action, such as a button click?
If that’s possible I’d then like the option to control the width (full on small devices, half on large devices) and display a close or back button to hide it.
Please check https://getuikit.com/docs/offcanvas
You just need to create custom offcanvas class and apply this class to your offcanvas, something like this:
HTML
<button uk-toggle="target: #my-offcanvas" type="button"></button>
<div class="my-offcanvas" id="my-offcanvas" uk-offcanvas="flip: true">
<div class="uk-offcanvas-bar">
<button class="uk-offcanvas-close" type="button" uk-close></button>
Content...
</div>
</div>
CSS
.my-offcanvas .uk-offcanvas-bar {
width: 50%;
right: -50%;
}
@media (max-width: 959px) {
.my-offcanvas .uk-offcanvas-bar {
width: 100%;
right: -100%;
}
}
Thanks Tomek, great stuff!
Is there a way to have the Scutum secondary menu visible all the time, replace the icon with a help icon and support it on all screen sizes? Thinking about using it for context help on every page. Thanks.
<header id="sc-header">
<nav class="uk-navbar uk-navbar-container" data-uk-navbar="mode: click; duration: 360">
...
<a href="#" uk-toggle="target: #my-offcanvas" class="md-color-white uk-margin-left">
<i class="mdi mdi-help-circle"></i>
</a>
</nav>
</header>
<div class="my-offcanvas" id="my-offcanvas" uk-offcanvas="flip: true">
<div class="uk-offcanvas-bar">
<button class="uk-offcanvas-close" type="button" uk-close></button>
Content...
</div>
</div>
Thanks Tomek, top notch support as always!
Hi Tomek, I got around to trying the my-offcanvas resizing above and it doesn’t work; not sure if the breakpoints are different or I’m missing something, but the off-canvas appears tiny. Any chance you can help? Thanks.
Hi, send me the CSS and HTML. I’ll take a look.
Thanks Tomek, I’m just trying to use a uikit offcanvas but have its width be 50% on large screens and 100% on small screens. But when I used the HTML / CSS you posted above the off canvas appeared with a really small width.
Hi, sorry for the late reply. Please check in chrome web developer if custom styles for this offcanvas are aplied (mobile/desktop version). You can also try to put this styles at the bottom of the stylesheet, maybe styles for offcanvas are overwritten somewhere else.
Hi there, have you used vuex for state management? Please let us know, we are very interested about this template. Thanks.
Hi, yes, I have used vuex (modules mode) for state managament in Scutum Admin. https://nuxtjs.org/guide/vuex-store/#modules-mode
Hi, I got your email, thanks for response. I couldn’t get the template to install despite following the documentation. I am not extracting the component, I would like the whole page to work. Can you direct me on how to make the template work. Many thanks.
Hi, I’m not sure what is not working for you? Please send me more info.
When you extract the downloaded package please open admin/html/dist/pages-task_board.html
Is it working for you? Do you have a errors in js console?
If you are talking about the commands in dropdown (Add Card, Copy List …), they are not working. Like I said before, Scutum Admin is a template, not fully functional application, if you need this functions you need to add them by yourself.
