Angular Material Custom Class Button Issue - javascript

I am trying to write a custom class for angular material button, but there is one issue with that, when I click on the button and move away(minimize or activate another window) from the browser, it fades out or makes it white and when I click on the browser window then it turns to proper shape/color, don't know the reason but how to control this does any one have any idea.
My Css Class:
.DeleteBtn.md-raised {
color: #fff;
background-color: #CC090F;
text-transform: initial;
min-width: 88px;
margin: 6px 0px;
max-width: 8px;
font-size: 12px;
}
.DeleteBtn.md-raised:not([disabled]):hover {
color: #fff;
background-color: #7F0509;
max-width: 10px;
font-size: 12px;
}
<md-button class="md-raised DeleteBtn">Delete</md-button>

You are missing base CSS class for all components .md-button. Here is a working CSS snippet:
.md-button.DeleteBtn.md-raised:not([disabled]).md-focused,.md-button.DeleteBtn.md-raised {
color: #fff;
background-color: #CC090F;
text-transform: initial;
min-width: 88px;
margin: 6px 0px;
max-width: 8px;
font-size: 12px;
}
.md-button.DeleteBtn.md-raised:not([disabled]):hover {
color: #fff;
background-color: #7F0509;
max-width: 10px;
font-size: 12px;
}
I would recommend to read more about <md-button> CSS and follow best practices. Also here is a working example for you:
https://codepen.io/anon/pen/ybdzZJ
Hope that will help you. Good luck :)

Related

React/HTML/CSS button text not centering on mobile; works fine on all desktop browsers

I'm totally perplexed by this - the app is a simple React project, but the button is simple HTML with CSS styling. The text inside the button element - which should be centered - works fine on all desktop browsers, but everything is right-aligned on iPhone. The button includes a FontAwesome icon and some text, which are on different lines, but when I remove either it doesn't make a difference, the problem persists. I don't have the ability to inspect the code on my phone, and all desktop iPhone emulators online don't show the problem. Does anyone have any idea what might be causing this?
JavaScript/JSX (state contains FontAwesome icon and text):
<div className='textcontainer'>
<button disabled={this.state.disabled}
onClick={e => this.handleOpen(this.props.id)}
className='opencapsule'
id={this.props.title + '_button'}>
{this.state.clock}
<span className='opentext'> {this.state.status}</span>
</button>
</div>
Relevant CSS:
.textcontainer {
padding: 5px;
display: flex;
}
.opencapsule {
margin:0 auto;
color: white;
width: 80px;
height: 80px;
font-size: 2.5rem;
line-height: .8rem;
border-radius: 3px;
border: 1px solid white;
background-color: gray;
cursor: pointer;
outline: none;
}
.opentext {
font-size: .8rem;
line-height: 1rem;
}
Live version of current app: https://timecapsule.now.sh/capsules
This should fix it:
On your button element, .opencapsule, add display: flex; and justify-content: center;, like so:
.opencapsule {
margin:0 auto;
color: white;
width: 80px;
height: 80px;
font-size: 2.5rem;
line-height: .8rem;
border-radius: 3px;
border: 1px solid white;
background-color: gray;
cursor: pointer;
outline: none;
display: flex; //add this
justify-content: center; //add this
}
I'm not completely sure why the icons are not being centered on mobile, it has something to do with the behavior of the <svg>. I tried many other ways of centering it on iphone, such as, text-align: center;, and margin: auto; and others, but the only way that worked for me on mobile was to center the icon by making the button display: flex and justify-content: center.
Try adding the webkit center to .opencapsule
text-align: -webkit-center;

How to extract text using DoodleNerd's CSS textboxes?

I recently used DoodleNerd's CSS Textbox Generator (http://doodlenerd.com/html-control/css-textbox-generator) to make a really sleek looking textbox for my website. I'm familiar with extracting text from forms; I've done it in two main forms:
document.getElementById('field').value
or
driver.findElement(By.id("field")).getCssValue("value")
For some reason, when I use DoodleNerd's textboxes, the values in the box aren't extracted... it's really odd.. I'll include my css and html for reference:
#field {
position: absolute;
left: 33px;
top: 170px;
overflow: visible;
width: 129px;
white-space: nowrap;
text-align: left;
font-family: Comic Sans MS;
font-style: normal;
font-weight: normal;
font-size: 20px;
color: rgba(249,249,249);
}
.field {
padding: 0px;
font-size: 15px;
border-width: 5px;
border-color: #CCCCCC;
background-color: #ba6fc5;
color: #f9f9f9;
border-style: inset;
border-radius: 5px;
box-shadow: 4px 2px 5px rgba(66,66,66,.75);
text-shadow: 49px -11px 5px rgba(177,37,37,.0);
}
.field:focus {
outline:none;
}
<div id="field">
<input type="text" value="e.g. '999'" class="field" />
</div>
Thanks a million!
It appears like the value you want is: e.g '999' correct? If so, this should be your JavaScript:
var fieldValue = document.querySelector('.field').value;
It appears like the value you want has the class of field, not the id of field.
If you must use document.getElementById(), you could also do this:
var field = document.getElementById('field');
var value = field.firstElementChild.value;
But I think the first way is probably better.

