Alesh Alesh - 3 months ago 7
CSS Question

Unable to click in form input

I have a problem with my form. I'm not able to click into any input text or on some checkbox. It is possible to select them by clicking Tab and than it's possible to write something.

I'm using Twitter Bootstrap but I don't know, if it is problem with bootstrap or something else.

This is how my form looks like

<div class="well section" id="EventInfo">
<h1>1. Event info</h1>
<div class="row">
<div class="span1"><label for="name" class="label-padding">Name</label></div>
<div class="span6">
@inputText(
configuratorForm("name"),
'_label -> "",
'_error -> "Please enter valid name",
'class -> "span6"
)
</div>
</div>

<div class="row">
<div class="span1"><label for="name">Description</label></div>
<div class="span6">
@textarea(
configuratorForm("description"),
'_label -> "",
'cols -> 50,
'class -> "span6"
)
</div>
</div>

<div class="row">
<div class="span1"><label for="date" class="label-padding">Date</label></div>
<div class="span1">
<label for="fromDate" class="label-padding">From</label>
</div>
<div class="span2">
@inputText(
configuratorForm("fromDate"),
'_label -> "",
'_error -> "Please enter valid date",
'placeholder -> "From",
'class -> "span2"
)
</div>
<div class="span1">
<label for="toDate" class="label-padding">To</label>
</div>
<div class="span2">
@inputText(
configuratorForm("toDate"),
'_label -> "",
'_error -> "Please enter valid date",
'placeholder -> "To",
'class -> "span2"
)
</div>
</div>


<div class="row url-row">
<div class="span1"><label for="webUrl" class="label-padding">URL</label></div>
<div class="span6">
@inputText(
configuratorForm("webUrl"),
'_label -> "",
'class -> "span6"
)
</div>
</div>

<div class="row">
<div class="span1"><label for="address">Address</label></div>
<div class="span6">
<div class="row">
<div class="span1"><label for="street">Street</label></div>
<div class="span5">
<div class="clearfix ">
<div class="input">
<input class="span5" type="text" id="street" name="street" value="" onChange="googleGeocode()">
<span class="help-inline"></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="span1"><label for="street">City</label></div>
<div class="span5">
<div class="clearfix ">
<div class="input">
<input class="span5" type="text" id="city" name="city" value="" onChange="googleGeocode()">
<span class="help-inline"></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="span1"><label for="street">Country</label></div>
<div class="span5">
<div class="clearfix ">
<div class="input">
<input class="span5" type="text" id="country" name="country" value="" onChange="googleGeocode()">

<span class="help-inline"></span>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="row">
<div class="span1"><label for="gps" class="label-padding">GPS</label></div>
<div class="span1">
<label for="latitude" class="label-padding">Latitude</label>
</div>
<div class="span2">
@inputText(
configuratorForm("latitude"),
'_label -> "",
'class -> "span2"
)
</div>
<div class="span1">
<label for="longitude" class="label-padding">Longitude</label>
</div>
<div class="span2">
@inputText(
configuratorForm("longitude"),
'_label -> "",
'class -> "span2"
)

</div>
</div>
</div>

Answer

So I have found a solution. It was css problem. My container which wrapped this form had z-index: -1. When I removed it, everything became normal.