Can a NavMenu be responsive in element-ui? - responsive-design

I'm trying to make a responsive SPA based on vue.js and element-ui components. It has a responsive layout out of the box and it works fine, but I can't figure out how to make NavMenu (el-menu) component to move up or to hide under a 'burger' on mobile devices.
Current result is just a vertical menu above content, so you need to scroll down a while.
My app.vue layout:
<el-row>
<el-col>
<el-row type="flex" justify="space-between" align="middle">
<el-col :span="6">
<img src="/Assets/images/logo.png" width="64px" align="left" />
<h2>Admin</h2>
</el-col>
<el-col :span="2">
<sign-in></sign-in>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :xs="3" :lg="8" :xl="3">
<el-menu v-if="user.authenticated" style="min-height: 960px; background-color: #fff" v-bind:router="true">
<el-menu-item index="/offers">
<i class="el-icon-star-off"></i>
<span>Offers</span>
</el-menu-item>
...
</el-menu>
</el-col>
<el-col :xs="21" :lg="16" :xl="21">
<router-view style="width:100%;"></router-view>
</el-col>
</el-row>
</el-col>
</el-row>

The Element, it is not designed for a mobile platform, it is for a backstage management system. I'm not sure whether the team has a plan for supporting responsive design or not. On the other hand, the Element team provides a responsive grid system to make a flexible layout.
If you consider building a responsive navigation menu, then you have to implement it for yourself to achieve your cases.
Just to make people's life a little more convenient, I've created a simple responsive menu template using Element a couple of days ago.
Hope this helps you, to get some ideas.

Related

How to find ExtJS elements with dynamic id

