I'm having a little trouble understanding CSS and have a question:
If I have a preset/native element to CSS e.g. fieldset and add the class .scheduler-border so it looks like this: fieldset.scheduler-border it works great.
But when I create a custom element, e.g. fieldset2 and apply the same element onto my custom element e.g. fieldset2.scheduler-border I don't get the desired result.
Could someone explain to me the reason of this?
Its because <fieldset> is a tag. If you want to identify two different fieldsets use an id or another class for example:
<fieldset id="2"> or <fieldset class="2"> that way in your css you can call #2{your changes here for id2} or .2{your changes here for class2} but you cannot change the <tag> values
Related
Consider a component c with html
<form id="someID"[formGroup]="codeEditorForm" novalidate>
</form>
with css
#SomeID{
color:grey;
}
If C gets included in a parent component P two times then wouldn't the id get duplicated as well which should not happen in html
Question 1 - should I not use id in Angular?
Question 2 - how shall I then write css rules without using id?
You can use IDs but generally you don't need to do it.
Angular scopes the styles automatically, so a class defined in one component won't affect a class with the same name in another component.
<form id="someID" class="my-form" [formGroup]="codeEditorForm" novalidate>
</form>
.my-form {
color: green;
}
Also note that you should make sure that there is always a space after you define a property. In your posted example there was no space after someId" Maybe it doesn't matter in this case but I guess it's better to start looking out for small things like this right away.
As far as I know there are there are two differences between id and class.
First is that id is used for single specific element, while class can target multiple elements, this means that you normally would use id selector if you are sure that an element will not be repeated, something like navbar.
And the second one is that id selector is more specific than class selector, this means that if there are any conflicts of styles, rules written in id selector override rules written in class selector
Normally you would not use it to override rules as there is other way to do it, so in order to decide which one to use all you need to do is think about this >> is the element you are giving id to really gonna be unique?
Angular support id on html. But as you are loading multiple times the 'C' component on your 'P' component,so the Id will be duplicated. So better you use class instead of id on your html..
<form class="yourClass"[formGroup]="codeEditorForm" novalidate>
</form>
On your 'C' component's css,
.yourClass{
color:grey;
}
i'm new to html/css and completed the css/html tutorial on codeacademy. I've reread over everything i've done and have a good knowledge around why everything works the way it does except the class/id tag. If i understand correctly the class tag is useful for when a bunch of elements should all recieve the same styling and id's are useful when you have exactly one element that should receive it's own styling. The thing i don't get is then what is the point of the id tag if i can get the same result using the class tag. For e.g. i have boxes 1,2 and 3 and i want them all to be the color black aka all recieve the same styling i would use the class tag. But i change my mind and now i want box2 to be white so in theory i should change box2 to an id tag so it can receive it's own styling but the thing is i can still use the class tag and get the same result by typing .box2 color:white;
My question is what is the point of the class and id tag if i can do the same thing for both using just the class tag.
Sorry if this is a difficult question to understand. I tried to word it as best as i could.
Ids are unique, you use id only for one element
<div id="me"></div>
On the other hand classes can be used to target more than one element
<div class="book">The Alchemist</div>
<div class="book">Harry Potter</div>
id tag is actually utilized the best in JavaScript, it is used to identify a tag uniquely among a bunch of tags. You would realise the importance of id tag when you start working with JavaScripts.
Suppose you have around 50 <p> tags in your HTML code. But you want to get value of one particular <p> tag, then the obvious way to do this is making you use of id.
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Date();
</script>
The above code checks for the tag whose id is "demo" and then assigns the output returned by Date( ) to that corresponding tag.
id is for single element.
class is for group.
if you want to change color of box2. you can alse give inline css on them because inline css priority is higher then another type
I have a date of birth selection of three select drop down boxes. My Django template looks like this:
<label>Date of birth</label>
{{ reg_form.date_of_birth }}
But I need to change the HTML of each element. For example I need to wrap each select element in a div individually.
I had a look for date_of_birth in the code and I found this:
date_of_birth = forms.DateField(widget=SelectDateWidget(years=range(1920, 2010)))
Is there a template somewhere that I can modify the HTML output of this?
Perhaps not so cleanly, I solved this problem using jQuery as follows.
I targeted each of the three select elements that were generated by Django in the HTML, and then used the .wrap() function to wrap them in div elements.
If I have an element like this one for example:
<input type="text" class="someTextBox" id="someTextBoxID" />
... does it matter if class is placed before id? If I had to guess I'd say no, but then again I wonder if there are any rules regarding that.
There are no rules for the ordering of attributes in HTML.
You can put them in any order you like.
I'm using django-uni-form to style my form using the filter my_form|as_uni_form:
<form class="uniForm" id="my_form" method="post" action="./">
<fieldset class="inlineLabels">
{{ my_form|as_uni_form }}
<div class="form_block">
<input type="submit" value="Submit"/>
</div>
</fieldset>
</form>
It looks really good. But I need to customize it.
For example, one of the field "percentage" of the form is of the type IntegerField. It is being rendered as an <input type="text">. The problem is that the text box is really wide, I'd like to make it only 2 character wide. Also I want to add a percentage sign "%" right after the text box so that users know they if they put in the number "10" in the text box, it means 10%.
Is there anyway to do that with django-uni-form?
Thanks for your help.
You'll need to loop over the elements of your form and render the uniForm markup yourself. Either that, you can customize the look of each input based on an id or class.
What I'd do is look at the mark up it generates, and then loop over the elements generating that same markup and customize them. See the Django docs for more information.
I have the same question as yours. I think the length of the text input is easy to change via css. I'm more concerned about the custom html element behind the input, in your case percentage mark. I don't find an easy solution to it. Looks like either we have to mimick the way a field is rendered in django-uni-form template or write a filter of our own. I'm still waiting for a more elegant solution.