is there a way to change the CSS style of only the First argument "Add To Cart" ?
example changing font or color of the Text?
#Ajax.ActionLink( "Add To Cart", "addToCart", "Product", new { idProduct = #item.idProduct, quantity = 1 }, new AjaxOptions { HttpMethod = "POST", }, new { #class = "item-add-btn" } )
Perhaps using pseudo-class in css, first-of-type or first-child. see example
li:first-of-type {
background-color: yellow;
}
li:first-child {
background-color: yellow;
}
CSS3 :first-of-type Selector
Related
I am using react grid and I would like to set the hover color and rowSelectedColor for each row differently, When I tried overwriting the hover background color it applies to every row not each row.
example - https://plnkr.co/edit/UwszBQxteLy9vPE3
I tried using rowClassRule for achieving the functionality but it did not worked, I am expecting row should have there own unique hover color and selected background color based on some condition ex: age>10 then hover-color: Red
Your code seems working to me, you just didn't passed the correct classname to your other rules.
Here's the code edited, with one new class
// main.js
const gridOptions = {
rowData: getData(),
columnDefs: [
{ headerName: 'Employee', field: 'employee' },
{ headerName: 'Number Sick Days', field: 'sickDays', editable: true },
],
rowClassRules: {
// row style function
'warning': (params) => {
var numSickDays = params.data.sickDays;
return numSickDays > 1 && numSickDays <= 5;
},
// row style expression
'breach': 'data.sickDays >= 5',
'new': 'data.sickDays >= 7'
},
};
For the style you don't need to put !important to override, try to understand why the style you want does not apply before using !important
// styles.css
.warning {
background-color: sandybrown;
}
.warning:hover {
background-color: purple;
}
// you set the class to 'blue' but the class did not exists in your style, so I set it to 'breach' because that's a class you had
.breach {
background-color: lightcoral;
}
.breach:hover {
background-color: black;
color: white;
}
.new {
background-color: greenyellow;
}
The edited and working sandbox : https://plnkr.co/edit/CijuUinXkVUJkRFG
I had done one quiz application, But i want to add some animations
like fadein/fade-out, when click the prev/next button. Can any one
help me do the same. something need to change the css something need to change the CSS something need to change the css something need to change the css?
* {}
body {}
.question {
width: 70%;
margin: 0 auto;
height: auto;
display: block;
background: #eeeeee;
}
.question h1 {
text-align: center;
padding-top: 30px;
color: #666666;
}
.question h2 {
width: 100%;
font-size: 22px;
color: #0c1e5c;
padding: 1% 3% 0% 3%;
}
.question ul:nth-child(odd) {
background: #d0dff6;
width: 30%;
padding: 8px;
margin: 1% 9%;
display: inline-block;
color: #0c1e5c;
}
.question ul:nth-child(even) {
background: #d0dff6;
width: 30%;
padding: 8px;
margin: 1% 9%;
display: inline-block;
color: #0c1e5c;
}
.button {
text-align: center;
margin: 1% 0;
}
.btn {
background: #8bf8a7;
padding: 5px;
}
<html ng-app="quiz">
<head>
<meta charset="utf-8">
<title>Basic Quiz</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body ng-controller="quizCtrl">
<div class="question">
<h1>QUIZ APPLICATION</h1>
<h2>{{questions.question}}</h2>
<ul ng-repeat="option in questions.options">
<li style="list-style:none">
<input type="{{buttonType}}">{{option.text}}</li>
</ul>
</div>
<div class="button">
<input type="button" value="previous" class="btn" ng-show="isPrevious" ng-click="previousQuestion()">
<input type="button" value="next" class="btn" ng-show="isNext" ng-click="nextQuestion()">
</div>
</body>
<script>
var app = angular.module("quiz", [])
app.controller("quizCtrl", function($scope) {
$scope.data = [{
question: "1)Which of the following selector matches a element based on its id?",
type: "single",
options: [{
text: "The Id Selector"
},
{
text: "The Universal Selector"
},
{
text: "The Descendant Selector"
},
{
text: "The Class Selector"
}
]
},
{
question: "2)Which of the following defines a measurement as a percentage relative to another value, typically an enclosing element?",
type: "multiple",
options: [{
text: "%"
},
{
text: "cm"
},
{
text: "percentage"
},
{
text: "ex"
}
]
},
{
question: "3)Which of the following property is used to set the background color of an element?",
type: "single",
options: [{
text: "background-color"
},
{
text: "background-image"
},
{
text: "background-repeat"
},
{
text: "background-position"
}
]
},
{
question: "4)Which of the following is a true about CSS style overriding?",
type: "multiple",
options: [{
text: "Any inline style sheet takes highest priority. So, it will override any rule defined in tags or rules defined in any external style sheet file."
},
{
text: "Any rule defined in tags will override rules defined in any external style sheet file."
},
{
text: "Any rule defined in external style sheet file takes lowest priority, and rules defined in this file will be applied only when above two rules are not applicable."
}
]
}
];
$scope.index = 0;
$scope.questions = $scope.data[$scope.index];
$scope.buttonType = $scope.questions.type == 'single' ? 'radio' : 'checkbox';
$scope.isPrevious = false;
$scope.isNext = true;
$scope.nextQuestion = function() {
if ($scope.index < 3) {
$scope.index = $scope.index + 1;
$scope.questions = $scope.data[$scope.index];
$scope.buttonType = $scope.questions.type == 'single' ? 'radio' : 'checkbox';
$scope.isPrevious = true;
if ($scope.index == 3) {
$scope.isNext = false;
}
} else {
// disble next botton logic
$scope.isNext = false;
}
}
$scope.previousQuestion = function() {
if ($scope.index > 0) {
$scope.index = $scope.index - 1;
$scope.questions = $scope.data[$scope.index];
$scope.buttonType = $scope.questions.type == 'single' ? 'radio' : 'checkbox';
$scope.isNext = true;
if ($scope.index == 0) {
$scope.isPrevious = false;
}
} else {
// disble next botton logic
$scope.isPrevious = false;
}
}
});
</script>
</html>
Check out ng-animate, basically what it does is it adds classes that you can style accordingly on showing dom and on hiding dom, like this:
/* The starting CSS styles for the enter animation */
.fade.ng-enter {
transition:0.5s linear all;
opacity:0;
}
/* The finishing CSS styles for the enter animation */
.fade.ng-enter.ng-enter-active {
opacity:1;
}
And to use that functionality you would have to use ng-repeat in your html, something like this:
<div ng-repeat="item in data" ng-if="index === $index">
//Your question html here
</div>
Where data and index are $scope.data and $scope.index.
That would be the angular way of doing things.
However I see that you are using the same div, only changing scope data, that would require you to set
transition: 1s all ease;
On the question class, and then to do something like this in javascript:
angular.element('.question').css('opacity', 0);
$timeout(function() {
// change question..
angular.element('.question').css('opacity', 1);
}, 1000);
In my application the user must select Product Categories from a DropDownList. So what I want to do is, if he doesen't select a category and tries to send his order, the DropDownList should be highlighted so he sees, that he has to select a category. My problem now is, not one the attempts I tried to style this DropDownList, did work yet. So I hope you can help me out or tell me where the problem is:
CSS-File:
.field-validation-error {color: #ffb3b3;}
.field-validation-valid {display: none;}
.input-validation-error {border: 1px solid #f00; background-color: #ffb3b3;}
.select.input-validation-valid { display: none;}
.select.input-validation-error { color: #ffb3b3; }
.validation-summary-error {font-weight: bold; color: #ffb3b3;}
.validation-summary-valid {display: none}
DropdownListFor in the view:
#if (Request.Form["SendOrder"] != null && String.IsNullOrEmpty(ProductCategory))
{
#Html.DropDownListFor(m => m.PC,
new SelectList(Model.ProductCategory.OrderBy(m => m.PCNumber),
"", "CategoryName",
new {#class = "field-validation-error, input-validation-error,
select.input-validation-error" }), "Select a Category")
}
else
{
#Html.DropDownListFor(m => m.PC,
new SelectList(Model.ProductCategory.OrderBy(m => m.PCNumber),
"", "CategoryName"), "Select a category")
}
For anyone interested in this, the problem is solved and the solution can be found here
I have this CSS class:
.relationshipsTree
{
display: inline;
font-size: 10pt;
text-decoration: none;
/*cursor: hand;*/
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
filter: none;
font-weight: bold;
color: green;
background-color: transparent;
}
And I want to use it on the parent nodes of this Kendo Tree View:
<div id="relationshipsTree"></div>
How do I go about doing this?
EDIT -
This is the .js file I'm using to create the tree. I added:
$('#relationshipsTree').parent().addClass('relationshipsTree');
Based on an answer here, however, it is still not working.
Whole file:
function CreateRelationshipsTree()
{
var primaryContactId = 671;
var personOrCompany = 'C';
var rootMemberId = 0;
var data = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: "../api/relationships?primaryContactId=" + primaryContactId + "&personOrCompany=" + personOrCompany + "&rootMemberId=" + rootMemberId,
contentType: "application/json"
}
},
schema: {
model: {
hasChildren: "hasChildren",
children: "Items"
}
}
});
$("#relationshipsTree").kendoTreeView({
dataSource: data,
loadOnDemand: true,
dataUrlField: "LinksTo",
dataTextField: ["Name", "Name"],
select: treeviewSelect
});
function treeviewSelect(e) {
var node = this.dataItem(e.node);
window.open(node.NotificationLink, "_self");
}
$('#relationshipsTree').parent().addClass('relationshipsTree');
}
function RefreshProjectTree() {
var treeView = $("#relationshipsTree").data("kendoTreeView");
treeView.dataSource.read();
}
Updated
I found that I have misunderstood your question. I think you want to select the DOM parent element while you want to select the parent node in the tree view. This is my updated answer.
Midify your handler a bit:
function treeviewSelect(e) {
$('#relationshipsTree div').removeClass('relationshipsTree');
$(e.node).parents('li').first().children('div').addClass('relationshipsTree');
var node = this.dataItem(e.node);
window.open(node.NotificationLink, "_self");
}
A demo updated here
YOu can use jquery to target the parent of an element.
$('#youselector').parent().css({
display:'inline',
font-size:'10pt',
text-decoration:'none',
overflow:'hidden',
overflow-x:'hidden',
overflow-y:'hidden',
filter:'none',
font-weight:'bold',
color:'green',
background-color:'transparent',
});
I have a datepicker that has a special highlight using beforeShowDay. However, the highlight style prevents the selected ("ui-btn-active") style, which is automatically applied when a cell is clicked. What is the best approach to get the selected style on top?
<div id="datepicker"></div>
.Highlighted a{
background: none !important;
background-color: #990066 !important;
}
$('#datepicker').datepicker({
beforeShowDay: function (date) {
return [true, SelectedDates[date] ? 'Highlighted' : ''];
}
});
Adding this has no effect:
.Highlighted ui-btn-active a{
background: none !important;
background-color: white !important;
}
On your beforeShowDay code add the ui-btn-active class to the selected elements after adding them Highlighted class.
Remember elements can have multiple classes.
beforeShowDay: function (date) {
var selected = $("#datepicker").datepicker('getDate');
if (date.getDate() != selected.getDate()) return [true, SelectedDates[date] ? 'Highlighted' : ''];
else return [true, '']
}