I am working with Selenium and need to get the ID of a control but the ID is dynamic and I can't get it.
<em id="button-1122-btnWrap">
<button id="button-1122-btnEl" class="x-btn-center" autocomplete="off" role="button" disabled="disabled" hidefocus="true" type="button" style="width: 21px; height: 21px;">
<span id="button-1122-btnInnerEl" class="x-btn-inner" style="width: 21px; height: 21px; line-height: 21px;"> </span>
<span id="button-1122-btnIconEl" class="x-btn-icon icon-save-invoice"></span>
</button>
The number 1122 is dynamic and there are other buttons that has same beginning button-###+btnWrap.
I have been answering questions like for many times, you might want to have a look.
ExtJS pages are hard to test, especially on finding elements.
Here are some of the tips I consider useful:
Don't ever use dynamically generated IDs. like (:id, 'button-1122-btnEl')
Don't ever use absolute/meaningless XPath, like //div[4]/div[3]/div[4]/div/div/div/em/button
Take advantage of meaningful auto-generated partial ids and class names. (So you need show more HTML in your example, as I can make suggestions.)
For example, this ExtJS grid example: (:css, '.x-grid-view .x-grid-table') would be handy. If there are multiple of grids, try index them or locate the identifiable ancestor, like (:css, '#something-meaningful .x-grid-view .x-grid-table').
Take advantage of button's text.
For example, this ExtJS example: you can use XPath .//span[contains(#class, 'x-btn-inner') and text()='Send']. However, this method is not suitable for CSS Selector or multi-language applications.
The best way to test is to create meaningful class names in the source code. If you don't have the access to the source code, please talk to your manager, using Selenium against ExtJS application should really be a developer's job. ExtJS provides cls and tdCls for custom class names, so you can add cls:'testing-btn-foo' in your source code, and Selenium can get it by (:css, '.x-panel .testing-btn-foo').
Other answers I made on this topic:
How to find unique selectors for elements on pages with ExtJS for use with Selenium?
How to click on elements in ExtJS using Selenium?
Using class names in Watir
how to click on checkboxes on a pop-up window which doesn't have name, label
Note: sircapsalot's answer doesn't work for ExtJS, because most of buttons have CSS Selector em[id^='button-'][id$='-btnWrap'], (but can't blame him, as this is quite ExtJS specific, some people might not be familiar with).
Simple with CSS selectors.
Your selector would be,
em[id^='button-'][id$='-btnWrap']
Or if you wanted to click the button in there -
em[id^='button-'][id$='-btnWrap'] > button

How to disable menu entries in Zurb Foundation Top Bar

in a web application (= multi user environment) I need to disable certain menu entries in a top bar, depending on the currently logged-in user etc. To keep consistency in the UI, hiding/omitting the menu entries is not an option. Adding disabled/inactive/whatsoever class which is the way to go on other foundation elements e.g. buttons is not supported by the framework, obviously.
<li><a class="disabled" href="#">Disabled Menu Entry</a></li>
Any ideas?
Your question has nothing to do "directly" with Foundation. Disabling and/or hiding elements is either a CSS thing or javascript. You can NOT directly disable an anchor tag but you can simulate it's "disabled behavior". Based on what logic you have, how you will determine if an anchor tag should be disabled, you can do the following:
<style>
.disabled-link {
text-decoration:none; // really not needed for the Top Bar, just for general technique
cursor: auto;
}
</style>
<script>
$(document).ready(function(){
$(".disabled-link").click(function(e){
e.preventDefault();
return false;
});
});
</script>
<a class="disabled-link" href="#">Disabled Menu Entry</a>
Take note that the disabled-link class should be applied there based on some logic, this depends on your server side code - you did not tell us what other tools you were using. If you are using ASP.Net, PHP or whatever.
Additionally you should remember to validate on the server as there is no way of stopping your users to circumvent the disabled behavior of the links.

Using Zurb Foundation with Kendo UI

I am using the latest Foundation (3.x). What's the best way to also use KendoUI and leverage the responsive features of Zurb while also getting the JS bits of Kendo (such as charting).
Does anyone have experience in this, especially with the mobile version of sites? What should I watch out for?
Thanks
I was also really interested to work with KendoUI and Foundation toghether, since I much prefer the last one for responsive sites, instead of Bootstrap.
So I started to check in the last couple of days if it was possible and there wasn't any design style issues between KendoUI and Foundation. Well some issues came up and here is how I fixed them:
Using Foundation 4.3.1 and KendoUI Web 2013 Q2:
KendoGrid widget: the header is too high
simply remove the Table class-style support in Foundation
KendoDropDownList widget and similar (i.e. ComboBox, DatePicker, etc...) and Drag n'Drop in KendoGrid: popup window too far from the literal, drag n'drop too far from the pointer
body {
position: static;
}
*[class*="k-"] {
-moz-box-sizing: content-box !important;
-webkit-box-sizing: content-box !important;
box-sizing: content-box !important;
}
table {
margin-bottom: 0px!important;
}
This is the code you have to add in order to have almost everything ok for KendoUI (I hope, so far I didn't find any gliches yet). Be careful about the last code, since it's gonna apply the style to all the tags that have classes that starts with "k-" (it's a convention in KendoUI Team to put a "k-" to all the names).
Hope this helps! :)
Use Zurb 4 and the latest Kendo UI.
Go into Zurb's app.scss file
Turn off (comment out) these components: forms, custom-forms, and tables
if you find any weirdness, you can use this helper CSS as a CSS Fix, and just add the class to a DIV wrapped around your kendo widget:
.foundation-kendo *, .foundation-kendo *:before, .foundation-kendo *:after {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
e.g.
<div class="foundation-kendo">
<div id="grid"></div>
</div>
The above CSS hack should remain fairly unnecessary if you follow step 3.
You might try using Foundation 4-just released. They moved from using jQuery to Zepto, which may eliminate conflicts. Nothing wrong with Bootstrap, though.
Not sure this is the answer you want to hear...nor am I sure it is the correct answer...but here is my experience.
I have an existing project that we have been working on which uses Zurb Foundation 3. It is an MVC4 web app and we are using VS2012. We are really liking the responsive design stuff from Foundation...but we wanted to use a couple of the Kendo Widgets.
After getting my feet wet learning/experimenting with the widgets in a standard MVC project without Foundation, I decided to try to put Kendo into the project with Foundation. I spent half day trying to get it to work and never could get the two working together. If I pull the foundation stuff out, the Kendo stuff works just fine. Rather than spend anymore time working on trying to get this working we are looking at possibly just moving to twitter bootstrap instead.
According to this blog http://www.kendoui.com/blogs/teamblog/posts/13-01-18/easy_application_layout_with_twitter_bootstrap.aspx the Kendo stuff should work well with bootrap and for our purposes bootstrap would work just as well in our app as Foundation did.
Good Luck!

Add space between list items, or make items easier to select on touchscreens in ASP.NET dropdownlist

When developing an ASP.NET web application that is targeted at mobile devices (mainly tablets), I've noticed that drop down lists are sometimes difficult for users to select the correct item if they have fat fingers, or just aren't very good with a touchscreen.
I know I'm not the only one to notice this, as IOS apps specifically moved away from using drop downs for this reason and instead they typically use that UIPickerView control that looks like a roll of toilet paper, but lets people more easily select an item from a list by scrolling.
So, I'm looking for a good way in ASP.NET, without rolling my own custom control, to either make a dropdownlist easier to use on mobile devices, or am looking for some free control that I could use in place of a dropdownlist.
The first thing that comes to mind is; can I somehow space the list items further apart, so people can more easily select the item they intended? I've tried changing the font to be bigger, but that doesn't really help; especially because then the control has to be wider, when the problem is really just how much vertical space there is between items.
If not, does anyone have any suggestions or real-life examples of how they've addressed this concern?
Any suggestions are much appreciated!
I've used DropKick.js in passed projects with success. It overcomes the shortfalls of styling select options and provides more control of styling through CSS.
Update (after comment):
DropKick.js progressively enhances the HTML (select field) that's rendered on the page. All you'd need to do is provide the proper hooks that dropkick needs to convert the rendered select field into its implementation.
From dropkicks' homepage:
How to use
DropKick works by transforming your existing, boring into
beautiful, customizable HTML dropdowns. The name attribute is the only
one that is required. You should also set a tabindex attribute to
enable navigation via tabbing.
<select name="pretty" tabindex="1" class="pretty dk">
<option value="">Choose a reaction</option>
<option value="amazed">Amazed</option>
<option value="bored">Bored</option>
<option value="surprised">Surprised</option>
</select>
How do I use it in asp.net
Pretty simple you can download the js file and include it in your site:
<script type="text/javascript" src="js/dropkick.js"></script>
And include the css files for the styling:
<link rel="stylesheet" type="text/css" href="default.css">
You're almost there...now you need to use jquery to add it to the page's drop down lists, something to this effect:
$('#myDropDown').dropkick();
Or
$('.myDropDown').dropkick();
You can always use CSS. If you want to get fancy with JS, you can probably even serve different stylesheets according to the browser's user agent (desktop vs. mobile).
/* Drop down control itself */
select.ddlList {
padding: 5px; /* padding between the border of the drop down and the items */
}
/* Drop down list items */
select.ddlList > option {
padding: 15px 5px; /* 15px = top/bottom padding, 5px = left/right padding */
}
With an ASP.NET control...
<asp:DropDownList ID="ddl" CssClass="ddlList" runat="server">
<asp:ListItem ... />
<asp:ListItem ... />
</asp:DropDownList>
Edit: Well, Xander is right--you can't style the options via CSS, but my example for the DropDownList styling still stands. This will make your DropDownList much more visible to a touch client. http://jsfiddle.net/DwY87/6/

Selenium: Testing custom form elements

Select boxes, checkboxes and radiobuttons are difficult to style with CSS, so it is common to apply plugins, replacing the native form elements with regular elements that are easier to apply CSS to.
The jQuery UI Selectmenu is an example: http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/
These plugins typically produce markup like this:
<select name="mySelect" style="display: none; ">
<option value="1">1</option><option value="2">2</option><!-- ... -->
</select>
<a class="pretty-select-box">...</a>
<ul class="pretty-select-box-dropdown-list">
<li>Item 1</li><li>Item 2</a></li><!-- ... -->
</ul>
The problem is that when such plugins are installed, Selenium tests using the native form elements will fail with this exception:
OpenQA.Selenium.ElementNotVisibleException : Element is not currently visible and so may not be interacted with
What is the best approach to fix this? I figure this must be a common problem, but I haven't been able to find much information about it.
I've no idea how to disable the plugin you're using in the web page. However, I can tell you that one of the primary goals of WebDriver is to interact with the page as the user sees it. Therefore, you cannot interact with elements directly that are not visible. You always have the option of using JavaScript to manipulate the element, if you absolutely have to interact with the hidden element. Bear in mind, though, that in doing so, you lose one of the main advantages of using WebDriver (especially with so-called "native events"), namely that you don't need to worry about manually triggering events on the elements as the driver does that for you.
You probably want the website to work (functionally, even if it's not pretty) without the fancy plugins enabled. So maybe disable the plugins and make the testing easier?

Resources