I will need to provide a way for a user (who will be using a screen reader) to select multiple options within a form. Currently, these options are laid out in a two column table with checkboxes in the first column and spans with the label for the option in the second column. This isn't section 508 compliant, but it will need to be for this site. I'm trying to figure out the best way to replace this form with something better.
The options I have are to either
Use ul/lis with labels for the checkboxes
OR
Use a multi-select drop down list.
Does anyone have a preference or a better idea?
I've decided to use a muli-select dropdown. In case anyone was wondering. It seems to work fairly well with the screen reader I'm using. I did find that IE seems to be the best browser to work with and most screen readers aren't working very well with Chrome or other browsers unfortunately. I can only assume then that most people who visually disabled are probably using IE because of this.
Related
I have a basic footer that would be super easy to create in almost any environment but email.
i am looking to do a email/phone/unsubscribe line to appear like
"email#email.com | 1-888-PHONENO (1-888-111-1111) | Unsubscribe"
works perfect in desktop view (600px width) but once i try and do anything responsive it dies and formats all crooked. I've had good luck with flex box with apple products, but many of the microsoft products (email clients) strip the flexbox out. so i am using table but finding it difficult to make it responsive.
I would use media queries but when i use display:none, it doesn't always work. it almost like the sendgrid console wont let me target certain elements. for example i can easily change the html background using html, but when i give classes to elements, nothing happens, id's either. its like the style doesnt get applied.
to solve this issue i'd be totally happy with writing different header/footers and then rendering them per the view (599 down, 600 up) if anyone has experience using media queries in emails or sendgrid please advise.
I could also write a responsive table but having trouble w how to set that up for the above. some of the items would need to be wrapped, like it would be ok to render on 2 lines in mobile as long as the style looked decent. right now it looks jacked.
you cant-
due to email clients rendering code totally different (some strip margins/padding, some strip flexbox, some strip other things from your css)
just stay to best practices: inline style, single column tables work good on almost anything. keep it simple.
I made a nice looking inline css flex box footer. looked great on mac/google products, looked like garbage on all outlook/samsung.
so i had to dumb down my beautiful footer to something that was more compliant across platforms.
litmus is a tool we bought that really helps. you basically just have to design it then test. litmus will show you previews on every possible email client so u can go thru and find a good balance of compatibility and design.
for sendgrid, the built in template and drag and drop option render good on everything. use the v3 api and dynamic templates. use a drag and drop then add html blocks to customize what u need to. use the drag and drop as much as possible because they build a robust html code for you. unless you want to manually type out a 600 line email that is totally disorganized.
Using a VBA form, is it possible to add a Listbox control that has columns which contain Combo box controls?
No not possible with Standard VBA; Standard VBA will not allow this! You may be able to create a custom ActivX control or load another 3rd party control as suggested elsewhere but a standard ListBox cannot hold a ComboBox.
Other Workarounds may be usable if you can provide more details...
If you insist in doing that using User Forms, the only way is that when you click a list item, it should pop a different form containing the combo box, it will be too much work to create and difficult to maintain.
I am sure with spreadsheet itself you can come up with better solutions. I am still not sure what ultimately you want to achieve, but to me this is just a dependent list so you can use sth like this in the spreadsheet itself:
http://www.contextures.com/xlDataVal02.html
I am just wondering is there any plugin to create dynamic content for a page i.e something similar to a data repeaters in .net. To make it simple it should be a section that should contains 5 to 6 fields/property like
heading
heading 2
image
content - rich text editor
info
This must be in repeatable control so that the editor can add any number of these section a page and all these should be displayed in a single page.
Is there a plugin for the above functionality or what is the best way to achieve this.Any help would be greatly appreciated.
Thanks
Aneesh
You can achieve this without any plugins.
Create your repeatable section (containing the relevant fields) as a document type, and then use the multi-node picker in another document type to select one or many of the sections.
So for example, I could have a FAQs page (which uses a document type called "FAQs Page"), and I want to be able to add multiple question and answers to this page. I could set up a document type called "Question". This will contain two fields: Question and Answer.
On the "FAQs Page" document type, I would add a multi-node picker field called "Questions". This way, an author could select multiple "Question" nodes to appear on the FAQs page.
You would obviously need the code to output this, and also you would create a data type that inherited from multi-node picker, so that you could limit the selection to only Question nodes.
There is also the Repeatable Custom Content datatype which works well but does not support all data types. But it does support all the ones you need for your stated purpose (textstring, media picker, richtext area, etc).
You can find it here: http://our.umbraco.org/projects/backoffice-extensions/repeatable-custom-content I've used it a few times and it works really well in certain situations (e.g. where the items will not be shared across different pages of your site).
If you are sharing content components across multiple pages then #Digbyswift's solution is perfect.
I've always Digbyswifts method, but whilst looking for an alternate solution tonight I found this plugin, which is excellent for those situations where creating lots of widget nodes feels like overkill. It's licensed but the free older version is also available.
http://inaboxdesign.dk/blog/widget-builder-for-umbraco/
I have a requirement where I HAVE TO use bootstrap autocomplete dropdown, BUT user can have free form text in that dropdown if they wish. Before you think about TypeAhead, I could use Bootstrap TypeAhead textbox, but I need to have the dropdown becasue we want to give some default values as headstart options in case users dont know what to search for.
I am using this with MVC DropDownListFor as that creates a select control for us.
I found this article which does that for me.
https://github.com/danielfarrell/bootstrap-combobox/pull/20
All I had to do was take off the name from the select control and the control was letting me enter free form text. All good so far.
Now, I am using this in conjunction with Knockoutjs. I bind my options and selected value to the select control and then on row rendered of my template, I called (selector).combobox() which makes the select control a bootstrap comobobox and adds an input control and hides the select control in the scenes behind.
The problem now is when I try to get he values to post to server, since the value I put in input box is not a valid options from the options I gave to select control, it is always setting it to the first option by default. This is becasue, I set the binding of the selected value on select control and not on the input box which was created by bootstrap-combobox.js.
My question is how do I get the input box to data-bind to the same porperty as the the select control was bound to.
Any other options??
Let me know if you need more clarification or have questions.
Please suggest.
Thanks.
Have a look at Select2 for Bootstrap. It should be able to do everything you need.
Another good option is Selectize.js. It feels a bit more native to Bootstrap.
Does the basic HTML5 datalist work? It's clean and you don't have to play around with the messy third party code. W3SCHOOL tutorial
The MDN Documentation is very eloquent and features examples.
Select2 for Bootstrap 3 native plugin
https://fk.github.io/select2-bootstrap-css/index.html
this plugin uses select2 jquery plugin
nuget
PM> Install-Package Select2-Bootstrap
Fuel UX combobox has all the features you would expect.
Can i suggest http://www.jqueryscript.net/form/Twitter-Like-Mentions-Auto-Suggesting-Plugin-with-jQuery-Bootstrap-Suggest.html, works more like the twitter post suggestion where it gives you a list of users or topics based on # or # tags,
view demo here: http://www.jqueryscript.net/demo/Twitter-Like-Mentions-Auto-Suggesting-Plugin-with-jQuery-Bootstrap-Suggest/
in this one you can easily change the # and # to anything you want
Bootstrap Tokenfield seems good too: http://sliptree.github.io/bootstrap-tokenfield/
I have 2 multi-select Html.DropDownList controls with a button between them. When the user selects items from the first and presses the button they are copied to the second Html.DropDownList control via JQuery.
My problem is when the form is posted back I do not know how to obtain all the values in the second Html.DropDownList control.
This would be really easy with web forms but I have no idea how to do it with MVC2
thanks
--- Also I will need to validate the second Html.DropDownList to ensure it contains at least one item.
Okay, I can get it to work by selecting all the items in the list with JavaScript right before the post back. This feels like such a hack to me though. Surely there is a better way to do it then this. Does anyone know of a way that does not rely on JavaScript?
If relying on JavaScript is the standard way to do this sort of thing then can someone explain why this is okay... Or is this an example of the immaturity of the MVC model?
Thanks.