Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Prevent Image Stretching

Posted by: ftbadolato Oct 18 2017, 10:38 PM

IPB Image

Above is a picture of the problem I am having. Ideally, I want that calendar image on the right side of the text box. I know the CSS is causing the issue, but I am using a template and not sure how to counteract the CSS. I don't want to change it, but prefer to simply wrap the image in a div or span to cause it to display correctly. Here is the HTML and CSS.

CODE

.contact-form {
    position: relative;
    vertical-align: top;
    z-index: 1;
    margin: 0;
    top: -10px;
}
.contact-form .txt-form {
    display: none;
}
.contact-form .coll-1, .contact-form .coll-2, .contact-form .coll-3 {
    margin-bottom: 23px;
    float: left;
    width: 200px;
}
.contact-form .coll-1 p, .contact-form .coll-2 p, .contact-form .coll-3 p {
    margin-bottom: 3px;
}
.contact-form .coll-1, .contact-form .coll-2 {
    margin-right: 10px;
}
.contact-form fieldset {
    top: 9px;
    border: none;
    padding: 0;
    width: 100%;
    position: relative;
    z-index: 10;
}
.contact-form label {
    display: block;
    min-height: 45px;
    position: relative;
    margin: 0;
    padding: 0;
    float: left;
    width: 100%;
}

<div id="contact-form" class="contact-form">
<fieldset>
<div class="coll-2">
<p>Due Date*</p>
<label class="bidduedate">
<asp:TextBox ID="txtBidDueDate" runat="server"></asp:TextBox><asp:ImageButton ID="imgPopup" ImageUrl="/img/calendar.png" ImageAlign="Middle" runat="server" />
<ajaxToolkit:CalendarExtender ID="CalendarExtender1" PopupButtonID="imgPopup" runat="server" TargetControlID="txtBidDueDate" Format="MM/dd/yyyy">
</ajaxToolkit:CalendarExtender></label>
</div>
</fieldset>
</div>


Posted by: Christian J Oct 19 2017, 05:03 AM

The above contains ASP(?) code. Can you show us the rendered HTML, as it would appear to a web browser?

Posted by: pandy Oct 19 2017, 07:01 AM

I don't think the CSS contains the declaration that makes the image stretch.

Posted by: ftbadolato Oct 19 2017, 08:32 AM

QUOTE(Christian J @ Oct 19 2017, 06:03 AM) *

The above contains ASP(?) code. Can you show us the rendered HTML, as it would appear to a web browser?


Here is the rendered code, but this will have no impact on the image:
CODE

<div class="coll-3">
                            <p>Due Date*</p>
                            <label class="workduedate">
                                <input name="ctl00$ContentPlaceHolder1$txtWorkDueDate" type="text" id="ctl00_ContentPlaceHolder1_txtWorkDueDate" readonly="readonly" /><input type="image" name="ctl00$ContentPlaceHolder1$imgPopup2" id="ctl00_ContentPlaceHolder1_imgPopup2" src="/img/calendar.png" align="middle" style="border-width:0px;" />
                                <br>
                                <span id="ctl00_ContentPlaceHolder1_errorworkduedate" class="error">*This is not a valid due date.</span> <span id="ctl00_ContentPlaceHolder1_emptyduedate" class="empty">*This field is required.</span> </label>
                          </div>


Posted by: ftbadolato Oct 19 2017, 08:33 AM

QUOTE(pandy @ Oct 19 2017, 08:01 AM) *

I don't think the CSS contains the declaration that makes the image stretch.


Well, if I put the code in a page without the CSS I shared, it doesn't stretch. When I add the CSS, it stretches. smile.gif

Posted by: Christian J Oct 19 2017, 09:43 AM

QUOTE(ftbadolato @ Oct 19 2017, 03:32 PM) *

Here is the rendered code

No, that's another part:
CODE
<div class="coll-3">


The one you posted first contained this:
CODE
<div id="contact-form" class="contact-form">
<fieldset>
<div class="coll-2">


An online sample page might be helpful.

Posted by: ftbadolato Oct 19 2017, 09:55 AM

QUOTE(Christian J @ Oct 19 2017, 10:43 AM) *

QUOTE(ftbadolato @ Oct 19 2017, 03:32 PM) *

Here is the rendered code

No, that's another part:
CODE
<div class="coll-3">


The one you posted first contained this:
CODE
<div id="contact-form" class="contact-form">
<fieldset>
<div class="coll-2">


An online sample page might be helpful.


Yeah, my bad, ignore it. It's just a typo and the same issue occurs in both columns anyway.

Posted by: ftbadolato Oct 19 2017, 10:01 AM

QUOTE(Christian J @ Oct 19 2017, 10:43 AM) *

An online sample page might be helpful.


Here is a link to the template page I am using:
http://onepropertyway.com/index-4.html

This is NOT the page I am working, but you can see all the styles. Just imagine trying to put http://onepropertyway.com/img/calendar.png to the right of one of the text boxes.

Posted by: ftbadolato Oct 19 2017, 10:32 AM

Someone on another forum suggested I change position:relative to position:static, but did not specify which instance. Also, I am concerned of the adverse effects that may have on other uses of the CSS throughout the site? I would prefer a solution that I can apply only to the use of the icon on this page.

