Prevent Image Stretching |
Prevent Image Stretching |
ftbadolato |
Oct 18 2017, 10:38 PM
Post
#1
|
Novice Group: Members Posts: 25 Joined: 21-June 17 Member No.: 26,440 |
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> |
Christian J |
Oct 19 2017, 05:03 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,656 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?
|
pandy |
Oct 19 2017, 07:01 AM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
I don't think the CSS contains the declaration that makes the image stretch.
|
ftbadolato |
Oct 19 2017, 08:32 AM
Post
#4
|
Novice Group: Members Posts: 25 Joined: 21-June 17 Member No.: 26,440 |
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> |
ftbadolato |
Oct 19 2017, 08:33 AM
Post
#5
|
Novice Group: Members Posts: 25 Joined: 21-June 17 Member No.: 26,440 |
|
Christian J |
Oct 19 2017, 09:43 AM
Post
#6
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
|
ftbadolato |
Oct 19 2017, 09:55 AM
Post
#7
|
Novice Group: Members Posts: 25 Joined: 21-June 17 Member No.: 26,440 |
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. |
ftbadolato |
Oct 19 2017, 10:01 AM
Post
#8
|
Novice Group: Members Posts: 25 Joined: 21-June 17 Member No.: 26,440 |
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. |
ftbadolato |
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.
|
Christian J |
Oct 19 2017, 11:06 AM
Post
#10
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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. |
ftbadolato |
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. The issue is somewhere in that CSS. |
Christian J |
Oct 19 2017, 12:49 PM
Post
#12
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
|
Christian J |
Oct 19 2017, 12:50 PM
Post
#13
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
|
ftbadolato |
Oct 19 2017, 01:18 PM
Post
#14
|
Novice Group: Members Posts: 25 Joined: 21-June 17 Member No.: 26,440 |
Please see my very first post. That's exactly what I did. 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 |
Christian J |
Oct 19 2017, 02:19 PM
Post
#15
|
. Group: WDG Moderators Posts: 9,656 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. |
ftbadolato |
Oct 19 2017, 04:15 PM
Post
#16
|
Novice Group: Members Posts: 25 Joined: 21-June 17 Member No.: 26,440 |
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? |
Christian J |
Oct 19 2017, 05:11 PM
Post
#17
|
. Group: WDG Moderators Posts: 9,656 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. |
ftbadolato |
Oct 19 2017, 06:23 PM
Post
#18
|
Novice Group: Members Posts: 25 Joined: 21-June 17 Member No.: 26,440 |
|
ftbadolato |
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!
|
Christian J |
Oct 19 2017, 06:54 PM
Post
#20
|
. Group: WDG Moderators Posts: 9,656 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).
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> |
Lo-Fi Version | Time is now: 23rd April 2024 - 01:42 AM |