I am using v radio group for 3 particular options . One of them needs a v select box to select provided data. How can that be achieved using vuetify
Probably by grouping them in a div something like:
<div style="display: flex">
<!-- The <v-radio> -->
<div style="display: flex">
<input id="option1" type="radio" />
<label for="option1">Option 1</label>
</div>
<!-- The <v-select> -->
<select>
<option>Hello</option>
</select>
</div>
Related
I guess, that I'm misunderstanding something. According to this documentation, I came up with the following prototype code to replace the old classic syntax. But it doesn't work at all.
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">
<CIcon name="cil-lock-locked" />
</span>
</div>
<input type="password"
class="form-control"
placeholder="Passwort"
:isValid="false"
invalidFeedback="hdhdh"
v-model="enteredPassword" />
</div>
<!-- ---------------------------------------------- -->
<CInput value="lll">
<prepend>ppp</prepend>
<prepend-content>
dddd
</prepend-content>
<label>
dkjdjdj
</label>
</CInput>
The bottom code just displays a complete empty text box. But why?
Slots are referenced with v-slot or # prefix. Try
<CInput value="lll">
<template #prepend>ppp</template>
<template #prepend-content>
dddd
</template>
<template #label>
dkjdjdj
</template>
</CInput>
You have used unknown custom element (and html label) instead of slot.
I am testing a web application which has v-select vuejs dropdown plugin for Country field. How Can I select values in dropdown using selenium webdriver.
It has no select/div.
Below is the HTML before selecting the country from the dropwdown
<div data-v-ce984332="" id="country-fg" class="mg-t-20">
<p data-v-ce984332="" class="control has-icon has-icon-right">
<div data-v-ce984332="" dir="auto" class="dropdown v-select single searchable" name="country" aria-required="true" aria-invalid="false">
<div class="dropdown-toggle clearfix">
<input type="search" autocomplete="false" placeholder="Country" aria-label="Search for option" class="form-control" style="width: 100%;"> <button type="button" title="Clear selection" class="clear"><span aria-hidden="true">×</span></button> <i role="presentation" class="open-indicator"></i>
<div class="spinner" style="display: none;">Loading...</div>
</div>
<!---->
</div>
<span data-v-ce984332="" class="small tx-warning" style="display: none;"></span></p>
</div>
And this is the HTML after selecting the country as United States from the dropdown
<div data-v-ce984332="" id="country-fg" class="mg-t-20">
<p data-v-ce984332="" class="control has-icon has-icon-right">
<div data-v-ce984332="" dir="auto" class="dropdown v-select single searchable" name="country" aria-required="true" aria-invalid="true">
<div class="dropdown-toggle clearfix">
<span class="selected-tag">
United States
<!---->
</span>
<input type="search" autocomplete="false" aria-label="Search for option" class="form-control" style="width: auto;"> <button type="button" title="Clear selection" class="clear"><span aria-hidden="true">×</span></button> <i role="presentation" class="open-indicator"></i>
<div class="spinner" style="display: none;">Loading...</div>
</div>
<!---->
</div>
<span data-v-ce984332="" class="small tx-warning" style="display: none;"></span></p>
</div>
Please specify the language binding you are using and the things you've tried so far.
Algo in Java:
click the 'dropdown' field: driver.findElement(By.name("country")).click()
click the option: driver.findElement(By.name("country-1")).click()
These kinds of 'dropdown' fields are usually tied to another div / element.
E.g., when you click the 'dropdown' field (item 1), another dynamic div may appear containing the options in some form of tag.
Most common examples would be, <li>, <div>, <span>. You'll then have to do another click() on the option you want. (item 2)
There are even cases where the dropdown div encloses an input tag to which you can do sendKeys() or setAttribute() as well as cases where you can do a javascript click directly into one of the options.
Suggest you provide more info so we can help you better.
selenium language bindings
html snippet of the dropdown - please avoid using screenshots for snippets
html element of the options that appear when you click the dropdown
My requirement is something like this.
I have two radio buttons namely Live Paper and Normal Paper
If user select Live Paper another two html input elements(datatime-local,time) must be shown.
If the user selected the Normal Paper these two additional input elements should be hide.
How do I achieve this through vueJS.
This is my code.
<div class="row">
<div class="col">
<input type="radio" name="paper" value="">Live Papaer
<br>
Live on <input type="datetime-local" name="" value="" > Time <input type="time" name="" value="">
</div>
<div class="col">
<input type="radio" name="paper" value="">Normal Paper
</div>
</div>
Just initialize a property named selected in your data option
new Vue({
el:"#app",
data(){
return{
selected: 'live'
}
}
})
Bind this selected property to both the radio inputs. See that the value attribute of radio inputs is set to live and normal respectively
Set up v-if on the div you conditionally want to render. The v-if is only true when selected === 'live'
<div id="app">
<div class="row">
<div class="col">
<input type="radio" name="paper" v-model="selected" value="live">Live Papaer
<div v-if="selected === 'live'">
Live on <input type="datetime-local" name="" value="" > Time <input type="time" name="" value="">
</div>
</div>
<div class="col">
<input type="radio" name="paper" v-model="selected" value="normal">Normal Paper
</div>
</div>
Here is the fiddle
Reference: radio inputs
Have a look to these documentations :
VueJS Forms : Basics
Vue JS Forms : Radio buttons
Vue JS Conditional Rendering
Also, from the community, you can find a lot of resources to understand View Binding and Forms in VueJS :
Understand what's behind v-model
2-Way Binding in Vue with V-Model - Vue.js 2.0 Fundamentals
I want to identify the following element but unable to do so.
<fieldset class="ng-scope" ng-if="permissions.isEditable && (permissions.isApprover || permissions.isReviewer)">
<div class="row">
<div class="small-12 columns">
<div class="label-container">
<label>Reviewer comments <a class="tooltip-item" href="javascript:void(0);">[?]
<div class="tooltip">
<p>Contents of the comment
can be viewed by Immigration
team and employee who logged
the request.</p>
</div>
</a>
</label>
</div>
<div class="value-container">
<textarea name="Comments" class="required-on-send-back required-on-hold required-on-reject ng-pristine ng-untouched ng-valid" ng-model="requisitionRequest.request.reviewerComments" rows="4"></textarea>
</div>
</div>
</div>
</fieldset>
Note there are 3 fieldset above as well .
You can write a css selector based on the fieldset attributes like:
fieldset[ng-if*='isApprover'][ng-if*='isReviewer'][ng-if*='isEditable']
You can remove any of the [] condition block.
This xpath should help in identifying the fieldset:
//fieldset[.//textarea[#name='Comments']]
I am trying to create a search form, something like below..
http://tinypic.com/r/2py0scy/8
I am new to front end development and confused if an in-line form or a input group should be used?
The issue with inline forms is I am unable to size the input box (width) so any pointer there would also be really helpful.
Thanks!
Code Update
from home.HTML
<form class="form-inline" role="form">
<input class="form-control input-lg" type="text" placeholder="Discover">
<button type="button" class="btn btn-danger btn-lg">Go</button>
</form>
from the layouts - application.html.erb
<div class="container">
<%= yield %>
</div>
To play with the width in Bootstrap, see the grid system and the use the columns:
For instance, if you want a form on the right and the width at the 50% of the container, you can do:
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6">
This is div on the left
</div>
<div class="col-xs-12 col-md-6">
<form class="form-inline" role="form">
<input class="form-control input-lg" type="text" placeholder="Discover">
<button type="button" class="btn btn-danger btn-lg">Go</button>
</form>
</div>
</div>
</div>
The previous code, is designed to change the behavior on small devices.
You can use both depending on what you're trying to accomplish. Bootstrap is well-documented, did you read their documentation regarding forms ? http://getbootstrap.com/css/#forms
By default input items are 100% width in bootstrap (e.g. they fill the containing element they are in). For instance:
<input type="text" class="form-control" placeholder="Text input">
would result in a 100% width input field and
<style>
.smallwidth {max-width: 200px;}
</style>
<div class='smallwidth'><input type="text" class="form-control" placeholder="Text input"></div>
would result in a 200px width input field, because it is restricted by the outer div I put around it.