The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
Reply to this topicStart new topic
> Prevent Image Stretching
ftbadolato
post Oct 18 2017, 10:38 PM
Post #1


Novice
**

Group: Members
Posts: 25
Joined: 21-June 17
Member No.: 26,440



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>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 19 2017, 05:03 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



The above contains ASP(?) code. Can you show us the rendered HTML, as it would appear to a web browser?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 19 2017, 07:01 AM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



I don't think the CSS contains the declaration that makes the image stretch.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ftbadolato
post Oct 19 2017, 08:32 AM
Post #4


Novice
**

Group: Members
Posts: 25
Joined: 21-June 17
Member No.: 26,440



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>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ftbadolato
post Oct 19 2017, 08:33 AM
Post #5


Novice
**

Group: Members
Posts: 25
Joined: 21-June 17
Member No.: 26,440



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 19 2017, 09:43 AM
Post #6


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ftbadolato
post Oct 19 2017, 09:55 AM
Post #7


Novice
**

Group: Members
Posts: 25
Joined: 21-June 17
Member No.: 26,440



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ftbadolato
post Oct 19 2017, 10:01 AM
Post #8


Novice
**

Group: Members
Posts: 25
Joined: 21-June 17
Member No.: 26,440



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 this image to the right of one of the text boxes.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ftbadolato
post Oct 19 2017, 10:32 AM
Post #9


Novice
**

Group: Members
Posts: 25
Joined: 21-June 17
Member No.: 26,440



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 19 2017, 11:06 AM
Post #10


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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 this image 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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ftbadolato
post Oct 19 2017, 12:15 PM
Post #11


Novice
**

Group: Members
Posts: 25
Joined: 21-June 17
Member No.: 26,440



[quote]This is NOT the page I am working, but you can see all the styles. Just imagine trying to put this image 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 19 2017, 12:49 PM
Post #12


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 19 2017, 12:50 PM
Post #13


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ftbadolato
post Oct 19 2017, 01:18 PM
Post #14


Novice
**

Group: Members
Posts: 25
Joined: 21-June 17
Member No.: 26,440



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 19 2017, 02:19 PM
Post #15


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ftbadolato
post Oct 19 2017, 04:15 PM
Post #16


Novice
**

Group: Members
Posts: 25
Joined: 21-June 17
Member No.: 26,440



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 19 2017, 05:11 PM
Post #17


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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.





User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ftbadolato
post Oct 19 2017, 06:23 PM
Post #18


Novice
**

Group: Members
Posts: 25
Joined: 21-June 17
Member No.: 26,440



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ftbadolato
post Oct 19 2017, 06:36 PM
Post #19


Novice
**

Group: Members
Posts: 25
Joined: 21-June 17
Member No.: 26,440



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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 19 2017, 06:54 PM
Post #20


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

2 Pages V  1 2 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 08:12 AM