I am working with Nativescript-Vue and have several text fields that I would like to put a little text in the background so the user knows what values (name, address, etc) should go in there. I don't have room for labels and I see that TextField has a hint...so my thinking is I should be able to use that? However, this doesn't render anything.
<StackLayout orientation="horizontal" width="*" class="box">
<TextField class="line-text" v-model="customer.firstName" hint="First Name" width="500px" marginBottom="2px" marginTop="2px"></TextField>
<TextField class="line-text" v-model="customer.lastName" hint="Last Name" width="500px" marginBottom="2px" marginTop="2px"></TextField>
</StackLayout>
Related
This ionic page is just a form with some elements. In the Phone field, I have created a modal that opens when you click on an image:
<ion-grid>
<ion-row>
<ion-col>
<form #registerForm="ngForm" novalidate [formGroup]="form">
[...]
<ion-item>
<img item-left margin-left src={{flagPath}} (click)="presentCountryModal()">
<p item-left (click)="presentCountryModal()">+{{countryCode}}</p>
<ion-icon item-left name="arrow-dropdown" (click)="presentCountryModal()">
</ion-icon>
<ion-input
placeholder="Phone"
type="text"
[(ngModel)]="account.phone"
name="phone"
required
pattern=".{8,}"
#phone="ngModel"
></ion-input>
</ion-item>
It works perfectly on iOS and Windows on ionic-lab. But in Android the behavior is different: when I click on the image, the Phone ion-input gets the focus and the whole form moves up, making space for the keyboard and hiding the field under the header.
I'd like to:
1) Be able to make the image clickable.
2) Disable the automatic scrolling when an ion-input gets focused. I've tried keyboard.disableScroll(true) with no success.
Any ideas? Thanks!
UPDATE:
As explained here, adding .input-cover { position: static; } to the scss files stabilizes the form and makes the image click event responsive! So that solves the first question.
But I still have the problem that, when the keyboard opens, the whole page moves up and the top elements hide below the header (and you can't scroll them down).
1) You need to make a separated ion-item form the img. If you have an ion-input inside an ion-item, everything you put together will be "part" of that input.
2) The easiest way to do this without manipulating via ts is using a regular input, not the ion-input or using the ion-input inside a div instead of the ion-item. The second one i'm just guesing, since the behaviour of the scroll for showing the keyboard happens if you have an ion-input inside ion-item.
Hope this helps :)
<div draggable="true">
{{input value="default value" }}
</div>
In ember.js, as above code, when the div element has an attribute 'draggable="true"', on the webpage, the input area must need a double-click to edit in ie-11, but in chrome or firefox, it just need a click event to edit. Has anyone resolved this issue?
seems to be a bug
[IE 11] Input field of type text does not respond to mouse clicks when ancestor node has draggable=true
bad workaround:
<div style="background-color:lightgray" id="dragE" draggable="true">
<input id="inputE" type="text" />
</div>
click on the lightgray background
now the input field support single click
$('#dragE').focus(); <br>
$('#inputE').focus();<br>
was my solution
unfotunately reproducing with pluncer & co. did not work.
Or...set attribute draggable to "false", when the page goes to a production environment.
This worked for us.
Is it possible to add a custom button to a Sitecore FormDialog other than OkButton and CancelButton e.g. instead of this
<FormDialog Icon="cool.png" Header="A really cool header" Text="Link or un-link items" OKButton="Link" CancelButton="Close">
but something more like this
<FormDialog Icon="cool.png" Header="A really cool header" Text="Link or un-link items" OKButton="Link" UnLinkButton="UnLink" CancelButton="Close">
I don't think it is possible to add another button by passing in an attribute on the FormDialog element without modifying original the FormDialog.xml
But there is a placeholder element defined in the DialogForm control (in /sitecore/shell/Controls/Dialogs)
<def:Placeholder name="Buttons"/>
In the xml for your custom application you add controls to this placeholder:
<control xmlns:def="Definition" xmlns="http://schemas.sitecore.net/Visual-Studio-Intellisense">
<MyCustomForm>
<FormDialog Icon="cool.png" Header="A really cool header" Text="Link or un-link items" OKButton="Close" CancelButton="false">
<CodeBeside Type="MyCustomCode.Dialogs.MyCustomForm, MyCustomCode"/>
<GridPanel Columns="2" CellPadding="4" Width="100%" Height="100%">
<!-- Panel code here -->
</GridPanel>
<Border def:placeholder="Buttons" runat="server" style="float:right;">
<Button Header="Link" runat="server" Type="button" Click="Link_Click" />
<Button Header="Unlink" runat="server" Type="button" Click="Unlink_Click" onclick="return confirm('Are you sure you want to unlink?');" />
</Border>
</FormDialog>
</MyCustomForm>
</control>
Note you want to pass in CancelButton="false" which hides the cancel button and set the OK button text to "Close". Handle your Link/Unlink button server actions in the code behind. I've styled the button group to float:right so they then site next to the Close button.
Id like to make a drop down list box where in at the end of the list, an option "Enter New housing", that if selected there will be a message box then it will automatically saves on the database and refreshes the object.
Im a beginner and this is what ive started:
<cfquery name="housingsel" datasource=" " dbtype=" ">
select rtrim(housing_name) as housing, housingid as housingid from housing order by housing
</cfquery>
<!---<cfquery name="housingins" datasource=" " dbtype=" ">
insert into housing (housingid,housing_name) values (1,'Tierra Pura Housing')
</cfquery>--->
<body>
<div class="container">
<div class="content">
<h1>Housing</h1>
<table width="300" bgcolor="#FFFFFF" cellpadding="2" cellspacing="0" border="0">
<cfform action="de_housing.cfm" method="POST">
<tr><td height="20" class="lbl" align="right">Housing</td><td>
<select name="housingcat">
<CFOUTPUT QUERY="housingsel">
<OPTION VALUE="#housingid#">#housing#</OPTION>
</CFOUTPUT>
<option value="new">Enter New Housing</option>
</select>
</td></tr>
<tr><td height="20" class="lbl"></td><td align="left">
</td></tr>
</cfform>
</table>
Please help!
Thanks!
First off, avoid cfform at all costs. It will not help you. See https://github.com/cfjedimaster/ColdFusion-UI-the-Right-Way for reasons why and examples of how to do stuff the right way.
That being said, what you want to do isn't difficult. Let's break it down.
> "Id like to make a drop down list box where in at the end of the list, an option "Enter New housing", that if selected "
Using jQuery, you would add a change handler to your dropdown. In that change handler, you can get the selected index of the drop down. If that index is equal to the length of the options, then the user has picked the last one.
> "there will be a message box"
You have a few choices here. One simple, but not pretty way, is to use the built in confirm option. It has a simple modal box API that the user can type in. There are pretty options, like jQuery UI dialogs, but the confirm option is super simple. I'd recommend starting there.
> "automatically saves on the database"
So, you will know when a user enters a value into the confirm. Take that and use jQuery to do an XHR (Ajax) hit to your code. You will need to write CF code to respond to this request and insert it into the db. Not too difficult and it has been shown many places elsewhere. I'd also add logic to check for dupes.
> "refreshes the object"
When you do a XHR in jQuery, you know when the server is done doing crap, so in the response handler, you can add a new option to the drop down. This too has been done many times before, just Google for adding an option to a drop down. (You will probably end up back here.)
i am using foundation for my first project right now and i really love the functionality it provides out of the box, but i am having trouble with my custom radio boxes.
The idea is to not only have text inside of the radio buttons label, but also an image and some bold text.
As soon as i start using either an img or a bold tag inside of the label, the radio button selection via the labels text is broken.
The code i am using is this
<label for="radio2">
<img src="img/nho_musicians_flute.png">
<input name="radio2" type="radio" id="radio2" style="display:none;" CHECKED>
<span class="custom radio checked"></span>
<b>Radio</b> Button 1
</label>
With this it is only possible to select a radio box by clicking on it DIRECTLY, clicking the text or the image results in erratic selections, it seems that the foundation JS selectors didn't account for extra tags inside of a label.
Is there a way to make this work with foundation, or do i have to resort to workarounds (making the whole text bold and put the image outside of the label)?
Good question, I had the same issues as you when I needed to create custom forms through F4's custom form implementations.
If you look in the implementation (custom.forms.scss) you can see that they use the :before and content: "" in order to be able to achieve this. I suspect that's why you can't add any tags after the <span class="custom radio"></span>
Now what you CAN do as a workaround is to place your custom elements etc inside the <span> element. This will work just fine, but will look wierd as the width and height is very small. But from then on its just a matter of styling it until you get it to look as you want. Here is a really simple example using absolute positioning:
<span class="custom radio">
<span style="position: absolute; top: 0; left: 0; width: 500px; margin-left: 30px;">
<b>test</b> foo
</span>
</span>