I have a menu that is hidden in mobile view of application and viewable in desktop view. So since it's not activated the items in that menu shouldn't be focused when tab through but they are tab-able when the menu is hidden.
This is what I see in applicantion.html.haml
......
.page-layout
.page-layout-sidebar
=link_to '/', class: "page-Branding page-Branding--secondary" do
= image_tag site_logo_src, alt: 'Logo'
%nav.page-Layout-nav{'aria-label' => 'Primary Navigation', 'role' => 'navigation'}
%ul.topia-Nav
- feature :item1 do
%li
=link_to t('menu.item1'), root_path, { :class => 'page-Nav-action'}
- feature :item2 do
%li
=link_to t('menu.item2'), item2_path, { :class => 'page-Nav-action'}
......
I did inspect on page and I see page-Nav-action in multiple css files. I tried using tabindex: -1 in html it works in mobile view but then in desktop view I can't tab through menu items. Also tabindex is HTML attribute so can't use in CSS. I am guessing I have make changes from CSS. Any help is appreciated.
tabIndex is the value you need in HTML. Setting to -1 will make sure the tab button will not focus the element. There's no supported method to do this in CSS. You can toggle the tabIndex value in Javascript.
window.onresize = function(){
if(this.innerWidth > 500){
tabIndexes(0)
} else {
tabIndexes(-1)
}
}
function tabIndexes(index){
var inputs = document.querySelectorAll('input');
for(var i = 0; i < inputs.length; i++) inputs[i].tabIndex = index;
}
Related
I have a page using materialize framework, with a select field:
.input-field
Region(s)
= select_tag 'user[region_ids][]', options_for_select(#regions_list), :multiple => true, :class => %w(toHide regionSelector validate), :required => true
%label{ for: "user[region_ids][]" } The region is required
The validation popup is aligned to the top-left corner of input-field, but I'd like it to be aligned to bottom-left or bottom-center. How would I make that change?
This issue is due to using a pre v0.100.2 version of Materialize. The latest version of Materialize and its associated documentation can be found here: https://github.com/Dogfalo/materialize
Here's the problem. I have one haml page with a list that looks like this:
It's a list with elements formed by a div (left side) and an ul of buttons (right side). Here's the summarized code:
%li.rutinas-li{style: "overflow:visible"}
%div{ style: "display: inline-block;" }
= link_to ...
...
%br
%p ...
%br
%span
= ...
.thumbs-container
=link_to ...
= icon('thumbs-up', ...)
%strong ...
.thumbs-container
=link_to ...
= icon('thumbs-down', ...)
%strong ...
.thumbs-container
=link_to ...
= icon('star', ...)
%ul.pull-right.without-bullets.no-padding
%li.inline-block= link_to ...
%li.inline-block= link_to ...
%li.inline-block= link_to ...
%li.inline-block.dropdown
%a.dropdown-toggle{"data-toggle": "dropdown", type: "button"}
= icon('share-alt', ...)
%ul.dropdown-menu{style: "min-width:0"}
%li{style: "padding: 15px"}
= link_to ...
= icon('envelope', ...}
%li{style: "padding: 15px"}
= link_to ...
= icon('twitter', ...")
%li{style: "padding: 15px;"}
= link_to ...
= icon('facebook', ...)
I need the line 1 {style: "overflow:visible"} because the last ul is a dropdown that looks like this:
And if I remove it the dropdown is cropped. However, this css property causes also that when the screen is smaller ( a mobile phone, for example), the list is displayed like this:
And I would like it like this instead:
As the overflow is permitted, the list of buttons on the right are overflowing the parent and his white separators, it is kind of ugly. But if I remove {style: "overflow:visible"} the dropdown won't be visible when I click on it
Your problem is just the width and height of your elements, you must change it if the device is smaller.
Think responsive ! A great solution would be to create a media query and to place your buttons under your text.
If you don't want your ' li ' to have a too big height, you could also place differently your text so it could take the full width too.
I want to take a tag and replace with a #Html.textarea() razor html helper but it doesn't look as if JQuery can replace DOM elements with html helpers. How do I go about this?
using(#Html.BeginForm())
{
<a id="clickme">Edit</a>
<div>#Model.username</div>
}
How can I replace this div with #Html.Textarea ? JQuery could do it with div and input tags.
jQuery cannot replace a tag with #Html.TextArea() !
The TextArea helper method is a C# method, which gets executed when razor tries to render the view. This happens in your web server. jQuery is a client side library and anything you do with jQuery happens at client side, in your browser.
But all these helper methods ultimately generate some HTML for DOM elements. That means, you can use jQuery to manipulate visibility of that.
If you are trying to do something like an inline edit, you can use a script like this , to start with
First, render the text area along with your label div, but have it hidden initially. Also wrap the label,edit link and the hidden input inside a container div which we can use later to help with our jQuery selectors.
#using (#Html.BeginForm())
{
<div class="edit-item">
Edit
<div class="edit-label">#Model.FirstName</div>
#Html.TextAreaFor(a => a.FirstName,
new { style = "display:none;", #class = "edit-text" })
</div>
<div class="edit-item">
Edit
<div class="edit-label">#Model.UserName</div>
#Html.TextAreaFor(a => a.UserName,
new { style = "display:none;", #class = "edit-text" })
</div>
}
Now when the user clicks edit, you have to toggle the visibility of the label and hidden input and update the value of label after user done editing the value in the input element.
$(function () {
$("a[data-mode]").click(function (e) {
e.preventDefault();
var _this = $(this);
var c = _this.closest(".edit-item");
c.find(".edit-text").toggle();
c.find(".edit-label").toggle();
if (_this.attr("data-mode") === 'label') {
_this.attr("data-mode", 'edit');
_this.text("done");
} else if (_this.data("mode") === 'edit') {
c.find(".edit-label").text(c.find(".edit-text").val());
_this.text("edit");
_this.attr("data-mode", 'label');
}
});
});
This is a head start. You can optimize this code as needed.
Here is a working jsfiddle for your reference
I've been working on an application in ruby on rails and trying to display list of check boxes like this
[ ] Conflict Resolutions
[ ] Customer Know how
[ ] personal Branding
But I managed to get this
Conflict Resolution
[ ]
Customer Know How
[ ]
Personal Branding
[ ]
My html.haml file looks like this
.col-md-6.col-md-offset-3
= form_for(#user) do |f|
= f.label :conflict_resolution, 'Conflict Resolution'
= f.check_box :conflict_resolution
= f.label :customer_know_how, 'Customer Know How'
= f.check_box :customer_know_how
= f.label :personal_branding, 'Personal Branding'
= f.check_box :personal_branding
Tried Display:inline for inputtype = checkbox . Didn't work out!!
Use
input[type='checkbox'] { display: block; float: left; }
input[type='checkbox'] + label { display: block; }
If you don't want this to affect the visual representation of checkboxes and following labels on other parts of your application (that uses the same css), you need to give the rule some html context by preceding both rules with a selector matching it's parent (that is different from all other parents on other pages/parts of the application).
If you can change your haml a more elegant solution would be having the label element wrapped around the checkbox so if you click the label it activates the box.
here's how you can do that:
= form_for(#user) do |f|
= f.label(:conflict_resolution) do
= f.check_box :conflict_resolution
Conflict Resolution
= f.label(:customer_know_how) do
= f.check_box :customer_know_how
Customer Know How
= f.label(:personal_branding) do
= f.check_box :personal_branding
Personal Branding
I have a Rails app in which I use Boosttrap and HAML, when I present the flash messages I would like to change their appearance slightly. I want them to be full screen with cold-md-1 margins on each side, and a col-md-10 contains the flash message.
What I've tried is:
- if flash[:notice]
/ Full width is a css class with 100% width, so the width works...
.alert.alert-info.alert-dismissable.full-width
.col-md-1
%button{:type => "button", :class => "close", 'data-dismiss' => "alert", 'aria- hidden' => "true"} ×
= flash[:notice]
.col-md-1
This doesn't work quite as I want (not the correct margins). I have also tried to contain the flash message like this:
.col-md-1
.col-md-10
[message]
.col-md-1
Then it looks ok, but the close button doesn't work as I want (it doesn't close the whole message). To illustrate what I what to achieve, see the image below:
Here I want the close button (note: only the close button, and not the background) to align with the account drop down and the gray box.
Any ideas on what I should do?
You are making simple thing look complex. You want to have col-md-1 margin on each side so your alerts width will be col-md-10 and bootstrap3 has col-md-offset-* classes for offsetting it.
- if flash[:notice]
.alert.alert-info.alert-dismissable.col-md-10.col-md-offset-1
.col-md-1
// give proper width and margin to this div to align button with dropdown
%button{:type => "button", :class => "close", 'data-dismiss' => "alert", 'aria- hidden' => "true"} ×
= flash[:notice]
Solved it by using some javascript (or coffee-script). View:
.alert.alert-info.alert-dismissable.no-border-radius
.container
.col-md-1
.col-md-10
= flash[:notice]
%button{:type => "button", :class => "close", 'data-dismiss' => "alert", 'aria-hidden' => "true"} ×
.col-md-1
JavaScript (or CoffeeScript):
$('.close').click ->
$(".alert").hide();