In Angular, I have added clear button inside input box but after adding it I am not able to see entire text in input box as it is being overlapped. Please find detailed information below.
HTML Code
<ng-template pTemplate="input">
<input pInputText type="text" class="col-input-grid-100" >
<span class="mar-left">
<button (click)="clearmail1(ri)" style="border:none; outline: none; position: relative; width:0;background-color: #fff;">
<i class="pi pi-times"></i>
</button>
</span>
</ng-template>
CSS content
.col-input-grid-100{
width: 135%;
margin-left: -10px;
}
.mar-left{
margin-left:-29px;
}
Current Output: Text in input box is test3#test.com.
As you can see in above image "com" is not visible clearly. I tried multiple ways but things didnt work. Kindly help me to resolve this issue.
Note:
1. I want to show cross button inside input box only
2. I am not using bootstrap library.
I tried with below code and it worked for me.
<span class="p-input-icon-right">
<i class="pi pi-times" (click)="clearmail1(ri)" style="margin-right: -16px;"></i>
<input id="email1" class="col-input-grid-100" type="text" pInputText >
</span>
Output
Related
I am trying to hide checkbox, but still allow it to check when a div / button is pressed.
My code for the custom buttons are
<div class="checkbox flex item center-text bg-theme"
style="border: 1px solid #e3e3e3;border-radius: 12px;">
<i class="twf twf-round-pushpin"></i>
<label for="nearest" class ="color-theme right-5">Nearest to me </label>
<input type="checkbox" id="nearest" class = "filtering" value="nearest" >
I've tried adding visibility:none and display:none; but this just doesn't work, when i click the buttons, nothing happens.
You might try to add opacity:0; in the css.
If you do not want the box to be directly checkable, use pointer-events:none in addition to that
Add display:inline-block on the first div so it will take only the minimum place and won't leave a big blank.
Then for the checkbox, using display:none works fine, I've added an onclick callback to log the state of the checkbox on each click on the label.
Try this sample:
<div class="checkbox flex item center-text bg-theme" style="border: 1px solid #e3e3e3;border-radius: 12px; display:inline-block;">
<i class="twf twf-round-pushpin"></i>
<label for="nearest" class ="color-theme right-5">Nearest to me </label>
<input type="checkbox" id="nearest" class = "filtering" value="nearest" style="display: none;" onclick="console.log(this.checked)">
</div>
I was wondering if I could add some left margin inside textarea, I want there to be some space because I am using an image icon as my button and thats inside the textarea, when I type the words eventually cover the image.
<div id="inputBox">
<textarea class="txtarea" rows="50" name="Text" Id="Text"> </textarea>
<button mat-button id="send">
<mat-icon>send</mat-icon>
</button>
</div>
always search google first
Web development resource
.txtarea{
margin-left: 20px;
}
I am trying to align the controls in a line. I've tried different paddings/margins. How can I do this?
<div style="margin-top: 10px">
<button (click)="goToPage(1)" [disabled]="pageNumber==1">
<md-icon>first_page</md-icon>
</button>
<button (click)="previous()" [disabled]="pageNumber==1">
<md-icon>chevron_left</md-icon>
</button>
<input #input type="text" style="width: 30px;height:30px;margin-top:2px" (keyup.enter)="goToPage(input.value)" [(value)]="pageNumber" >
<button (click)="next()" [disabled]="pageNumber==totalPages">
<md-icon>chevron_right</md-icon>
</button>
<button (click)="goToPage(totalPages)" [disabled]="pageNumber==totalPages">
<md-icon>last_page</md-icon>
</button>
<br />
<span>Showing page {{pageNumber}} of {{totalPages}} pages.
</span></div>
You have two problems.
The first one is that your buttons are missing the angular material styling and the second one is that you should learn CSS before jumping to any JavaScript frameworks like Angular. Anyway I made a working demo on Plunker for you.
I just added a few CSS selectors and I used flexbox just like this:
.wrapper{
display: flex;
margin: 1rem;
}
.wrapper button, input {
margin: 0 0.5rem;
}
I have a link styled as follows:
<style>
.addNew{
background-color: #FFF;
display: block;
margin-top: 10px;
padding: 20px;
color: #08c;
border:3px dashed #08c;
cursor: pointer;
width: 100%;
box-sizing: border-box;
font-size: 1em;
}
</style>
<a class='addNew'>
<i class="fa fa-plus" ></i> Add new
<span style='text-decoration:underline'>Object</span>
</a>
I am using a span-tag inside the text and a font-awesome icon.
How can I use this for an submit button? I tried this:
<input type='submit' class='addNew' value="Add new Object">
But I have no idea how to style the text of the submit button.
Use a button element.
<button class='addNew'>
<i class="fa fa-plus" ></i> Add new
<span style='text-decoration:underline'>Object</span>
</button>
… then you can have child elements and target them independently for styling.
You can use <button>
<button><i class="fa fa-plus"> Add new <span style="text-decoration:underline;">Object</span></button>
Button behaviour is different then <input type="button"> or <input type="submit">. You can append elements in <button>.
You can also use <button> tag for submit. You need to also give the button a type of submit to capture the browser event.
<button type="submit">
<a>link</a>
<span>span</span>
</button>
EDIT: Why you should specify type of submit
<form>
<input />
<button type="button">not a submit button</button>
<button type="submit">submit button</button>
</form>
In this case, anyone looking at your code will know exactly which <button> is the actually submit button in a second. Also, if someone is going to get the form's submit button with CSS selector, one can easily do so by button[type="submit"]. Yes submit is the default type, but it is also the better practice for readability and easier for debugging.
Ive been trying to style a submit button using an image. I would use CSS but the button is too complex design wise. I have tried adding a background image to a button but the image was badly positioned. I have also tried using
<input type="image" src="myimage.png">
But alas this is not a submit button so It doesn't work. I have looked and tried everything I believe possible but can't find a solution to making the button submit the form. Thanks.
if <input type="image"> doesn't work as expected just try instead
<button type="submit"><img src="myimage.png"></button>
but as I wrote in the comment above your code should work fine too
You have different possibilities for a submit button:
<input type="image">
<input type="submit">
<button></button> <!-- no type needed, since submit is the default type -->
These are all submit buttons. Pick the one, which suits you best.
Now you can choose to put an image between the button or use background-images and position them properly.
Example for button with background-image:
button {
background:url(data:image/gif;base64,R0lGODlhEgASAPYAAAAA/2NFB4tsE7KKCtCiDbWMCpFwDotwGdCgAe65FvjFKvjGLffDJNuqC5V1EaqJGPjHMPbKPvfOTLuRCo5yG+q3F/bEKG1SFdGjBvrcbeGuD2NFCY5wFfG+JPfNRpp1CLSOEfnJNPbOS/rPRsCSBmdJC8+mGvnLOv3ni/3nj/zkgPrUU9uqDWNCA9GoHfjSVfvie/rXW96tEmVHCreQFPnLP/fTXfrbdPzihf3qlP3mhsSYD5VzEPXEOffSWvrbcfzigP3rkqJ8DXFWFd2tFPrQSfnYYvvfdQAAAO7CNGVHDJh3DfLCK/nSUPraZ/zjfv3qkvzlhfvecqiCD2pNEL6TC/fGLvrSTfrbav3pjv3ojPzlgv3TT82kIWpOEZ55C+OyFfnMPvzdb/zda/3XWe/FOqiDEGpKAWZJDXNWEZt2B8KXDt6vHd+yIcifHKN+EXRTAmtQFmlMD2JCBWdIBmdIAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQF+gAAACwAAAAAEgASAAYH/4AAgoN1dHNzcnGDi4Rwb25tbGtqaWiMgmdmZWRjYmNkYWBfXoxnXVxiW1pZWltYV1ZVVIRTXFJRWVC6WU9OTUxLSoJwSWO4SEi6yEdGRURDAHRCV0+5yFBByEA/Pj08SnQ7ZDrWSDlQyDg3NjU0M3MyMTrK5lnIMFgvNS4tLSwrKqCcS4FiC5AnUoxcOWGiRQkSI6ToQKFjy5OLR7DEEBECxBwvH6zEQALjIgwYGUd66MBhA4A0Gkb4QJIhgxQsTkaKOIHhgiAlXyyIaIKsKBIPNSpQmDPIy4QOYUSIkCDCQwQIFR7MYCTHQQMGC6woYJAAwYGtl2ZcMFCAAIEBAg0utLi0aMOGfgHmMgoEACH5BAkFAAAALAYABQAGAAMABgcMgFCCg1BBhodBgoaBACH5BAkKAAAALAYABQAGAAMABgcOgEhIUFCCgkFBhoOFSIEAIfkEAQUAAAAsBgAFAAYAAwAGBwyAUIKDUEGGh0GChoEAOw==) no-repeat 5px center;
padding:5px 5px 5px 27px;
}
<button type='submit'>Submit</button>
(Or as a fiddle)
Use a button element and style it with css. Don't omit the text, you form should be accessible without images or css.
<button type='submit'>Informative submit text</button>
button {
background-image:url('myimage.png');
}
In case someone needs a newer html5 good answer:
<button id='' name='' value='' ><img src='img.jpg' /></button>
<input type="image" src="myimage.png">
or
<input type="submit" style="background:url(myimage.png)">