I'm having a problem and i'm really puzzled by it.
My markup is simple enough:
#foreach (var item in Model.Items)
{
<a class="mapIconUnit" id="pinDelete-#item.PinGuid.ToString()">
#Url.Action("DeletePin") <!-- testing purposes -->
#(Ajax.ActionLink("x", "DeletePin", MapAdministrationController.Routes.DeletePin(item.PinGuid), new AjaxOptions()
{
OnSuccess = "onMapPinDeleted",
Confirm = Resources.Resource.msg_GenericDeleteConfirmationQuestion
}
))
</a>
}
Now what i would expect to render from this is:
<a class="mapIconUnit" id="...">
... rendered url
<a href="..." etc>x</a>
</a>
But what i am getting is:
<a class="mapIconUnit" id="...">
... rendered url
</a>
<a href="..." etc>x</a>
What am i doing wrong here? The markup is too simple for it to be wrong to cause such a thing?
It's illegal to nest an anchor element inside another anchor element, more info can be found in the W3C specs: http://www.w3.org/TR/html401/struct/links.html#h-12.2.2
Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.
So either razor or the webbrowser renders the elements correctly (i.e. place them next to each other).
Related
how to access img tag inside a href tag to set focus to <img> tag?
eg:
<a href ='#' ><img class="img1" src="abc.png"/> </a>
The a .img1:focus {} didn't work. Not able to access <img> inside an <a href></a> tag
If I add class to tag, I can add focus to tag but tag & tag are of diff size & causing issue. eg: , then a .test:focus{} is working, But I need focus for tag
You need a space between a and .img1 ( the way you wrote it means "a tag with img1 class" ) this way :
a .img1:focus {}
This means "element with img1 class inside a tag"
EDIT : in the link #jdv provided in the comments of your initial answer, don't focus (pun unintended) on the accepted answer, but on the second one. You can fix your problem by adding a tabindex property to your img tag.
Like this :
<a href ='#' ><img class="img1" src="abc.png" tabindex="0"/> </a>
try out this code
<a href ='#' id='link'><img class="img1" src="abc.png"/> </a>
a#link .img1:focus{}
focus is often associated with form elements like input field I advise you use hover like this instead
a img:hover{
width: 500px;
}
<a><img class="img1" src="http://via.placeholder.com/350x150"/></a>
I have the following code right now to write a flat list of items with a link to a controller action:
<ul>
#foreach (var item in items)
{
<li>
<a asp-controller="Home" asp-action="Demo" asp-route-itemName="#item.Name">
#item.Name
</a>
</li>
}
</ul>
Now this must become recursive. Items can also contain subitems. For recursion I need some sort of function. I know I could use #functions and define the function in the .cshtml file. Not sure whether such nice inline HTML code with tag helpers would still be allowed there, it didn't seem so. Another option is HTML helpers in a .cs file, no inline HTML here for sure. #helper doesn't seem to be available anymore.
What other options do I have to define a function and keep the inline HTML syntax that Razor offers?
Put the code for rendering a comment inside a partial view, and render it with a call to #Html.Partial("comment", comment).
Then within that comment partial view you'd have something like
#model Comment
Title: #Model.Title
Message: #Model.Message
#if (Model.ChildComments.Any())
{
<ul>
#foreach (var childComment in Model.ChildComments)
{
<li>
#Html.Partial("comment", childComment)
</li>
}
</ul>
}
This will render each comment, plus all its children (if any), recursively.
I am trying to use the following code to extract the inner html of menu items but it only picks up the text that is in the same line for some reason. Here is the code:
WebElement ReportStart=driver.findElement(By.xpath("//a[contains(text(),'Reports')]"));
List<WebElement> reports= ReportStart.findElements(By.xpath("//*[starts-with(#id, 'menu_')]"));
System.out.println(reports.size());
for (int i = 0; i < reports.size(); i++) {
System.out.println(reports.get(i).getAttribute("id"));
System.out.println(reports.get(i).getText());
}
It picks up all the id's but only the inner text of some of them and not nested one. So it picks up text Reports and id menu_1035 and menu_1036 but not the text General as it is not on the same line. Not sure why this is that findelements does not pick the whole web element
<li>
<a id="menu_1035" class="dynmenu" href="#">Reports</a>
<ul>
<li>
<a id="menu_1036" href="#">
General
<span class="dwn"/>
</a>
<ul>
</li>
Its not picking the text General as it is inner-html of li tag not a tag.
Your xpath only fetches element which has id - //*[starts-with(#id, 'menu_')]
If you want to get General text also, then you need to update your xpath' that points only tillli` element.
Hope it helps.
Hi all having a few problems with my CSS
I am trying to highlight a link on the navigation based on the page the user is on.
I have this style which works as I would like it to do, but when I pass a query-string into pcisHPprofile.aspx the CSS is not working. Does anyone know how i can get this style to work with query-strings?
body form[action="pcisHPprofile.aspx"] #btnuser
{
padding: 18px 4px 5px 4px;
background-image: url(../images/tabbluleft.gif) ;
background-repeat:no-repeat;
color: #fff;
}
<div id="nav" class="nav" >
<ul>
<li id="tab1">
<a id="btnsession" href="pcissessionlist.aspx" > <span >Session</span></a>
</li>
<li id="tab2">
<a id="btnsystem" href="pcissystemsettings.aspx" > <span >System Settings</span></a>
</li>
<li id="tab3">
</li>
<li id="tab4">
<a id="btnuser" href="pcisuserlist.aspx" > <span >User Logins</span></a>
</li>
<li id="tab5">
<a id="btninterpreter" href="pcisinterpreterlist.aspx" > <span >Interpreter Profile</span></a>
</li>
<li id="tab6"><asp:LinkButton ID="btnreports" runat="server" Visible="false" cssid="cssreports" PostBackUrl="#"><span>Reports</span></asp:LinkButton></li>
</ul>
</div>
I assume that the #btnuser ARE some buttonS inside the some forms, where one of the forms have action="pcisHPprofile.aspx"?
If that is correct, then your error is the fact that you have many buttons with the same id attirbute id="btnuser". The ID attibute MUST be uniqe on the page. change the id="btnuser" to class="btnuser" on the buttons and your selector from:
body form[action="pcisHPprofile.aspx"] #btnuser {
}
to
body form[action="pcisHPprofile.aspx"] .btnuser {
}
Then it should work.
In the first form it might work only if the FIRST button with id="btnuser" is actually inside the form with action="pcisHPprofile.aspx". If it is inside any other form, then it will not work.
Best regards,
SWilk
UPDATE:
After OP updated the question, I think that this form of selector should work:
body form[action^="pcisHPprofile.aspx"] #btnuser {
...
}
It would a element with id=btnuser inside a form, which action begins with "pcisHPprofile.aspx". It would not matter if the acutal action attibute contain only "pcisHPprofile.aspx" or "pcisHPprofile.aspx?any-parameters&and=some-values".
Best regards,
SWilk
Using action attribute for styling is a bad practice. Just give your form a name, class or ID like <form class="pcisHPprofile" action="pcisHPprofile.aspx"> and then apply CSS style to that name/class/id.
form.pcisHPprofile {
padding: ...
Found a working solution. a little hacky which I am not 100% keen on but it works.
I changed the query string to look like this
profile.aspx?-&username=
from this
profile.aspx?username=
and I changed the style to
Form[action|="pcisinterpreterprofile.aspx?"] #tab5
{
background-image: url(../images/tabbluright.gif);
background-repeat:no-repeat;
}
The difference is that I have changed the = to an |=.
[att|=val]
Represents an element with the att attribute, its value either being
exactly "val" or beginning with "val"
immediately followed by "-" (U+002D).
This is primarily intended to allow
language subcode matches (e.g., the
hreflang attribute on the a element in
HTML) as described in RFC 3066
([RFC3066]) or its successor. For lang
(or xml:lang) language subcode
matching, please see the :lang
pseudo-class.
by doing this the css selector works on pages with query strings. you just need to make sure the query string has at least ?- at the start. As I said at the last its not great but works.
using xpath or css : How to get something which is selected on page using following html code.
in following code, Element1 is selected on page and I wanted to find name of element that is selected on page.
<div id="idc" class="tre">
<ul id="idCatT_srt_ul" class="abc">
<li class="treN treB treSelected" title="Element1 title">
<span class="spclass">Element1</span>
</li>
</ul>
</div>
Guessing that you're looking for the <li> that contains selected you can do that with Xpath or CSS selectors like this:
XPath: (if I remember right...)
//*[contains(#class,"selected")]
CSS Selectors:
.treSelected