If i use below , button display bigger.
<i class="icon-plus"></i>Add
If i use below , button display smaller than above code.
#Html.ActionLink("Add", "xx", "Law", new { _lawfileid = -1, baseappid = ((ObjectModelLibrary.Law)ViewData["currentLaw"]).LawID }, new { #class = "btn btn-primary icon-plus" })
How can i change Html.Actionlink like a href i ?
What is difference between actionlink and href or how can i set same size for both ?
The reason for your issue is that in the first line of code you have an element inside another element. Whereas in the second line of code you have a single element with extra class.
Similar question is already answered on stackoverflow. Please find the link below
Create an ActionLink with HTML elements in the link text
Since you need to build an element inside an element use #Url.Action as mentioned in the above link.
Related
I'm a very basic coding person that needs something to work, but IDK how. I have a website where I have 4 images. When you hover over those img they become slightly darker, but I wish there was a way to show some text as well (preview of how it should work: https://imgur.com/a/r5cOW2R)
Here's the link to my GitHub code: https://github.com/Ezzol/HCI-Portfolio
Can anyone explain to me what I need to do to add that hovereffect you can see in my design at the imgur link?
You would want to use the CSS hover event. Here's a good example on how to do that.
https://www.w3schools.com/howto/howto_css_image_overlay.asp
you probably need to use javascript as well, and do an EventListener to tell when it is being hovered over, and then use .style to change it, for example:
var text = document.getElementById("text");
var exampleimg = document.getElementById("exampleimg");
exampleimg.addEventListener("mouseover", examplechange);
exampleimg.addEventListener("mouseout", examplechangeback);
function examplechange(event)
{
text.style.display = "block";
}
function examplechangeback()
{
text.style.display = "none";
}
add a h1/h2/h3/p element to your page, and give it the id "text" then style it how you want and set the display to none.
My question is basically how can I have a child style event affect the parent. Right now I'm using event target to change the style of a table cell I'm hovering over, but whenever I hover over a child with text in it the child changes but the parent does not which doesn't look very good. Here's my code.
hoverBackground = (e) => {
if (e.target.classList.contains(this.state.calendarNavi) || e.target.classList.contains(this.state.calendarNaviEmpty)) {
e.target.style.background = 'darkgrey'
} else {
e.target.style.background = "#b1a18b"
e.target.style.color = "white"
}
}
I've looked for answers for a while but I couldn't find one most people are trying to prevent the child from effecting the parent, but I'm having the opposite problem. I want the child to change the style of the parent and vise versa.
Here's the table data, I'm using Material Design Bootstrap for basic layouts:
<td key={d} day={`${d}`} dayName={`${currentWeekDay}`} month={`${this.month()}`} onMouseEnter={this.hoverBackground} onMouseLeave={this.hoverBackgroundExit} className={`calendar-day ${currentDay} ${currentWeek} railway`} style={currentStyle}>
<MDBContainer>
<MDBRow>
<MDBCol>
{d}
</MDBCol>
</MDBRow>
</MDBContainer>
</td>
P.S. Sorry for the messy looking code, I still have to clean this component up a bit. Also I'm open to better ways of handling this hover event if anyone has suggestions.
I rubber ducked! The problem was using event.target vs using event.currentTarget
Within a series of check boxes (lets say 3 options) I am looking to target a specific input element on the checking/unchecking of the associated label.
HAML
.choice-select-button
= check_box_tag("order[recipes][]", recipe.id, selected)
= label_tag do
= t(".step_4.tick_box_to_select")
Renders HTML
<div class="choice-select-button">
<input type="checkbox" name="order[recipes][]" id="order_recipes_" value="6" checked="checked">
<label>Click to select</label>
</div>
Each <input> is assigned same id, namely id="order_recipes_" so if I give set <label for="order_recipes_"> and the user then 'un-checks' the label then only the first input on the page with the id="order_recipes_" is styled according to my css instructions.
The only differentiator I can see for the choice-select-button.input is it's value. As such I was looking at giving the label a for= that targets inputs with the id="order_recipes_ AND value="6". First up, is this doable, and secondly, is the best way to do something like this or is there a much more simple method?
Thanks in advance.
According to the rrails doc:
check_box_tag(name, value = "1", checked = false, options = {}) Link
Creates a check box form input tag.
Options
:disabled - If set to true, the user will not be able to use this
input.
Any other key creates standard HTML options for the tag.
you can generate different ids like this:
check_box_tag("order[recipes][]", recipe.id, selected, {id: recipe.id})
I've been tryin to find an example of the syntax for getting an html 'title' for a string when using Html.Encode(). I want to display the full name in the mouseover title, if it's too long.
Is there a way to do this without wrapping the string in a < span >, i.e.
<span title = "<%=Html.Encode(model.Name) %>"> //displays the full name on mouseover
<%=Html.Encode(model.Name.Substring(0, 10))%>... //displays the name up to a max length
</span>
Or should I just do it this way?
Thanks!
Without a containing element, where are you going to hang your title?
So, yes, you should wrap it in an inline element like span
Here is a portion of my code:
var styles:String = ".keyword{color: #ff0000;} .comment{color: #00ff00;}";
var myStyleSheet:StyleSheet = new StyleSheet();
myStyleSheet.parseCSS(styles);
myTextArea.htmlText = '<span class = "keyword"> red </span> uncolored <span class = "comment"> green text</span>';
Everything is fine till this point, i can edit my text, of course everything is showed in black, and the html-tags are ignored. But when I put this code in myTextArea.styleSheet = myStyleSheet;
my text will be colored as i want it to be, but the textArea will become uneditable (no blinking pointer, no reaction on keyboard press).
After each keyboard-press (or if the time between two key-presses is bigger than x milliseconds ) i will re-render the textArea.text and append the <span class = "keyword"> where needed </span> tags and put it into the textArea.htmlText, but can't seem to figure it out how to do it when style is applied.
Sadly enough css and text input are incompatible. The only workaround is to use TextFormat instead. Sorry for being disappointing...