I have this css code for an Angular mat-group-button
mat-button-toggle-group mat-button-toggle button div.mat-button-toggle-label-content {
line-height: 0px;
}
This is the generated code
<mat-button-toggle-group _ngcontent-sah-c203="" role="group" name="os_attribution" aria-label="Atribuição de OS"
class="mat-button-toggle-group mat-button-toggle-group-appearance-standard" ng-reflect-name="os_attribution"
aria-disabled="false">
<mat-button-toggle _ngcontent-sah-c203="" value="anyone"
class="mat-button-toggle mat-button-toggle-appearance-standard" ng-reflect-value="anyone" tabindex="-1"
id="mat-button-toggle-2"><button type="button" class="mat-button-toggle-button mat-focus-indicator"
id="mat-button-toggle-2-button" tabindex="0" aria-pressed="false" name="os_attribution">
<div class="mat-button-toggle-label-content">
<mat-icon _ngcontent-sah-c203="" role="img" class="mat-icon notranslate material-icons mat-icon-no-color"
aria-hidden="true">assignment_turned_in</mat-icon>
Atribuídas
</div>
</button>
</mat-button-toggle>
</mat-button-toggle-group>
I am able to change the style of the elements until this selection
mat-button-toggle-group mat-button-toggle {
background: red;
}
But after that, when I reach button, nothing I've tried works
What's happening ?
I suppose you're using angular right?
In this case the problem is about view encapsulation.
If you check the generated styles, you notice that they are scoped to the parent components assigned ID.
To opt out of the view encapsulation you can use the ::ng-deep selector.
::ng-deep mat-button-toggle-group mat-button-toggle button div.mat-button-toggle-label-content {
line-height: 0px;
}
You forgot to use the CSS class selector .!
.mat-button-toggle-group .mat-button-toggle {
background: red;
}
If any of those are angular components, you cannot be sure that they will build into the same HTML tag names. Its better to use classes if it involves non-standard tag names (stuff that isn't button, div, span, etc).
mat-button-toggle is missing the period. Needs to be .mat-button-toggle.
I'm not a programmer by trade, but I'm trying to turn a PNG file into a button in html but im having trouble getting the button to be flush with the png in a way that doesn't look bad. I've googled many solutions so far but either i don't have the understanding to implement the fixes or my problems isn't what i think it is.
<a href="file:///E:/eLibrary_Jamaica_2019/Please_Click_Me_For_eLibrary.html">
<button type="submit" style="height:80px; width:360px "><img src="../../Web/media/images/FULLLOGOENACTUS 2.png" width="360" height="80" alt="" padding-right="50px" syle="content-align:center"
alt="Submit">
</button>
</a>
This is what the current code produces.
You could add the following CSS to the code:
button {
padding: 0;
}
img {
width: 100%;
height: 100%
}
This fits the png within the button and removes the button padding (buttons have padding unless you remove it). You could also add this to your inline html:
<a href="file:///E:/eLibrary_Jamaica_2019/Please_Click_Me_For_eLibrary.html">
<button type="submit" style="height:80px; width:360px; padding: 0"><img src="../../Web/media/images/FULLLOGOENACTUS 2.png" width="360" height="80" alt="" padding-right="50px" syle="content-align:center; width: 100%; height: 100%"
alt="Submit">
</button>
</a>
Side note.. you shouldn't wrap buttons in a tags. this is bad for seo, accessibility, and many other things.. Just wrapping your image in an a tag and styling accordingly will do what you're looking for whilst being compliant. A button isn't needed unless you're trying to submit a form of some sort -- and even in that case, don't wrap the button in an a tag
Use a class on your button and style it from within the style sheet using background.
<input type="button" class="button" ...>
then in your style sheet
.button
{
background: url(path/to/img.png) no-repeat ...;
cursor: pointer;
....
}
It is just always a good idea to separate your markup from your styles. I would also suggest that whatever the button actually does (unless it is just a link to something else), use javascript for that.
So I am relatively new to front-end development, and I am going back and cleaning up a bunch of my code which has a lot of in-line styling. What I am trying to figure out is the appropriate way to apply multiple CSS class selectors, or ID selector to a single HTML element. I attempted at creating a single class selector. What is the correct way of applying multiple classes or ID's to a single element... Please note that that they need to be separate in CSS as they have dofferent properties.
Custom Class Selector:
#customModal .modal-open .modal{
overflow: visible;
}
#customModalDialog .modal-dialog{
position: fixed;
left: 60%;
}
Example CSS:
<style>
.modal-open .modal {
overflow: visible
}
.modal-dialog {
position: fixed;
left: 60%;
}
</style>
HTML to be applied to:
<div class=" bg-white" modaldraggable>
<form name="_form" class="form-horizontal" ng-submit="submit(_form)">
<div class="modal-header">
<div class="modal-title">{{alert_data.title}}</div>
</div>
<div class="modal-body" style="height: 319px">
<iframe ng-src="{{ alert_data.url }}" width="100%" height="100%" frameborder="0"></iframe>
</div>
<div class="modal-footer">
<button class="btn btn-info btn-xs" ng-click="cancel()">Ok</button>
</div>
</form>
</div>
********* Note**
I am trying to overwrite a bootstrap class selector for a very unique template... by doing .modal{} in main.css I would overwrite them all... thats why I need a custom selector to handle both.
Out of general good coding habits, it's always better to apply css on an element with classes like so:
.red{
background-color: red;
}
.outline{
border: 2px #000 solid;
}
<div class="red outline"></div>
The classes in the element are separated with spaces and the last one is the most important class (can override some css properties if needed)
The main goal of this is to make sure you code is sustainable, if you want to add a new element with the same properties to your page, you don't need to re-write some css.
About IDs:
Use only one ID on an element, it should only need one, and this id should be unique throughout the document, this will be more important than css properties given with class.
I also recommend this article to further your knowledge on the matter.
Enjoy front-end!
To apply multiple classes to an element just write it like this (i.e. without comma):
<div class="class1 class2 class3">...</div>
To mix classes with an ID, write
<div id="element1" class="class3 class4">...</div>
I am trying to make a button for a message system to show an orange dot if there's a new message. However, i can't quite get it working. Is it possible?
Here's the button
<input type="button" value="Messages •" />
And the button on jsFiddle if anyone feels like trying out :-)
http://jsfiddle.net/ePA47/1/
Use a button element instead.
<button type="button">
Messages <span style="color: orange;">•</span>
</button>
Of course, don't add your stylings inline. I just did for this example's sake.
You could also add a class to the button such as new-messages and then do...
button.new-messages:after {
content: "•";
color: orange;
}
Just keep in mind the latter won't work in older IEs.
Use <button> instead of <input> since it has child elements which you can style.
To add an orange dot to your button, I would recommend using a background-image. This will give you the ability to design the dot however you wish, and not be constrained by font types.
It's also better for accessibility if the orange dot is added as a background image, as this is not content.
<input type="button" value="Messages" class="newmessage" />
.newmessage
{
background-image:url('http://img859.imageshack.us/img859/9611/orangedot.jpg');
background-repeat:no-repeat;
background-position:right center;
padding:5px;
padding-right:25px;
}
See Demo: http://jsfiddle.net/ePA47/3/
As per the question heading, the following will help to add multiple styles in a single style tag
<button type="button" style= "margin-top : 20px; border-radius: 15px"
class="btn btn-primary">View Full Profile
</button>
Here is what I am trying to accomplish in HTML/CSS:
I have images in different heights and widths, but they are all under 180x235. So what I want to do is create a div with border and vertical-align: middle them all. I have successfully done that but now I am stuck on how to properly a href link the entire div.
Here is my code:
<div id="parentdivimage" style="position:relative;width:184px;height:235px;border-width:2px;border-color:black;border-style:solid;text-align:center;">
<div id="childdivimage" style="position:absolute;top:50%;height:62px;margin-top:-31px;">
<img src="myimage.jpg" height="62" width="180">
</div>
</div>
Please note that for the sake of copy pasting here easily, the style code is inline.
I read somewhere that I can simply add another parent div on top of the code and then do a href inside that. However, based on some research it won't be valid code.
So to sum it up again, I need the entire div (#parentdivimage) to be a href link.
UPDATE 06/10/2014: using div's inside a's is semantically correct in HTML5.
You'll need to choose between the following scenarios:
<a href="http://google.com">
<div>
Hello world
</div>
</a>
which is semantically incorrect, but it will work.
<div style="cursor: pointer;" onclick="window.location='http://google.com';">
Hello world
</div>
which is semantically correct but it involves using JS.
<a href="http://google.com">
<span style="display: block;">
Hello world
</span>
</a>
which is semantically correct and works as expected but is not a div any more.
Why don't you strip out the <div> element and replace it with an <a> instead? Just because the anchor tag isn't a div doesn't mean you can't style it with display:block, a height, width, background, border, etc. You can make it look like a div but still act like a link. Then you're not relying on invalid code or JavaScript that may not be enabled for some users.
Do it like this:
Parentdivimage should have specified width and height, and its position should be:
position: relative;
Just inside the parentdivimage, next to other divs that parent contains you should put:
<span class="clickable"></span>
Then in css file:
.clickable {
height: 100%;
width: 100%;
left: 0;
top: 0;
position: absolute;
z-index: 1;
}
The span tag will fill out its parent block which is parentdiv, because of height and width set to 100%. Span will be on the top of all of surrounding elements because of setting z-index higher than other elements. Finally span will be clickable, because it's inside of an 'a' tag.
Going off of what Surreal Dreams said, it's probably best to style the anchor tag in my experience, but it really does depend on what you are doing. Here's an example:
Html:
<div class="parent-div">
Test
Test
Test
</div>
Then the CSS:
.parent-div {
width: 200px;
}
a {
display:block;
background-color: #ccc;
color: #000;
text-decoration:none;
padding:10px;
margin-bottom:1px;
}
a:hover {
background-color: #ddd;
}
http://jsbin.com/zijijuduqo/1/edit?html,css,output
Two things you can do:
Change #childdivimage to a span element, and change #parentdivimage to an anchor tag. This may require you to add some more styling to get things looking perfect. This is preffered, since it uses semantic markup, and does not rely on javascript.
Use Javascript to bind a click event to #parentdivimage. You must redirect the browser window by modifying window.location inside this event. This is TheEasyWayTM, but will not degrade gracefully.
I'm surprised no one suggested this simple trick so far! (denu does something similar though.)
If you want a link to cover an entire div, an idea would be to create an empty <a> tag as the first child:
<div class="covered-div">
<a class="cover-link" href="/my-link"></a>
<!-- other content as usual -->
</div>
div.covered-div {
position: relative;
}
a.cover-link {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
This works especially great when using <ul> to create block sections or slideshows and you want the whole slide to be a link (instead of simply the text on the slide). In the case of an <li> it's not valid to wrap it with an <a> so you'd have to put the cover link inside the item and use CSS to expand it over the entire <li> block.
Do note that having it as the first child means it will make other links or buttons inside the text unreachable by clicks. If you want them to be clickable, then you'd have to make it the last child instead.
In the case of the original question:
<div id="parentdivimage" style="position:relative;width:184px;height:235px;border-width:2px;border-color:black;border-style:solid;text-align:center;">
<a class="cover-link" href="/my-link"></a> <!-- Insert this empty link here and use CSS to expand it over the entire div -->
<div id="childdivimage" style="position:absolute;top:50%;height:62px;margin-top:-31px;">
<img src="myimage.jpg" height="62" width="180">
</div>
<!-- OR: it can also be here if the childdivimage divs should have their own clickable links -->
</div>
Make the div of id="childdivimag" a span instead, and wrap that in an a element. As the span and img are in-line elements by default this remains valid, whereas a div is a block level element, and therefore invalid mark-up when contained within an a.
put display:block on the anchor element. and/or zoom:1;
but you should just really do this.
a#parentdivimage{position:relative; width:184px; height:235px;
border:2px solid #000; text-align:center;
background-image:url("myimage.jpg");
background-position: 50% 50%;
background-repeat:no-repeat; display:block;
text-indent:-9999px}
<a id="parentdivimage">whatever your alt attribute was</a>
This can be done in many ways.
a. Using nested inside a tag.
<a href="link1.html">
<div> Something in the div </div>
</a>
b. Using the Inline JavaScript Method
<div onclick="javascript:window.location.href='link1.html' ">
Some Text
</div>
c. Using jQuery inside tag
HTML:
<div class="demo" > Some text here </div>
jQuery:
$(".demo").click( function() {
window.location.href="link1.html";
});
I simply do
onClick="location.href='url or path here'"
What I would do is put a span inside the <a> tag, set the span to block, and add size to the span, or just apply the styling to the <a> tag. Definitely handle the positioning in the <a> tag style. Add an onclick event to the a where JavaScript will catch the event, then return false at the end of the JavaScript event to prevent default action of the href and bubbling of the click. This works in cases with or without JavaScript enabled, and any AJAX can be handled in the Javascript listener.
If you're using jQuery, you can use this as your listener and omit the onclick in the a tag.
$('#idofdiv').live("click", function(e) {
//add stuff here
e.preventDefault; //or use return false
});
this allows you to attach listeners to any changed elements as necessary.
A link with <div> tags:
<div style="cursor: pointer;" onclick="window.location='http://www.google.com';">
Something in the div
</div>
A link with <a> tags:
<a href="http://www.google.com">
<div>
Something in the div
</div>
</a>