Sorry for the generic title, but i dont know how to call the element i want to create. Thats what i need... i tried to post image, but i dont get necessary privileges yet. So ill try to describe it.
Here on stackoverflow, on the question's page, after each title and summary there are some boxes displaying the tags from the questions.
I want the exactly same look, but instead of links, those boxes should act the same way as a Radio Button List. I can only choose one of then at a time and when pick one, the selected one ill get different style added to him. After submitting the form i should be able to recover de selected item in the controller.
I'm using Asp.Net MVC4 and the options that make the element will come from a controller.
Sorry for the question without code or something that i allready make. But i have this necessity and i dont even know if this sort of style or element have an specific name or keyword D.
Do you guys know from where to start with something (tutorials with similar final result ?) ?
Thanks for the help and sorry for the bad english.
Code After Looking at the proposed answers' link
CSS Code
input[type=radio] { display: none;}
.rbLista span { font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,Sans-serif;
font-size:12px; background: RGB(217,217,217); border: 1px solid RGB(217,217,217); }
.rbLista span:hover { border: 1px solid RGB(54,52,53); background: RGB(54,52,53); color: white; }
.rbLista input[type=radio]:checked + span { background: #D71712; color: #fff; border: 1px solid #D71712; }
.rbLista input[type=radio]:checked + span:hover { background: #D71712; }
and View Code
<section class="rbLista">
#foreach (var item in Model.ChamadoDetalhe.Transitos)
{
<label>
#Html.RadioButtonFor(x => x.NovoTransito.Transito, #item.Text, new { #id = item.Text, #text = item.Text })<span>#item.Text</span>
</label>
}
#Html.ValidationMessageFor(x => x.NovoTransito.Transito)
</section>
You could try something like this. Here's a working demo.
Related
I am trying to make a mat-card navigable from the keyboard. Right now, when pressing tab the element is focused however the redirect event (should be the same as the click event) isn't triggered when pressing enter.
I've tried keydown.enter and onKeyDown (from a11y package) but no success so far.
HTML
<mat-card role="group" (click)="addQueryParam(group.name)" (keydown.enter)="addQueryParam(group.name)" class="mat-elevation-z0"
[ngClass]="'background-'+index" (mouseout)="mouseOver=false"
(mouseover)="mouseOver=true" style="padding: none; margin: 5px">
Typescript
addQueryParam(groupName) {
this.router.navigate(['/data'], { queryParams: { ['groups.title']: groupName }, queryParamsHandling: 'merge' });
}
Any idea how to solve this issue?
TIA,
Isabela
I suggest you two things:
try using (keyup.enter)=.... I used it a couple of times and it worked well
If that doesn't work try using (keyup) or (keydown) and in your function check if the key code is 13 (enter key code), something like this:
HTML
<mat-card role="group" (click)="addQueryParam(group.name)" (keydown)="addQueryParam($event, group.name)" class="mat-elevation-z0"
[ngClass]="'background-'+index" (mouseout)="mouseOver=false"
(mouseover)="mouseOver=true" style="padding: none; margin: 5px">
Typescript:
addQueryParam($event, groupName) {
if($event.keyCode === 13){
this.router.navigate(['/data'], { queryParams: ...);
}
}
If i remember correctly you can check the type of the event in a field like event.type, or something like that.
Additionally check this discussion out, because theese functions are not well documented, and here you can find som infos :
What are the options for (keyup) in Angular2?
EDIT
I also found this very useful article: https://medium.com/claritydesignsystem/angular-pseudo-events-d4e7f89247ee
#3 EDIT => CAUSE FOUND!
So I found that what is causing the issue is Datatable. Even if I'm not using pagination, Datatable is limiting the number of rows the form can POST.
jQuery('#tblStats').DataTable( {
dom: 'ft',
ordering: false,
jQueryUI: true,
scrollY: "400px",
deferRender: true,
scroller: true,
scrollCollapse: true,
language: {
search: "<%= t('app.bouton.filter') %>",
infoEmpty: "<%= t('app.datetables.sZeroRecords') %>"
}
});
Any ideas on how to avoid that limit and continue using Datatable?
I've already tried this but still the same:
https://www.gyrocode.com/articles/jquery-datatables-how-to-submit-all-pages-form-data/
Thanks!
INITIAL MESSAGE
I'm having a hard time trying to figure out why I have some missing parameters when submitting a form.
Inside the form there is a table that is dynamically populated. 10 parameters are sent for each row. The submit works fine with small data but it seems to have a limit at 1898 parameters. Some times the parameters of the first 5 or 6 rows are missing and some times are the parameters of the last rows. This is totally random. But the limit seems to be always the same: no more than 1898 parameters are sent.
I get no error at all. The parameters are just not sent. This is happening in production server as well than in development server. The servers are different and the OS is different as well.
Rails version is 2.3.18. Ruby version is 1.8.7.
Does anyone have any idea of what's going on?
Thanks in advance for your help!
#1 EDIT
Following the advice of Oshanz I have found passenger's config file. In my case:
$>/home/alberto/.rvm/gems/ree-1.8.7-2012.02#dev/gems/passenger-4.0.37/resources/templates/standalone/config.erb
In the file there is a parameter "client_max_body_size" inside the http{}. It has a default value of 1048m. Even if this seems big enough I have changed it to 2048m.
Unfortunately this didn't work and the result is still the same.
#2 EDIT
So I'm still having the problem.
As I commented below I'm using a form_remote_tag with a dynamically populated table inside. This will submit using XMLHttpRequest in the background instead of the regular reloading POST arrangement.
This generates:
<form action="/wizi_comm/stats" method="post" onsubmit="Element.hide('err');Element.show('spinner');; new Ajax.Request('/wizi_comm/stats', {asynchronous:true, evalScripts:true, onComplete:function(request){Element.hide('spinner');Element.show('mainBd');}, parameters:Form.serialize(this)}); return false;">
I have also tested using form_tag and the result is the same. Some parameters are just not sent.
<form action="stats" method="post">
I have check passenger's config files with no luck. I do really need some ideas here:
Do you think this is due to a configuration somewhere?
Do you think I should change the way I'm submitting the form?
Thanks in advance for your help!
SOLUTION
I did some tests with Datatable's based solutions as rows().data(). I was still missing some rows. I was also getting some errors from the API.
At this point I think that other JS libraries on the project are interfering with jQuery. I will study this when I will have the time.
What I finally did is to remove Datatable's initialisation on the table and to use a pure CSS solution to do the scroll. If someone is interested, my solution is based on this:
Pure CSS solution scroll table
table.scroll {
width: 716px; /* 140px * 5 column + 16px scrollbar width */
border-spacing: 0;
border: 2px solid black;
}
table.scroll tbody,
table.scroll thead tr { display: block; }
table.scroll tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
table.scroll tbody td,
table.scroll thead th {
width: 140px;
border-right: 1px solid black;
}
table.scroll thead th:last-child {
width: 156px; /* 140px + 16px scrollbar width */
}
table.scroll thead tr th {
height: 30px;
line-height: 30px;
/*text-align: left;*/
}
table.scroll tbody { border-top: 2px solid black; }
table.scroll tbody td:last-child, thead th:last-child {
border-right: none !important;
}
Thanks again for your help !
In this guide that I was attempting to follow, validation messages show up to the right and are red. Mine appear dull and to the left, as in the picture below.
I have read and reread the guide I linked to, but I can't see any major difference between his code and mine. Why do my Label and TextBox show up in the order I created them, while my validation messages show up in between?
Here is (what I believe to be) the relevant part of my model
[Required(ErrorMessage = "Required")]
[Display(Name="IP Address")]
public string address { get; set; }
[Required(ErrorMessage = "Required")]
[Display(Name = "TCP Port")]
public int port { get; set; }
and the corresponding part of my View.
<p>
#Html.LabelFor(c => c.address):
#Html.TextBoxFor(c => c.address)
#Html.ValidationMessageFor(c => c.address)
</p>
<p>
#Html.LabelFor(c => c.port):
#Html.TextBoxFor(c => c.port)
#Html.ValidationMessageFor(c => c.port)
</p>
I realize that typical validation on items like these would be more robust. For now, my only concern is that they did not leave the field blank.
Have you tried adding this to your main css file?
.input-validation-error
{
border: 1px solid #ff0000;
background-color: #ffeeee;
}
.field-validation-error {
background-color:white;
border-radius:4px;
border: solid 1px #333;
display: block;
position: absolute;
top:0; right:0; left:0;
text-align:right;
}
I was having a similar issue. The validation message for my first input box was right aligned while all the rest were left aligned. Updating my style sheet with the code below fixed the problem.
.field-validation-error {
display: block;
text-align:right;
}
The Input boxes were somehow given the property float: right. The validation messages, by default, float left. By removing the float property of the Inputs, the validation messages are now showing up to the right of the Inputs.
Furthermore, by pressing F12 in the browser while the project is running, one can view the styles being applied to elements. Additionally, one can just right-click the element and "inspect element". I at least confirmed that alternative in Chrome and IE10.
Hopefully that trick will help someone else avoid looking at MVC for problems caused by a ninja CSS.
I found this wonderfull tooltip called qTip2. Loving it so far but has gotten myself into a problem using it.
I was able to install and get qTip2 running with my Rails 3.1 setup. However I'm running into a problem when I'm using qTip2's ajax functionality.
qTip2 ajax request requires a link to the script to be executed before displaying it in the tooltip content div (which is automatically generated by qTip2). You can look at the code I'm referring to here.
http://www.craigsworks.com/projects/qtip2/demos/#ajax
The problem with it is that it does not really go well with RoR. An ajax request declared using RoR is more explicit, where I can explicitly tell rails which div id I would like to update.
Given the following circumstances I needed to do the following things:
the tooltip content must be dynamic
I needed to use the qTip2 ajax functionality so that I could create a custom layout for the tooltip content.
I did try the followings though:
Put the html snippet to be loaded to the content div in the public folder. The content loaded with the right format but I can't have dynamic content. html.erb files didn't seem to work in this folder. Is there any alternative to this folder that would work but with dynamic content?
Tried to use qTip2 ajax request with RoR but was not successful. What I did was I tried to explicitly define the ajax update id in the .js respond file (going through the controller and views etc.). But figuring out the exact id that was generated by qTip2 plugin was a little too overwhelming for me.
here is what I have
html
<a id="editor1" href="/deals_details.html.erb">
javascript
$(document).ready(function()
{
$('#editor1').each(function()
{
$(this).qtip(
{
content: {
text: '<img class="throbber" src="/assets/throbber.gif" alt="Loading..." />',
ajax: {
/*once: false*/
url: $(this).attr('href')
},
title: {
text: 'qTip2 Test',
button: true
}
},
position: {
at: 'center',
my: 'center',
viewport: $(window),
},
show: {
event: 'click',
solo: true
},
hide: 'unfocus',
style: {
classes: 'ui-tooltip-wiki ui-tooltip-light ui-tooltip-shadow'
}
})
})
// Make sure it doesn't follow the link when we click it
.click(function(event) { event.preventDefault(); });
});
CSS
.ui-tooltip-wiki{
max-width: 440px;
}
.ui-tooltip-wiki .ui-tooltip-content{
padding: 10px;
line-height: 12.5px;
}
.ui-tooltip-wiki h1{
margin: 0 0 7px;
font-size: 1.5em;
line-height: 1em;
}
.ui-tooltip-wiki img{ padding: 0 10px 0 0; }
.ui-tooltip-wiki p{ margin-bottom: 9px; }
.ui-tooltip-wiki .note{ margin-bottom: 0; font-style: italic; color: #888; }
Please help me!! :) Apology if this post looks stupid, this is my first question on stackoverflow.
I think you're making it too complicated. The qTip ajax functionality simply requests a URL, and the return value is HTML content within a div tag. If you look at the source of the demo you mentioned, you'll see a request for http://www.craigsworks.com/projects/qtip2/data/burrowingowl.php. If you look at what that produces, it is simply a div tag with some content (the style looks different because it is further transformed by the page's CSS).
So the question becomes: can you provide your dynamic content in a div in response to a URL in Rails? Of course! Perhaps you want to set up a SnippetController with a show action and then using pretty standard Rails conventions/routes your URL might be /snippet/show/[ID] and you simply have the view produce the required div content.
I am using share.php on my sites, and I am trying to post this link: http://www.obeczubri.cz/index.php?page=2&aktualita=25
I am also trying to send title:
<a href='http://www.facebook.com/sharer.php?u=http://www.obeczubri.cz/index.php?page=".$_GET['page']."aktualita=".$radek[id]."&t=".$radek[titulek]."' target='_blank' style='text-decoration: none; color: grey;'><img src='admin/images/ikony/facebook_ikona.png' style='width: 15px; vertical-align: middle;'> <small>Sdílet na facebooku</small></a>
On mouse hover all looks ok as it should be but after it is on Facebook the link is incomplete. There in only part of it:
Obec Zubří - Aktuality
http://www.obeczubri.cz/index.php?page=2
There is missing part of the URL after my first &, and the title is also not corresponding.