Making css numbers to look pretty

I have the code which is in this fiddle
.numberCircle {
border-radius: 10%;
behavior: url(PIE.htc);
/* remove if you don't care about IE8 */
width: 36px;
height: 36px;
display: table;
padding: 10px;
margin-top: 15px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 28px Arial, sans-serif;
}
<div class="numberCircle">368585760</div>
Thanks to the one who had this fiddle, I updated it with my changes:, now without adding additional html elements, is it possible to design every single number inside the box to look like this
http://prntscr.com/gi26iz
I was trying to use the css3 first child, 2nd child etc etc but I am not sure what to do.
If you can't change the markup, you can try this with jquery - replacing the contents of the div with each digit wrapped into a span.
See a demo to get you started:
var html = $('.numberCircle')
.text()
.split('').map(function(e){
return "<span>" + e + "</span>";
}).join('');
$('.numberCircle').html(html);
.numberCircle span {
border-radius: 10%;
behavior: url(PIE.htc);
/* remove if you don't care about IE8 */
width: 36px;
height: 36px;
/*display: table;*/
display: inline-block; /* CHANGED */
padding: 10px;
margin: 15px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 28px Arial, sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="numberCircle">368585760</div>
I think the only way to do is use javascript to add styling to each elements. There is no css like :nth-letter

HTML/CSS formatting trouble.

So I have made a simple app in ionic and I am formatting my css and html. I am trying to make my app look really nice. All it has right now is a input text field and a input button. I am having a hard time with my margins/padding, not sure. Here is my code:
.title {
background-color: #e6ffff;
}
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
text-align: center;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
vertical-align: middle;
display: inline-block;
border: none;
text-align: center;
width: 100%;
margin-top: 15px;
}
div {
margin-top: 50px;
margin-left: 120px;
margin-right: 120px;
border-radius: 5px;
background-color: #f2f2f2;
padding: 15px;
}
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Push Notifications</h1>
</ion-header-bar>
<ion-content>
<div ng-controller="myCtrl">
<form>
<input type="text" class="messageText" placeholder="Message" ng-model="messageText">
<input type="submit" ng-click="submit()">
</form>
</div>
</ion-content>
</ion-pane>
</body>
Picture of the app running in the browser
See how the gray is all weird and the header also is missing some color? I need some help fixing this. Also I would not mind some css tips on making a app look professional! Thanks in advance!:)
Okay, so the problem lies in how you have things positioned in the DOM.
Quickest solution is to add the styles to the form and take a few styles away from the div that's wrapping it.
form{
background:pink;
background-color: #f2f2f2;
padding:15px;
border-radius: 5px;
}
div {
margin-top: 50px;
margin-left: 120px;
margin-right: 120px;
padding: 15px;
}
quick reference for box models: https://css-tricks.com/the-css-box-model/
In addition to the Answer from #Aldose ... To fix the Header having a margins you can try this.
body , html
{
padding:0px;
margin:0px;
width:100%;
height:100%;
}
.title {
background-color: #e6ffff;
padding:0px;
margin:0px;
}

Removing Chrome style for input text (list)

I am trying to build a custom input text list. I have an image I would like to use as arrow, so that I can click and show the list of values.
I am also using AngularJS.
The following code does not work as expected. My issue is: I see a black arrow on the left of the yellow arrow when passing over or clicking (otherwise no arrow)
Here's a link to try it (no yellow arrow is shown, but there is some white space on the right of the undesired black arrow): http://jsfiddle.net/wbo3pt9u/
Here's the code.
<input type="text" list="typeL" ng-model="tipo" class="list" placeholder="Type">
<datalist id="typeL">
<option ng-repeat="objectType in objectTypes"
value="{{objectType.typeWorkOfArt}}" } />
</datalist>
</input>
CSS:
.list {
background: url('../images/arrow.png') no-repeat top right;
border-radius: 20px;
width: 160px;
height: 33px;
-webkit-appearance: none;
border: 2px solid #c1c4c6;
line-height: 29px;
cursor: pointer;
font-weight: normal !important;
font-style: italic;
font-size: 1.250em;
padding:0 30px 0 10px !important;
color: #58585A;
overflow: hidden;
margin: 10px;
}
.input {
border-radius: 20px;
width: 160px;
height: 33px;
-webkit-appearance: none;
border: 2px solid #c1c4c6;
line-height: 29px;
cursor: pointer;
font-weight: normal !important;
font-style: italic;
font-size: 1.250em;
padding: 0 1em;
color: #58585A;
margin: 10px;
}
I also tried to use a , which worked correctly: no black arrow and single click. Now that I switched to this element, it does not work. How can I fix it?
Solved by introducing this CSS lines:
input::-webkit-calendar-picker-indicator {
display: none;
}

Categories