Posted by: Christian J Oct 19 2017, 11:06 AM

QUOTE(ftbadolato @ Oct 19 2017, 05:01 PM) *

Here is a link to the template page I am using:
http://onepropertyway.com/index-4.html

That template uses several stylesheets and javascripts (that might affect styling as well).

QUOTE
This is NOT the page I am working, but you can see all the styles. Just imagine trying to put http://onepropertyway.com/img/calendar.png to the right of one of the text boxes.

It would be easier for everybody if you created a sample page. Make a static HTML copy of the page you're working on, and remove HTML and CSS little by little until all that remains is a minimal test case.


Posted by: ftbadolato Oct 19 2017, 12:15 PM

[quote]This is NOT the page I am working, but you can see all the styles. Just imagine trying to put http://onepropertyway.com/img/calendar.png to the right of one of the text boxes.[/quote]
It would be easier for everybody if you created a sample page. Make a static HTML copy of the page you're working on, and remove HTML and CSS little by little until all that remains is a minimal test case.
[/quote]

Please see my very first post. That's exactly what I did. smile.gif The issue is somewhere in that CSS.

Posted by: Christian J Oct 19 2017, 12:49 PM

QUOTE(ftbadolato @ Oct 19 2017, 07:15 PM) *

Please see my very first post. That's exactly what I did. smile.gif The issue is somewhere in that CSS.

I made a test page of that CSS and the rendered HTML from your later post, and my own test picture still looks normal.

Posted by: Christian J Oct 19 2017, 12:50 PM

QUOTE(ftbadolato @ Oct 19 2017, 03:32 PM) *

Here is the rendered code, but this will have no impact on the image:

Do you mean the image looks normal with the rendered code? unsure.gif

Posted by: ftbadolato Oct 19 2017, 01:18 PM

QUOTE(Christian J @ Oct 19 2017, 01:49 PM) *

QUOTE(ftbadolato @ Oct 19 2017, 07:15 PM) *

Please see my very first post. That's exactly what I did. smile.gif The issue is somewhere in that CSS.

I made a test page of that CSS and the rendered HTML from your later post, and my own test picture still looks normal.


Does this help? I just added the image to the template page. It does not stretch now, but still appears below the text input.
http://onepropertyway.com/index-4.html

Posted by: Christian J Oct 19 2017, 02:19 PM

I'm won't check all the stylesheets manually, but from a quick look it seems style.css makes the INPUT element 100% wide, which pushes the image down below it. Maybe you could use the CSS3 calc property to deduct the image width from the 100% INPUT width.

Or you might try using a fixed width for the INPUT instead. In browser windows wider than 1200px, the parent DIV .coll-1 is 250px wide, so a little less than that. But in browser windows narrower than 1200px it would then still end up below the INPUT, due to the responsive layout.

Posted by: ftbadolato Oct 19 2017, 04:15 PM

QUOTE(Christian J @ Oct 19 2017, 03:19 PM) *

I'm won't check all the stylesheets manually, but from a quick look it seems style.css makes the INPUT element 100% wide, which pushes the image down below it. Maybe you could use the CSS3 calc property to deduct the image width from the 100% INPUT width.

Or you might try using a fixed width for the INPUT instead. In browser windows wider than 1200px, the parent DIV .coll-1 is 250px wide, so a little less than that. But in browser windows narrower than 1200px it would then still end up below the INPUT, due to the responsive layout.


Ugh...so no way to use display:inline-block or something similar to force it on the same line?

Posted by: Christian J Oct 19 2017, 05:11 PM

Since the INPUT is 100% wide the image would currently stick out too far if you forced it on the same line. I'm sure there's a solution, the tedious part is to understand how the template works.

What's the purpose of the image? If it's just a decoration you might make it a background image of the INPUT element, but if it's meant to be clickable (to bring up a calendar?) that won't work.






Posted by: ftbadolato Oct 19 2017, 06:23 PM

QUOTE(Christian J @ Oct 19 2017, 06:11 PM) *

What's the purpose of the image? If it's just a decoration you might make it a background image of the INPUT element, but if it's meant to be clickable (to bring up a calendar?) that won't work.


It opens a calendar.

Posted by: ftbadolato Oct 19 2017, 06:36 PM

I just decided to put it next to the label instead of the input box...not ideal, but not that bad either. Thanks for the help!

Posted by: Christian J Oct 19 2017, 06:54 PM

Here's an idea using the CSS "display: table-cell" property that might be modified for the template. Not sure why the cells don't fill the entire table width though (it's been a while since I did this). unsure.gif

CODE

div {
display: table;
width: 250px;
background: pink;
}

label, img {
display: table-cell;
vertical-align: top;
background: #ccc;
}

input {
box-sizing : border-box;
width: 100%;
}

<div>
<label>
<input type="text" name="" value="">
</label>
<img src="small.gif" alt="">
</div>

Posted by: Christian J Oct 20 2017, 09:54 AM

Here's a probably better one:

CODE
div {
width: 250px;
background: pink;
}

label {
width: 100%;
background: #ccc;
}

input {width: calc(100% - 30px);}

<div>
<label>
<input type="text" name="" value="">
<img src="small.gif" alt="">
</label>
</div>

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)