I m having issues in manipulating Cascading Style Sheets of this particular tag.I want an external Cascading Style Sheets to change its styling.
A bit more here....
<style>
div[u=slides] {
}
</style>
You can specify css for 'slides' container in following manner,
<div id="yourid" class="yourclass" u="slides" ...>
<style>
#yourid {
}
.yourclass {
}
</style>
Related
What I expect to happen is the h3 within the <Card> component to be styled.
I have created the styles for the h3 element within the <Card> component. The .card styles are applied but not the .card h3 styles are not.
I've searched the docs thinking this might be a scoping issue but couldn't find anything. Any ideas where I'm going wrong?
Features.astro
<ul>
{features.map(feature =>
<li>
<Card>
<h3>{feature.title}</h3>
<p>{feature.body}</p>
</Card>
</li>
)}
</ul>
Card.astro
<div class="card">
<slot />
</div>
<style>
.card {
background: red;
}
.card h3 {
background: black;
color: white;
display: inline-block;
padding: .5rem;
margin: 0;
}
</style>
<style> tags are scoped by default, this means they only apply styles to elements directly inside the file. Because your <h3> element is actually in the Features.astro file it is outside the scope of Card.astro. If you want to style <h3> from inside Card.astro you would have to use the global styling
How to override class of ionic directive? I tried the code below:
<div class="card">
<ion-item class="item item-avatar item-text-wrap teamA" ng-repeat="chat in chats">
<p>{{chat.message}}</p>
</ion-item>
</div>
.teamA{
border: 1px solid red !important;
background-color: #EBA32F !important;
color: black;
}
The border did change to red but its background-color didn't change.
The background didn't need anything special, that color is actually orange(ish). If you had problems with the font color, just add a class to your element and change it's color, don't forget to add the !important rule.
I tested it and it's working, check the next snippet:
angular.module('myApp', ['ionic'])
.controller('MyCtrl', function ($scope){
$scope.chats = {};
var chats = [],
chat;
for (var i = 0; i< 10; i++) {
chat = {
id: i,
message: "Chat num: " + i
};
chats.push(chat);
}
$scope.chats = chats;
console.log(chats);
});
.teamA{
border: 1px solid red !important;
background-color: #EBA32F !important;
}
.your-color {
color: white !important;
}
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Content color</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-content scrollable="true">
<div class="card">
<ion-item class="item item-avatar item-text-wrap teamA" ng-repeat="chat in chats">
<p class="your-color">{{chat.message}}</p>
</ion-item>
</div>
</ion-content>
</body>
</html>
Inspecting elements with chrome dev tools is actually a good way to learn what CSS's are beign applied to your elements. And then override those CSS.
To inspect an element Right click --> Inspect element.
To open chrome dev tools: Select the Chrome Menu at the top-right corner, then select Tools -> Developer Tools.
More info about Chrome DevTools
Cheers.
I remember having a similar problem working in Ionic...but it had to do with where my styles were defined in the project. The new class (in this case, "teamA") was conflicting with existing styles, and they were being applied at different times at emulation-time.
How I solved it:
I assume you can still access chrome debugger when running this in emulator...
We were defining different styles in different places due to a short controller folder structure...not using the standard ionic generator's location for .css.
Try selecting your items in jQuery and examining them, manually adjusting the background-color property in chrome when you can and see what effects that has.
That might give you clues as to how to fix it.
This might also help:
http://forum.ionicframework.com/t/ion-list-background-color/2774/7
Is there an easy way to disable the styling provided by the Intel XDK? Specifically from af.ui.css.
The styling causes problems, especially when you are using external libraries. It would be nice to do something like jQuery Mobile's data-role='none'
e.g. I am trying to use a CSS style for star rating where the user can rate by touching or clicking on stars. This works fine on a normal HTML JavaScript page but somehow the af.ui.css gives one of the elements a width of 60%. These are the lines from af.ui.css which do that:
#afui input[type="radio"] + label,
#afui input[type="checkbox"] + label {
display: inline-block;
width: 60%;
float: right;
position: relative;
text-align: left;
padding: 10px 0 0 0;
}
This is the HTML it is acting on:
<label for="Ans_1" class="star rb0l" onclick=""></label>
If I comment the width statement in af.ui.css, it messes up other checkboxes. I tried to force a width in the label by using at style="width:.." but that doesn't work either.
Any suggestions?
Without more code structure it is hard to know exactly what could be going wrong.
In general if you use style="width:..." it should override afui.ui.css unless the css is being loaded after your inline styles and clobbers them. You can try to force your css style by using CSS '!important'
.star {
width: 20px !important;
}
either in an external CSS file or in style tags in your html file that load after the afui.ui.css file. You could even try style="width: 20px !important;". Some more info on this: http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/
In general I would use images or css for a star rating not checkbox or radio buttons. Here is a good example: http://css-tricks.com/star-ratings/
Let me know if that works for you or if you could include a screenshot or more html structure I can try to help.
You should be able to create your own id and then as long as you apply your styles after afui.ui.css is loaded it should keep the app framework styles but only override your star checkbox.
html file:
<head>
<link rel="stylesheet" type="text/css" href="app_framework/2.1/css/af.ui.min.css">
</head>
<body>
<label id="idname"></label>
</body>
<style>
#afui input[type="checkbox"] + label + #idname {
width: 20px;
}
</style>
OR...
html file:
<head>
<link rel="stylesheet" type="text/css" href="app_framework/2.1/css/af.ui.min.css">
<link rel="stylesheet" type="text/css" href="star.css">
</head>
<body>
<label id="idname"></label>
</body>
star css file:
#afui input[type="checkbox"] + label + #idname {
width: 20px;
}
I'm not sure if my question makes sense, but,
I'm using jQuery to toggle an image from its off-state to its on-state upon click.
That was hard enough to get to work (I'm rather novice).
The problem is that the on-state is an image with a fair amount of body copy. It obviously does not look as good as it would if it were live type.
I was wondering, if it's even possible, that the on-state be a div with live text that is hidden until the image is clicked.
I have no idea how to go about solving this problem as my knowledge of jQuery is rather limited.
The page is currently being hosted here
Script:
<script type="text/javascript">
$(function(){
$("#click li").click(function (e) {
$("#click li.selected").not(this).removeClass("selected");
$(this).toggleClass("selected");
});
});
</script>
You could include both a div -- initially hidden, with size matching the image -- and the image in each li.
CSS:
.imagetext {
display: none;
height: 50px; /* or whatever */
width: 50px;
}
#click li img {
display: block;
height: 50px; /* or whatever */
width: 50px;
}
#click li.selected img {
display: none;
}
#click .imagetext {
display: block;
}
HTML along the lines of:
<div id="#click">
<ul>
<li>
<img src="..." />
<div class="imagetext">Four score and seven...</div>
</li>
<!-- ... -->
</ul>
</div>
So how can I had a td which has only 1 class?
For example:
<td class="ss_label ss_class">Hello</td>
<td class="ss_label">World!</td>
I this case I want to display:none the second one.
This works: $('[class="ss_label"]').hide(); but I don't want to use Javascript or any library such as jQuery. Just pure CSS.
In the real life example, the td I want to hide is the sixth and seventh.
You can use that attribute selector from jQuery in CSS as well:
td[class="ss_label"] { display: none }
This will match a <td> element whose class attribute is exactly "ss_label" with no other additions to it. Works in all major browsers except IE6 (if you consider it a major browser).
You can do:
.ss_label { display: none }
.ss_label.ss_class { display: table-cell }
for this specific case.
As far as I know, there is no general solution.
<style type="text/css">
.ss_label {
display:none;
}
.ss_label.ss_class {
display:block;
}
</style>
The last rule overrides the first one
Maybe you can use the attribute selector (works in safari)
<html>
<head>
<style>
div.hide { color: green }
div[class=hide] { display: none }
</style>
</head>
<body>
<div class="hide">Hide me</div>
<div class="no hide">Don't hide me</div>
</body>
</html>