I would like to make the icon of the material mat-datepicker so it fits inside my div without any margins or padding around it.
My code is:
<div class="container">
<input [matDatepicker]="datePicker1" type="hidden" class="dp">
<mat-datepicker #picker class="dp"></mat-datepicker>
<mat-datepicker-toggle class="dp" [for]="datePicker1"></mat-datepicker-toggle>
</div>
SCSS
.container{
border-width: 1px;
border-style: solid;
border-color: silver;
}
::ng-deep .dp {
padding: 0;
margin: 0;
font-size: 10px;
border-width: 1px;
border-style: solid;
border-color: red;
height: 12px;
width: 12x;
line-height: 12px;
min-height: 12px;
}
I would like to see the red border around the icon touch the gray border of the div on the bottom and on the top ( or all around). Please advise how to access the proper properties to achieve this.
Related
TLDR;
I have a CSS input form which consists of 4 number inputs for each direction and it sets margins. When I submit auto, auto margins make element positioned in center horizontally. When I give 0px, It sets it to 0px which is really a value of "0px", and it doesn't provide an auto like untouched property. Is this possible?
I wondered if there is something like this: For example I have a CSS definition like this:
border-width: 4px;
and on some case I want to change the width of only left and right borders:
border-left-width: 2px;
border-right-width: 2px;
Instead of writing this, I can't write these:
border-width: initial 2px;
border-width: inherit 2px;
border-width: unset 2px;
because they seem to be invalid values in chrome developer tools.
Is there anything else I can use to do this?
function toggleClasses(){
document.querySelectorAll(".div").forEach(function(elem){
elem.classList.toggle("toggled");
});
}
.div {
width: 100px;
height: 100px;
margin: 20px;
display: inline-block;
background: #eee;
border-color: #333;
border-width: 4px;
border-style: solid;
}
.div.div-1.toggled {
border-width: initial 2px;
margin: initial 10px;
}
.div.div-2.toggled {
border-width: inherit 2px;
margin: inherit 10px;
}
.div.div-3.toggled {
border-width: unset 2px;
margin: unset 10px;
}
<div class="div div-1"></div>
<div class="div div-2"></div>
<div class="div div-3"></div>
<input type="button" onclick="toggleClasses();" value="Togggle" />
I want to fix the classic bootstrap style hamburger button on my navbar, like the one that appears as a toggle button when the screen size gets sufficiently small.
Anyways, how can I display the button as is, without having to implement it through the navbar-toggle class?
EDIT: Here is the button I have:
<div>
<div class="center">
<button type="button" class="btn">☰</button>
</div>
</div>
body {
background: #222;
}
.center {
width: 100px;
margin: 50px auto;
}
.btn {
background-color: #222;
border: 1px solid #3A3A3A;
color: #D3D3D3;
width: 42px;
margin-left: 42px;
font-size: 23px;
height: 34px;
transition: color 0.45s;
transition: border 0.45s;
}
button.btn:hover {
color: #2978E0;
border: 1px solid #61A5FF;
}
https://jsfiddle.net/rstty1ye/
Using a UTF-8 character was mentioned on tutsplus.com
It's not my original finding or idea.
Nevermind, I figured it out.
Created a custom button and used an UTF-8 character: Trigram for Heaven for the bars.
Ive used the CSS :after selector to create an arrow for my links. This works fine but now I want to do the same thing to form inputs.
If I use the same class on the submit button then the :after is ignored, im assuming because the element cant contain other other elements.
If I apply the class to a div containing the submit button then it looks fine, but the arrow and padding outside of the actual submit button isnt clickable.
Is there a solution to this?
http://jsfiddle.net/jn7Vj/5/
.button-style {
background: -moz-linear-gradient(top, #02AD85, #019975);
background: -webkit-linear-gradient(top, #02AD85, #019975);
background: linear-gradient(top, #02AD85, #019975);
padding: 0.7em;
border-radius: 0.5em;
border-bottom: 4px solid #003E30;
box-shadow: 0 2px 0px #252D42;
font-size: 15px; //findme
margin-top: 15px;
display: inline-block;
margin-top: 10px; //findme
border-top: none;
border-right: none;
border-left: none;
color: white;
font-size: 12px;
}
.button-style:after {
content: '';
display: inline-block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0.4em 0 0.4em 0.7em;
border-color: transparent transparent transparent #FFF;
margin-left: 0.75em;
}
.button-style input {
background: none;
border: none;
color: white;
font-size: 12px;
margin: 0;
padding: 0;
}
Here is a link
<form class="webform-client-form" enctype="multipart/form-data" action="/cchetwood/4/contact" method="post" id="webform-client-form-4" accept-charset="UTF-8"><div><div class="form-item webform-component webform-component-textfield" id="webform-component-full-name">
<input type="text" id="edit-submitted-preferred-times-to-contact-optional" name="submitted[preferred_times_to_contact_optional]" value="" size="60" maxlength="128" class="form-text">
<input type="submit" class="button-style" value="Submit">
<div class="button-style">
<input type="submit" value="Submit">
</div>
</form>
The CSS after pseudo element doesn't work on input fields (https://stackoverflow.com/questions/9840768/css-after-input-does-not-seem-to-work). Unfortunately your only solution here is to add the triangle as a background image on the input field or surround the field with something like a div or a span and add the after selector to that element.
As for your button, I would suggest changing it from an input element to a button, you can then apply the after selector to that.
EDIT
After reading your question again, I'm not sure if you want to add the triangle to your text input but here is a jsFiddle with the style added only to the buttons: http://jsfiddle.net/jn7Vj/9/
add for .button-style position:relative; padding: 0;
add for .button-style input padding: 0.7em 2em 0.7em 1em; --> you can change this sizes, main idea is move padding from .button-style to .button-style input
add next css-rules for .button-style:after
position:absolute;
top:50%;
right:10%;
margin: -0.2em 0 0 0;
I am having problem to set the div border , which using the border-radius.htc.
It works in all browsers except IE.
I referred this site to make a div as rounded corners http://dimox.net/cross-browser-border-radius-rounded-corners/
My HTML will be,
<div id="div1">
<input type="text" id="txtBox" />
</div>
CSS will be,
#div1 {
width: 200px;
height: 30px;
background-color: #D1C9CC;
border-style: solid;
border-width: thin;
border-color: red;
-webkit-border-radius : 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(jquery/border-radius.htc);
-webkit-border-radius: 10px;
}
#txtBox {
width: 180px;
height: 20px;
background-color: transparent;
position: relative;
top: 5px;
left: 10px;
border-style: none;
}
My need to set the textbox rounded corner with border of red color in the IE. How can I modify this ?
Good answers are definitely appreciated.
You may need to select F12 on your keyboard while inside of IE and check which document mode you are in. Anything below IE 9 will not work.
How to decrease offset between text and top border in button. I'm trying to set line-height, but it's not working in Firefox: Fiddle
CSS:
input[type="button"]
{
border-color: #D2D2D3 #79797A #4D4D4E #C0C0C1;
border-style: solid;
border-width: 1px;
height: 16px;
line-height: 7px;
padding: 1px;
width: 16px;
background: #d8dadb;
}
HTML:
<input type="button" value="+" />
Your setting a hard width and height. Take those out or set them to auto and your button will respond to padding adjustments.
input[type="button"]
{
border-color: #D2D2D3 #79797A #4D4D4E #C0C0C1;
border-style: solid;
border-width: 1px;
line-height: 7px;
padding: 1px;
background: #d8dadb;
}
Firefox bug (feature)
http://www.cssnewbie.com/input-button-line-height-bug/
This could help a little:
button::-moz-focus-inner {border: 0; padding: 0;}