I dont use HEADER in my app, only in modal. After some click on bar-tab, header from modal appear on page. Can some tell my how to fix this?
Bug img
Resolve: move <modal> from <div class="content">.
Erorr include: I placed <modal> in <div class="content">.
Related
I use the "SB Admin 2" Theme for a project.
The integratet Metis Menu works very well on desktop, also on tablet.
But when I visit the page with my phone, the menu doesn't hide completely.
Only when I scroll the page.
You can visit https://blackrockdigital.github.io/startbootstrap-sb-admin-2/pages/index.html to test ist.
If you shrink the browser as far as its like a mobile screen, the menu does not hide.
I tried to do it on the bottom of my index.html file with $('#side-menu').metisMenu('collapse'); but it does not work. This is also defined in the sb-admin-2.js file. But it doenst work either.
Can you help me to get the menu hide completly, even on mobile devices?
Try downgrading the JQuery version to 2.1.3:
https://code.jquery.com/jquery-2.1.3.min.js
There are issues with metismenu with newer Jquery versions:
https://github.com/onokumus/metismenu/issues/128
You can do this with hiding it with css only
.navbar-top-links {
display: none
}
Or if you don't want to hide it always only on button click. Create a new button with these attributes before your current unordered list (ul)
<button type="button" class="collapse-2" data-toggle="collapse" href="#collapse2" aria-expanded="true">
And replace this code
<ul class="nav navbar-top-links navbar-right">
With this code
<ul class="nav navbar-top-links navbar-right navbar-expand-sm navbar-collapse panel-collapse collapse" id="collapse2">
I managed to get it working like this only you have to style the button and place it in the correct position.
If you visit www.arbetsformedlingen.se from a mobile, you will find a menu.
If you open that menu, you can only access items within that menu since tapping outside of the menu will close the menu.
If you for some reason are using a keyboard, you cannot tab out of
that menu.
However, visitors who uses the screen reader VoiceOver in IOS can simply move out of that menu by using the swipe left/right gestures to access the previous/next object in the DOM.
Question: Is there some way to prevent those users to access objects outside of the menu when the menu is visible?
An unsuitable solution due to the CMS would be to place the main content and the menu on the same node level, like in the simplified code below:
<body>
<div class=”maincontent” aria-hidden=”false”>
// Main content.
</div>
<div class=”mobilemenu” aria-hidden=”true” style="display:none">
// Menu.
</div>
</body>
When the menu is opened, the aria-hidden and display:none are toggled in order to just show the page contents or the menu.
Another unsuitable solution would be to toggle aria-hidden to every other object when the menu is opened, but that is impossible due to performance issues.
So, any piece of advice, thoughts etc are very welcome!!!
Using HTML5, you can set the "tab-index" to positive numbers on the elements within the menu. This will set focus to those elements. `
<div class="menu-container">
<div class="menu">
<div tabindex="1">Menu Item 1</div>
<div tabindex="2">Menu Item 2</div>
<div tabindex="2">Menu Item 3</div>
</div>
</div>
This may not be the best solution depending on what your trying to accomplish and what your code structure looks like.
You'll want to be sure to use the "tab-index" attribute correctly as to not break accessibility.
Good description and example
WebAIM-tabindex-accessibility
1: <cms:contentload editable/>
2: <cms:contentload editable/>
there are two of <cms:contentload> in one jsp page.
The problem is, the edit button of first <cms:contentload>, instead of staying at the tag, has been positioned to the second <cms:contentload> tag. and overlay completely.
First, the edit button don't work in tables. Now i think may be will be your html divs. The Edit button is displayed in the first div you find
supose
<div>
[...]
<cms:contentload editable="true">
[...]
<div>
[...]
<cms:contentload editable="true">
[...]
</cms:contentload>
</div>
</cms:contentload>
</div>
also check you css
I cannot figure out how to change a text in the header section of my site. I am trying to do this in my custom module's theme. This is how my header looks like:
<header>
<div class="container">
<div class="row-fluid">
<div id="Logo"><h1>#WorkContext.CurrentSite.SiteName</h1></div>
<h3>[ We Know Business ]</h3>
<a class="btn btn-navbar btn-menuh" data-parent="#collapse-nav" data-target=".collapse-menuh">btn</a>
<a class="btn btn-navbar btn-search" data-parent="#collapse-nav" data-target=".collapse-search">btn</a>
</div>
</div>
</header>
I changed [We Know Business] to [We know Businesses] but the updated text is not coming up on any page of my site.
However, my main objective is to use HTML5 and Responsive compatibility in IE8 by injecting conditional CSS and js like this:
<!--[if lt IE 9]>
<script src="/themes/intrust/js/html5shiv.js"></script>
<![endif]-->
I cannot see the above snippet in "View Source" option.
The reason I changed the text only to check whether I am doing it at the right place or not. When it didn't work I turned Shape Tracing tool on to see what template is being used for the header. But could not highlight any part of the header at all!
Isn't Layout.cshtml of my custom theme liable to render the header section? If not, which template I have to look for?
I must be doing something wrong here but cannot figure out what! Please help!
NB: I tried resetting IIS several times but had no luck either.
This is a bit late but what you are looking for is overriding document.cshtml.Orchard has a default in the folder Orchard\src\Orchard.Web\Core\Shapes\Views folder. Copy the file document.cshtml to your theme and put the items that you want in the header section of this document.
I'm trying to use HTML radio buttons in my Spotify app.
When the Inspector tool is used, the code for radio button is present there, but the radio button is not getting rendered in the browser inside the Spotify client. I am also getting the same result for the checkbox.
The same code is used with normal browsers like IE, Mozilla, or Chrome and the radio button gets rendered without any trouble.
Can anybody tell me why the radio button is not getting rendered in the sandboxed browser inside the Spotify client?
Thanks,
When looking at the radio button in the inspector, you can see that the input tag is getting the -webkit-appearance:none attribute set in the sp://import/css/shared.css and sp://import/css/reset.css files.
button, input, textarea {
-webkit-appearance: none;
font-family: inherit;
font-size: 12px;
}
The sp://import/css/adam.css and sp://import/css/eve.css files import the sp://import/css/shared.css file, which is how you are probably getting that attribute. The behavior only exists for the radio and checkbox types because the other input types are overridden elsewhere.
Tip: If you view the css attributes in the inspector, you can actually check them to remove or re-add the style.
Solution:
<input type="radio" style="-webkit-appearance:radio" />
<input type="checkbox" style="-webkit-appearance:checkbox" />
Be warned: It may have been the intention of the developers to not show radio/checkbox buttons, so your app may have approval issues because of the UI guidelines.
Regards,
Kevin
This post says it's a bug:
Spotify - Using Checkbox UI elements
(didn't check on spotify api doc tought...)