I don't know how to express the CSS code below using elm-css.
input[name="tab_item"] {
display: none;
}
<div>
<input type="radio" name="tab_item">
<label>hoge hoge</label>
</div>
Related
i want to check value in input if has any value in input i want to add class sh-is-active to a div using VUE but i don't know how... please help me
<template>
<div class="sh-wrap sh-wrap-input sh-is-active">
<label class="sh-label">First and Last Name</label>
<input type="text" class="sh-form-control sh-input" placeholder="First and Last Name" />
<span for="email" class="error">Required</span>
</div>
</template>
You can use v-model bind a value to the input and to dynamically add the classes :class="{ 'sh-is-active': name }". Read the official docs on how to bind classes and styles
new Vue({
el: '#example',
data() {
return {
name: null
}
}
})
.sh-wrap-input {
padding: 1rem;
border: 1px solid gray;
}
.sh-is-active {
background: yellow;
}
.sh-label {
display: block;
margin-bottom: .125rem;
}
.error {
display: block;
color: red;
font-size: 12px;
margin-top: .125rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="example" class="sh-wrap sh-wrap-input" :class="{ 'sh-is-active': name }">
<label class="sh-label">First and Last Name</label>
<input v-model="name" type="text" class="sh-form-control sh-input" placeholder="First and Last Name" />
<span v-if="!name" for="email" class="error">Required</span>
</div>
to check if value exists you can add :value="inputValue"
and watch for it using
watch: {inputValue: function(value){
"add your class here"
}}
Please look the below image
I have two users and their allowed channels.
My issue is :
When I click one channel of a user, the same channel is also get checked of other user. For example:
When I click Commissions of user Deepu, the channel Commissions of user Midhun also get checked.
I have to avoid that, the clicked channel of the user should only selected, not other user's.
I tried this
<v-data-table
:headers="headers"
:items="UserChannels"
:loading="datatableloading"
class="elevation-1"
>
<template v-slot:items="props">
<td class="text-xs-left">{{ props.item.username }}</td>
<td class="text-xs-left">
<ul class="channel-listitems">
<li v-for="item in Channels">
<input type="checkbox" class="channel-checkbox" :value="item.id" v-model="checkedChannels">
{{ item.channel_name }}
</li>
</ul>
<br>
<span>Checked names: {{ checkedChannels }}</span>
</td>
</template>
</v-data-table>
I am using Vue.js for doing this.
You can create mapping dict for each user Channels selection.
Please refer following codepen - https://codepen.io/Pratik__007/pen/oNgaXeJ?editors=1010
In data
checkedChannels:{},
Created
created () {
console.log(this.Channels)
let vm = this;
this.Users.map(function(item){
vm.$set(vm.checkedChannels,item['name'],[])
return item;
})
},
The official Vue docs states, you can use v-model on multiple checkboxes using the same array. ( Docs : https://v2.vuejs.org/v2/guide/forms.html#Checkbox )
Also working example : https://codesandbox.io/s/hungry-kepler-t7mkw
Select elements for array with checkboxes and v-model
<template>
<div id="app">
<!-- First, iterate over all users -->
<div v-for="(user, index) in users" class="user">
<p class="name">{{ user.username }} - Checked Channels {{user.channels}}</p>
<!-- Create checkbox for each available channel, and v-model it to user.channels -->
<div class="channel">
<label v-for="(channel, index) in availableChannels">
{{channel}}
<input type="checkbox" v-bind:value="channel" v-model="user.channels">
</label>
</div>
</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
users: [
{
username: "User1",
channels: ["channel1", "channel2"]
},
{
username: "User2",
channels: ["channel3"]
}
],
availableChannels: [
"channel1",
"channel2",
"channel3",
"channel4",
"channel5"
]
};
}
};
</script>
<style>
.user {
min-height: 100px;
display: flex;
align-items: center;
border: 1px solid black;
margin-bottom: 10px;
justify-items: center;
}
.name,
.channel {
flex: 1;
}
.channel {
min-height: 100px;
display: flex;
flex-direction: column;
}
</style>
Is it possible that the user could select from the utility dropdown (see picture below) a search option which will effect the search text field?
Or is it possible merge the dropdown and search text field together?
I think you will be able to do this leveraging input-groups. But the docs also mention:
Avoid using elements here as they cannot be fully styled in
WebKit browsers.
HTML to integrate a <select> in the navbar:
<form class="navbar-form navbar-left select-search" role="search">
<div class="input-group">
<span class="input-group-addon">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</span>
<input type="text" class="form-control">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Then apply the following CSS:
.select-search .input-group-addon {
padding: 0;
border: 0;
}
.select-search .input-group .input-group-addon > select.form-control {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
Demo: http://www.bootply.com/8zPGZ9ySOl
I found this works well in chrome, but in firefox the select arrow got some button like styling:
I'm not sure how to fix the style of the select arrow here. Style the select with -moz-appearance:none or -moz-appearance:menulist won't help. Possible related to: Clearing the background of a <select> element's pulldown button with CSS
I've written a on click function to show a simple dojo dialog, but instead it shows
NO_FAST_DRAW = false
This actually works in Nexus 4, 5 and other devices - but not in Samsung Galaxy S2.
on(dojo.byId("send_email"), "click", function()
{
console.log("emailClicked1");
dijit.registry.byId("emailDialog").show();
dojo.byId("emailsText").value="";
dojo.byId("dialogFlag").value="emailDialog";
console.log("emailClicked2");
});
I can see the console email Clicked1 and 2 but not able to see the dialog as well in UI.
<div id="emailDialog" data-dojo-type="dojox.mobile.SimpleDialog">
<form id="emailDialogForm">
<div id="emailDialogText">
<p class="blue_text" style="text-align: left;">To:</p>
<input id="emailsText" type="email"
style="line-height: 2em; width: 95%; margin: 3px; border: none; padding: 2px; font-size: 0.65em;"
placeholder="Enter email ID (Separate multiple IDs by ,)" />
</div>
<div class="button_grid">
<input type="submit" id="submitEmail" value="Send" /> <input
type="button" id="cancelEmail" value="Cancel" />
</div>
</form>
</div>
In the onclick function handler, "show()" action of dialog is asynchronous. So, any code that deals with the content of the dialog, needs to be done only after the show() is completed. i.e, the deferred action needs to be handled.
console.log("emailClicked1");
var def = dijit.registry.byId("emailDialog").show();
if(def) {
def.then(function(success) {
dojo.byId("emailsText").value="";
});
}
dojo.byId("dialogFlag").value="emailDialog";
console.log("emailClicked2");
I tried tweaking the CSS coding and no prevail. Things i want:
search box with border radius of 5px
enlarge the search icon with out getting it dispalced
both search box and search icon evenly placed around the div
HTML CODE:
<div class="search"
<div class="searchbox">
<form action="/search" method="get" class="search_form">
<input type="text" value="Search Blog..." class="search_text" name="q">
<input type="image" src="http://s25.postimg.org/d3fu892zz/search_button_without_text_md.png" height="20" width="20"class="button">
</form>
</div>
</div>
CSS CODE:
.search{position:fixed;
height:25px;
width:194px;
top:189px;
left:14px;
border:2px solid black;
background-color:black;
border-radius:10px;
padding-left:2px;
padding-bottom:4px;
opacity:.8;}
Notice: Your class="search" div is not closed !!
Here is the code that should work and fullfill all the three conditions of yours
<div class="search">
<div class="searchbox">
<form action="/search" method="get" class="search_form">
<input type="text" value="Search Blog..." class="search_text" name="q">
<input type="image" src="http://i42.tinypic.com/fayl43.png" class="button">
</form>
</div>
Css Code:
.search{position:absolute;
height:28px;
width:190px;
top:140px;
left:100px;
border:2px solid black;
background-color:black;
border-radius:10px;
padding-left:2px;
padding-bottom:4px;
opacity:.8;
}
form#input{
display:inline-block;
}
.searchbox{
}
.search_text{
margin-top:4px;
margin-left:5px;
border-radius:5px;
text-align:center;
}
.button{
margin-top:5px;
margin-left:2px;
position:absolute;
height:20px;
width:20px;
}
.button:hover{
-webkit-transform:scale(1.3);
-moz-transform:scale(1.3);
-o-transform:scale(1.3);
opacity: 3;
}
Working JSfiddle Demo - http://jsfiddle.net/vg8Mn/
Hope this helps :)