Not sure if this is default behavior but I'm trying to build a component in Vue and trying to add attributes like id & class but is not present in the rendered code.
Component
<template>
<input type="text" name="hello" />
</template>
Usage (named md-input)
<md-input class="hello" />
<!-- this will render too wihtout the class attr -->
<input type="text" name="hello" />
Normally, attributes are passed onto the root element of the component, as seen in this
demo.
But that can't happen when there are multiple elements in the component, and you'd see a warning in the browser's console:
[Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
at <MdInput class="hello" >
at <App>
For that scenario, you could pass on any attribute bindings to the inner input using v-bind="$attrs":
<template>
<label for="hello">My Input</label>
<input type="text" name="hello" v-bind="$attrs" />
</template>
demo 2
That's a weird behavior, what if you put a default class on the component's template?
<template>
<input type="text" name="hello" class="default" />
</template>
<md-input class="hello" />
<!-- The element should be render like this -->
<input type="text" name="default hello" />
Related
I have a editor template DisplayConfig. In DisplayConfig
#model string
<input id="#(Model)_DisplayOrder" class="DisplayTypeConfigurator" type="number" />
<input id="#(Model)" class="DisplayTypeConfigurator" type="checkbox" />
I want to call this template in my view and send string so i get different id for every textbox.
In my view
#Html.Editor("Tab_Info_Product", "DisplayConfig")
I do not want to send the value through my model.
I want the result like
<input id="Tab_Info_Product_DisplayOrder" class="DisplayTypeConfigurator" type="number" />
You should use #Html.IdForModel() to construct the ids of your <input> tags.
<input id="#Html.IdForModel()_DisplayOrder" class="DisplayTypeConfigurator" type="number" />
<input id="#Html.IdForModel()" class="DisplayTypeConfigurator" type="checkbox" />
I've been working on an example on conditional rendering from Spring in Action 4.
The code looks this way:
<sec:authorize access="hasRole('ROLE_SPITTER')">
<s:url value="/spittles" var="spittle_url" />
<sf:form modelAttribute="spittle" action="${spittle_url}">`
<sf:label path="text"><s:message code="label.spittle" text="Enter spittle:"/> </sf:label>
<sf:textarea path="text" rows="2" cols="40" />
<sf:errors path="text" />
<br/>
<div class="spitItSubmitIt">
<input type="submit" value="Spit it!" class="status-btn round-btn disabled" />
</div>
</sf:form>
</sec:authorize>
The question is what does the code attribute, namely label.spittle refers to? Does it refer to the modelAttribute from the form? Or does it mean that there should be message bundle with key label.spittle?
It means a key in a resource bundle (documentation):
<s:message code="label.spittle" text="Enter spittle:"/>
Im trynig to create a simple multiselect box but for some reason its not visible properly.
Here is my code:-
HTML
<input type="text" id="addRow" />
<input type="button" id="btn" value="Add" />
<form id="form1">
<div style="padding:20px">
<select id="chkveg" multiple="multiple"></select>
<br />
<br />
</div>
</form>
https://jsfiddle.net/04Lgnkqs/
After creating the select you should call the plugin on your select. something like this
$('#chkveg').multiselect();
Refer here
How do I add the spring security login form to an existing page?
For example, let's say I have the following test.jsp page (which is not a spring login form page):
<html>
<head>Existing Page</head>
<body>
<div id="login-form"></div>
</body>
</html>
I would like to add the login form configured in my spring-security.xml inside the login-form div.
Typically I believe people just put the form right in the page (i.e. within the div you have there.) Something like:
<form id="blah" action="/j_spring_security_check">
<input type="text" name="j_username" />
<input type="text" name="j_password" />
<input type="submit" name="submit" value="login" />
<input type="reset" name="reset" />
</form>
Then use your css to make it fit the look and feel of the rest of your application.
I have some stray text next to radio buttons in a radio button group. I tried to obtain it using xpath and watir, but I had no luck with it. Here's some sample HTML for it
<html>
<head></head>
<body>
<input type="radio" name="options" value="No">No <br />
<input type="radio" name="options" value="Yes">Yes <br />
<input type="radio" name="options" value="Maybe">Maybe <br />
</body>
</html>
I can obtain the selected radio button using xpath by
selectedRadio = browser.radio(:xpath,"//input[#checked and #name='options']")
How can I obtain say Yes, No, Maybe if the corresponding radio buttons are selected? I also tried to obtain it using Watir, but the .text method would not work on the Watir::RadioButton object which would be true since the texts are stray texts.
Thanks in advance.
That HTML given is not well-formed XML, so I think the expression will depend on how Waitr parses the input. If it thinks that the text is a child of the input elements, like this:
<input type="radio" name="options" checked="checked" value="No">No </input><br />
<input type="radio" name="options" value="Yes">Yes </input><br />
<input type="radio" name="options" value="Maybe">Maybe </input><br />
Then use this expression:
//input[#checked and #name='options']/text()
If, on the other hand, it automatically closes the input and treats the text as a sibling, like this:
<input type="radio" name="options" checked="checked" value="No"/>No <br />
<input type="radio" name="options" value="Yes"/>Yes <br />
<input type="radio" name="options" value="Maybe"/>Maybe <br />
Then use the following expression:
//input[#checked and #name='options']/following-sibling::text()[1]
My guess is that this second one is the correct one, since you already said that .text did not work.
Ask the developer to make the page more testable by putting the text associated with the radio button inside a label associated with the button via an ID value
<form>
<input type="radio" name="sex" id="male" />
<label for="male">Male</label>
<br />
<input type="radio" name="sex" id="female" />
<label for="female">Female</label>
</form>
Then you can get the ID for the selected button, and find the associated label text fairly easily.
Seriously, it's a likely a lot easier for them to do that than it is for you to have to deal with sloppy page code. It also offers them a lot more formatting options (via CSS) to have that text inside a label container. Win all around.