0

I am trying to make input text for street address turn red if it is too long, like in this fiddle.

For that I have created a <span id="street1span"></span> in the "input-box" div like this:

<li class="wide">
                <label for="street_1" class="required"><em>*</em><?php echo $this->__('Street Address') ?></label>
                <div class="input-box">
                    <input type="text" name="street[]" value="<?php echo $this->escapeHtml($this->getAddress()->getStreet(1)) ?>" title="<?php echo $this->__('Street Address') ?>" id="street_1" class="input-text <?php echo $_streetValidationClass ?>" />
                    <span id="street1span"></span>
                </div>
            </li>

Which does what I want.

The problem is that I need to get this span on top of the input field and make the actual input text transparent so it looks natural.

Test site

You can play around with the CSS on my test site

e-mail: test@test.com

password: test123

(only the first address field)



I don't have a lot of experience in web design and I realise that this is more of a general question and not Magento, but there is something with Magento CSS classes that interferes with what I am trying to do, I cannot figure out what.

3

You'll need to use CSS to position the span on top of the input.

I've done a very very rough example here, I recommend adding new classes rather than styling input-box, input-text and using an ID.

So you can see the span is on top I've given it a red background.

enter image description here

Code can be seen here.

You'll need to tweak the code as I've removed parts of the markup and adding more CSS than is required due to not having any default styling. But this should give you a good example on how to do it.

  • Sorry for coming back to this, but is there a way to have the span in front of the input field while still being able to type in the field? – Jurģis Toms Liepiņš Aug 15 '17 at 10:05
  • @JurģisTomsLiepiņš Yeah sorry, you can use pointer-events: none; as long as you don't need IE10 support. I've updated the codepen example. – Ben Crook Aug 15 '17 at 10:20
0

You can do it simply like this

<li class="wide">
    <label for="street_1" class="required"><em>*</em><?php echo $this->__('Street Address') ?></label>
    <div class="input-box address-field"> // class added here "address-field"
        <span id="street1span" style="display:block;"></span>
        <input type="text" name="street[]" value="<?php echo $this->escapeHtml($this->getAddress()->getStreet(1)) ?>" title="<?php echo $this->__('Street Address') ?>" id="street_1" class="input-text <?php echo $_streetValidationClass ?>" />
    </div>
</li>

Or with javascript like this :

$('#street1span').each(function() {
    $(this).insertAfter($(this).parent().find('.address-field'));
});

Demo

  • Euh why the downvote ? – PЯINCƏ Aug 7 '17 at 14:14
  • I have not downvoted! will try this later and post back;) – Jurģis Toms Liepiņš Aug 7 '17 at 14:19
  • Hmm, this just puts the span above the input box and not on top of it – Jurģis Toms Liepiņš Aug 8 '17 at 9:33
  • above but not on top ? in order you want to display the span first then the input box ? – PЯINCƏ Aug 8 '17 at 9:43
  • With "on top" I mean, literally overlapping with the input text perfectly – Jurģis Toms Liepiņš Aug 8 '17 at 9:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.