I have the following angular html component:
<div fxLayout fxLayout.xs="row" fxLayoutAlign="left" fxLayoutGap="5px" fxLayoutGap.xs="0">
<div flex class="item item-1" fxFlex="95%">
<mat-form-field class="large-field">
<input matInput placeholder="Full Name" aria-label="Full Name" [matAutocomplete]="auto" [formControl]="FullNameCtrl">
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="onSelected($event.option.value)">
<mat-option *ngFor="let data of filteredCompanyFullName | async" [value]="data">
<span>{{ data.FullName }}</span>
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
<div flex class="item item-2" fxFlex="4%">
<button matTooltip="Refresh" mat-icon-button (click)="refresh()">
<mat-icon>refresh</mat-icon>
</button>
</div>
</div>
What above does is showing an auto complete drop-down plus a refresh button. I am struggling to style above html to show something like the following picture:
However it looks like the following which is not the desired output:
What should I change to achieve the first image? I want the input field to take 95% width of the row and a small refresh button right next to it aligned to the right.
Related
I have an html code with contains
<div class="form-card">
<h2 class="fs-title" test-data="area_1">
About DigCompEdu
</h2>
<p></p>
<label for="academic_teaching" class="question" test-data="question_1">
<b>1- </b>
</label>
<small id="academic_teachingHelp" class="form-text text-muted">
</small>
<div class="form-check question-form-check ">
<div class="row">
<div class="col-1">
<input class="radio" type="radio" value="0" id="3" name="2" test-data="answer_1" />
</div>
</div>
So, I have h1 with testdata name after that i have a form, this form contains question with multin check radio .. i want to access this check , not by just call ([test-data="answer_2"])
because i have another tips and don't want to check them as this one ,
i did smth like this but it's not working :
cy.get('[test-data="area_1"]~[test-data="answer_2"]').check({force: true})
Any one have another idea ?
It might be the ~ between the selectors, I haven't seen that before.
Does it work with a space between instead?
cy.get('[test-data="area_1"] [test-data="answer_2"]').check({force: true})
If the heading is followed by the form like this
<h2 class="fs-title" test-data="area_1">
About DigCompEdu
</h2>
<div class="form-check question-form-check ">
...
then you would query like this
cy.get('[test-data="area_1"]')
.next('.form-check') // next element on page
.find('[test-data="answer_2"]') // this looks inside '.form-check'
.check({force: true})
I try to create a simple contact form, but I didn't get any message, the post request is made. I am pretty new with Modx.
What I tried:
Link 1
Link 2
I created 2 Chunks (emailChunkTpl and MyEmailChunk), and in my template I call for the [[$MyEmailChunk]]. Obviously I did something wrong but I am not sure what. The code is like in the examples, but with some changes,like my email.
[[!FormIt?
&hooks=`email,FormItSaveForm `
&emailTpl=`emailChunkTpl`
&emailTo=`myEmail#gmail.com`
&emailUseFieldForSubject=`1`
]]
<form action="[[~[[*id]]]]" method="post" class="contactForm">
<div class="row input-section-child">
<div class="col input-contact">
<input value="[[!+fi.input-name]]"class="input-name" name="input-name" id="input-name" type="text" placeholder="your name" />
<input value="[[!+fi.input-email]]" class="input-email" name="input-email" id="input-email" type="text" placeholder="email address" />
</div>
<div class="col input-contact-text">
<input value="[[!+fi.input-textare]]"class="input-textare" name="input-textare" id="input-textare" type="textare" placeholder="message" />
</div>
</div>
<div class="row second-row">
<div class="col checkbox">
<input value="[[!+fi.input-checkbox]]" class="input-checkbox" name="input-checkbox" id="input-checkbox" type="checkbox" ><span class="input-checkbox-span">I agree to the Privacy policy.</span>
</div>
<div class="col">
<button type="submit" class="send-button">SEND</button>
</div>
</div>
<a href="#intro" class="back-to-top"><img src="images\arrow-back.svg" /><span>Back to top</span>
</div>
</from>
You should start with cleaning up your markup, it is not valid HTML. There is a typo in your closing form tag (/from), an extra closing div tag, there is no input type of textare as far as I know, and you are missing white space around some classes. You can validate HTML here: https://validator.w3.org/
You can test to make sure your site is setup properly to send an email. There is a snippet for this called QuickEmail, download it from the extras tab in the MODX manager.
Once you're sure your site can send email, then start with a stripped down version of the Formit call -- remove all hooks except email and get it working with that first. Then add hooks one at a time.
I have two ionic checkbox I need to select the first one for the first time of visit the page, T have tried many but not being ..
<div class="row">
<div class="col col-50">
<ion-item>
<ion-label>{{opt1}}</ion-label>
<ion-radio value="{{opt1}}" checked="true"></ion-radio>
</ion-item>
</div>
<div class="col col-50">
<ion-item>
<ion-label>{{opt2}}</ion-label>
<ion-radio value="{{opt2}}" [disabled]="isDisabled"></ion-radio>
</ion-item>
</div>
</div>
I'm trying to make a modal reveal for every Edit button just when i clicked onto the Edit button it doesnt open i did as mentionned onto the documentation for Foundation 6 .Here is my code.Please any help.
<ul class="button-group">
i give to every reveal modal an id based on the field id with that i would have
different ids and linked every Edit button with its modal
<li>
<a class="button tiny" data-open="editModal<?php echo $contact->id ;?>"
data-contact-id="<?php echo $contact->id;?>">Edit</a>
<!-- the modal edit start here -->
<div class="reveal large editmodal" id="editModal<?php echo $contact->id ;?>"
data-cid="<?php echo $contact->id ;?>" data-reveal>
<div class="grid-x grid-margin-x">
<div class="cell large-12"><h1>Edit Contact</h1></div>
</div>
form of the edit modal
<form action="#" id="editadress" method="post">
<div class="grid-x grid-margin-x">
<div class="cell large-6">
first name input field
<label>First Name
<input type="text" name="first_name" placeholder="Enter Your First Name"
value="<?php echo $contact->first_name; ?>">
</label>
</div>
<div class="cell large-6">
last name input field
<label>Last Name
<input type="text" name="last_name" value="<?php echo $contact->last_name; ?>"
placeholder="Enter Your Last Name">
</label>
</div>
</div>
submit button of the form
<div class="grid-x grid-margin-x">
<div class="cell large-12">
<input class="button big abutton right small" name="submit" type="submit" value="Submit"/>
</div>
</div>
</form>
close button of the modal
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<!--The modal edit ends here-->
</li>
<li>
<a class="button alert tiny">Delete</a>
</li>
</ul>
I'm having trouble configuring the search results, linking to that specific result.
I've set the channel search preferences so that {auto_path} links to the relevant template group and template and I have had no trouble with this whatsoever.
The only trouble I am having is that when you click on the title of the result, when you are sent to the page that displays the specific entry, rather than display that specific entry, it shows you the most recent entry posted on that channel.
I’ve also noticed that when you click the result, the url which should display as this:
http://www.mywebsite.com/ee_site/index.php?/template_group/template/entry
actually renders as this:
http://www.mywebsite.com/ee_site/index.php?/template_group/template/?/entry
Whats up with the extra ‘?/’ inbetween the template and the entry?
Here is the code for the results page:
{embed="embeds/html-head" page_title="Blog"}
<body>
<div id="container">
{embed="embeds/header"}
{embed="embeds/navigation"}
<div id="hero">
<div id="heading">
<div id="title">
<h2>{exp:search:total_results} RESULT(S) FOR {exp:search:keywords}</h2>
</div>
</div>
<div id="blog">
<ul>
{exp:search:search_results}
<div class="blog">
<li class="search_results"><strong>{title}</strong> from <em>{channel}</em>
<br/>
{excerpt}
<br/>
</li>
</div>
{/exp:search:search_results}
</ul>
</div>
</div>
{embed="embeds/footer"}
</div>
</body>
</html>
and here is the code for a gallery entry
{embed="embeds/html-head"}
<body>
<div id="container">
{embed="embeds/header"}
{embed="embeds/navigation"}
<div id="hero">
<div id="heading">
{exp:channel:entries channel="gallery" limit="1" disable="pagination"}
<div id="title">
<h2>Gallery</h2>
</div>
<div id="story_title">
<h2>{title}</h2>
</div>
</div>
<div id="video_main">
<img class="image" src="{image}" alt="{title}">
</div>
<div id="featured" class="main">
<p>{info}</p>
<p class="url">{source}</p>
</div>
{/exp:channel:entries}
{embed="embeds/footer"}
</div>
</body>
</html>
On a category page, when you click an entry and are taken to this page, it displays the specific entry clicked on, so I know that there is nothing wrong with that aspect.
Any suggestions/solutions would be much appreciated, i'm sure it's something minor that i'm just not spotting!