How can I add md-icon elements next to inputs like in angular material 1 and this screenshot from google contacts:
Google contacts edit form
I know I can use mdPrefix but I like this style better.
Code example:
<md-input-container>
<md-icon mdPrefix>star</md-icon>
<input placeholder="Test" mdInput />
</md-input-container>
The icon inside the input field and I'd like it to be next to it:
Using some css tricks, I was able make something close to the the provided screenshot.
css to position icons:
/deep/ .mat-icon {
color: grey;
width: 24px;
margin: 20px 40px 0 0;
}
html:
<div style="display: flex">
<md-icon >email</md-icon>
<md-input-container >
<input mdInput placeholder="Email">
</md-input-container>
</div>
Code example
Related
Hi I am new in exploring cypress.
I notice that, there is no select options in my html code. How can I select the option in the dropdown box?
Let's take a look of my html
<div class="row asset_config">
<div class="loader-container">
<div class="loader-content">
<div class="required form-group"><label for="cc_7sgwxb2v9" class="">allocation</label>
<div class="Select css-b62m3t-container"><span id="react-select-3-live-region" class="css-1f43avz-a11yText-A11yText"></span><span aria-live="polite" aria-atomic="false" aria-relevant="additions text" class="css-1f43avz-a11yText-A11yText"></span>
<div class="Select__control css-1s2u09g-control">
<div class="Select__value-container css-319lph-ValueContainer">
<div class="Select__placeholder css-14el2xx-placeholder" id="react-select-3-placeholder">Select allocation</div>
<div class="Select__input-container css-6j8wv5-Input" data-value=""><input class="Select__input" autocapitalize="none" autocomplete="off" autocorrect="off" id="cc_7sgwxb2v9" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" role="combobox" value="" style="color: inherit; background: 0px center; opacity: 1; width: 100%; grid-area: 1 / 2 / auto / auto; font: inherit; min-width: 2px; border: 0px; margin: 0px; outline: 0px; padding: 0px;"></div>
</div>
<div class="Select__indicators css-1hb7zxy-IndicatorsContainer">
<div class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer" aria-hidden="true"><span class="connect-icon connect-icon-caret-down"></span></div>
</div>
</div><input name="allocationType" type="hidden" value="">
</div>
</div>
</div>
</div>
</div>
In fact, I also notice that, cypress studio suggest me code to click the dropdown box:
cy.get(':nth-child(2) > form > .allocation_session > .asset_config > .loader-container > .loader-content > .required > .Select > .Select__control > .Select__value-container > .Select__input-container').click()
I found that not only unreadable is this approach, but also not reliable, because sometimes suggested codes that click on other dropdown doesnt work, if I didnt run the example code above or other suggested code.
Is there any reason behind why suggested code is coupled with other suggested code?
Is there a better way to select the element I want to get?
edit:
picture included
The react-select has the same user-actions as an ordinary HTML select, but you cannot use cy.select() command on it.
The general pattern is
open the dropdown menu by clicking on the "main" control
find the option you want to select within the menu listbox that is injected into the DOM after the above click action
click that option
verify the text of the option is now showing in the placeholder
// open the dropdown menu
cy.contains('label', 'allocation')
.next('.Select')
.click()
// find the option
cy.contains('Balanced Plus')
.click()
// verify option is selected
cy.contains('label', 'allocation')
.next('.Select')
.find('.Select__placeholder')
.should('contain', 'Balanced Plus')
when I use one image inside the container carousel div the image occupies 100vw. But when I add multiple images inside the container it was supposed to be overflown but rather images get shrunk and act weird. I tried the same thing with regular HTML tag and it works perfectly.
My question is how to make a carousel in Next js without using any library where on each slide there is only one Image covering 100% view width.
#code
<div className="embla" >
<div className="embla__container">
<Product_3
src="/lifestyle/14.jpg"
details="Discover the support you need to power through gaming marathons."
name="CHAIRS"
/>
</div>
</div>
#CSS part
.embla {
overflow: hidden;
}
.embla__container {
display: flex;
}
.embla__slide {
width:100vw;
height:10rem;
display: flex;
flex-shrink: none;
}
#Product_3 component
function Product_3({ src, name, details }) {
return (
<div className="product_3">
<div className="product3_img">
<Image src={src} layout="fill" />
</div>
<div className="product2_details">
<h3 className="product2_name">{name}</h3>
<div style={{fontSize:"2rem",color:"#999999",margin:"1rem 0 2rem 0"}}>
{details}.
</div>
<button className="learn_more product2_btn">Learn More {">"}</button>
</div>
</div>
);
}
Can i use image sprites for my form submit button, tried a few things but nothing seems to work.
.button, .download, .OK, .file{
background: url(app/sprites.png) no-repeat;
}
.button{
background-position: -1px -212px ;
width: 170px;
height: 30px;
}
My form
<form action="add.php" method="post" value="Username">
<div style="float:left; margin-left:15px;"><input type="text" name="fbid" required></div>
<div style="float:left; margin-left:2px;"><input type="submit" value="Submit"></form>
Right now you are missing a class on the input.
<input type="submit" class="button" value="Submit">
With that it'll work.
I put it into a jsFiddle, using a different image because I don't have access to yours. You can play with the position, in incriments of 32px.
jsfiddle.net/CzWCv
Have you tried
<div class="button" style="float:left; margin-left:2px;"><input type="submit"
value="Submit"></form>
??
I've got this form:
<form id="imageinputpopup" class=suggestionsubmit style="display: none">
<span>Add a thing!</span><br/>
<label>url: </label><input name="imageurl" type="url"><br/>
<label>file: </label><input name="imagefile" type="file"><br/>
<input type='hidden' name='schoolid' class="schoolid">
<input type="submit" value="Submit">
</form>
And this document.ready:
<script type="text/javascript">
$(document).ready(function() {
$('.schoolid').val(get_gmap_value('school_id'));
$(".allow-submission").live('click', function(){
if($(this).attr('inputtype')=="colorpicker"){
.....
} else if($(this).attr('inputtype')=="image"){
remove_hidden("#imageinputpopup");
add_fieldname($(this), $("#imageinputpopup"));
$("#imageinputpopup").dialog();
} else if($(this).attr('inputtype')=="text"){
....
} else {
//nothing
}
});
$(".suggestionsubmit").submit(function(){
event.preventDefault();
alert($(this).html());
$(this).ajaxSubmit({
url: '/save-school-suggestion/',
type: 'post',
success: function(response){
response = jQuery.parseJSON(response);
// Check for login redirect.
// if ( response.requireLogin ) {
// alert('Sign up or log in to save your answer');
// } else {
$('.suggestionsubmit').dialog('close');
// }
}
});
});
});
function add_fieldname(element, addto){
var elementname = document.createElement('input');
elementname.type = 'hidden';
elementname.name = 'fieldname';
elementname.value = element.attr('fieldname').replace(' ', '_');
$(elementname).addClass('fieldname');
addto.append(elementname);
}
function remove_hidden(element){
$(element+' .fieldname').remove();
}
But the file field isn't showing up server side.
Why?
I found this in the documentation:
Why aren't all my input values posted?
jQuery form serialization aheres closely to the HTML spec. Only successful controls are valid for submission.
But I don't understand why my file control would be invalid.
I have another submission form in a different place on my site that is almost identical and works perfectly...
EDIT: this is the other form that does work (it has some extra stuff in it, but the form tag just has an id, like the problem one, and the input tags are the same).
<form id="photos-submission-form6">
<input type="hidden" name="section" value="photos">
<input type="hidden" name="school" id="photos-submit-school6">
<div style="margin-bottom: .5em">
<p style="position: relative; width:80%; font-size: 14px; display: inline" id="photos-anonymity-header6">Post as: null</p>
<img id="helpicon6" src="/static/img/help-icon.png" style="float: right; cursor: pointer; padding-left:1em;">
<div id="explanation6" style="display: none; padding:1em; background-color:white; border:2px solid gray; position: absolute;z-index:30; right:5px; top:5px">For more posting options, <a id="profilelink6" href="/profile/">fill out your profile</a></div>
</div>
<div id="photos-anonymity-select6" style="margin-bottom: .75em; width:412px" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 100%; "></a></div>
<input type="hidden" id="photos-anonymity-level6" name="anonymity-level" value="username">
<span style="line-height: 40px;">
<label class="photouploadlabel">URL</label><input type="text" name="image-url" style="width: 335px"><br>
<label class="photouploadlabel">File</label><input type="file" name="image-file" style="width: 335px"><br>
<label class="photouploadlabel">Caption</label><input type="text" id="image-caption6" name="image-caption" style="width: 335px; color: rgb(128, 128, 128); ">
</span>
<div style="height: 30px; margin-top: 1em; width: 413px;">
<label id="photos-tagsbutton6" style="margin-right: .5em; cursor: pointer; vertical-align: bottom; float:left; line-height: 1.8em;">Tags</label>
<input id="photos-tagsinput6" style="display: none;" type="text" name="tags">
<button id="send-photos-suggestion6" disabled="" style="float:right; position: relative; bottom: 7px; right: -4px;" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-disabled ui-state-disabled ui-button-text-only" role="button" aria-disabled="true"><span class="ui-button-text">Post</span></button>
</div>
</form>
This is probably not the case but are sure there are no spelling mistake server side? like you would be using $_FILE instead of $_FILES? Could you post the relevant php also?
Also, definitely not an issue but it is recommended to close your input tags, now like this:
<input ... />
Add enctype="multipart/form-data" attribute to your form.
Try to change the type of the input imageurl from url to text:
FROM:
<label>url: </label><input name="imageurl" type="url"><br/>
TO:
<label>url: </label><input name="imageurl" type="text"><br/>
I am not sure, but maybe the jquery plugin fails serializing the form due to invalid type attribute of image_url.
Hey you just forgot to add ---> enctype="multipart/form-data" in the form tag. This will help you out.
I think you have a problem with the binding in javascript not recognising your file.
Try binding your submit trigger event with another live() function
i.e. change
$(".suggestionsubmit").submit(mooFar(e));
to
$(".suggestionsubmit").live('submit', mooFar(e));
...........I was looking in the wrong place in the request for the file.
Server side should have been:
if not s.url_field and 'imagefile' in request.FILES:
s.image_field = request.FILES['imagefile']
instead of
s.image_field = request.POST.get('imagefile', None)
Complete and utter fail on my part.
Make sure the files you're testing aren't outside the max file size, it would be worth setting this in your HTML.
<input type="hidden" name="MAX_FILE_SIZE" value="500" />
Also, testing without the display:none might be worth while until you have the form working; which browser are you testing in?
I made some changes to one of my web pages (CSS and HTML) and now Firefox is not rendering this textarea properly. It has a sort of jitter effect happening in the middle of the top line. I'm not sure if it has anything to do with the changes I made, but what could be causing this?
<div id="CommentForm">
<form action="/posts/add-comment" method="post">
<input type="hidden" id="Table_Name" name="Table_Name" value="Posts" />
<input type="hidden" id="Table_ID" name="Table_ID" value="47" />
<input type="hidden" id="IsLiveBroadcast" name="IsLiveBroadcast" value="1" />
<textarea name="Comment_Body" id="Comment_Body" rows="1"></textarea>
<div id="error-messages"></div>
<input type="submit" class="floatRight" id="postComment" value="Post your response" />
</form>
<div class="clear"></div>
</div>
And the CSS being applied:
#live_broadcast_post #CommentForm {
margin: 0;
padding: 0;
width: 460px;
height: auto;
background: none;
}
#live_broadcast_post #CommentForm textarea {
font-family: "Lucida Grande",Verdana,"Bitstream Vera Sans",Arial,sans-serif;
font-size: 12px;
padding: 5px;
width: 98%;
}
The strange thing is that this wasn't happening before I made the changes, and now it only affects Firefox, not any other browser I have tested.
Update:
I noticed that when the page loads, it renders correctly. Only after an iframe (also on this page) is finished loading does the rendering change.
Seeing as even the text itself is affected, this looks rather like a OS / graphics card / rendering problem.
I would try it on a different machine first before questioning the markup.
I've been seeing this jitter in some websites, not with Firefox only.
Probably graphics rendering (cards) related.