Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Resolution and textarea problem

    Hi guys!
    I have a homework for an internship and I have to replicate a webpage from a picture. Here's their picture: image and here's what I got: mystuff.

    I don't know how to put those textareas near the text when the resolution is high. At 1024x768 (which is the minimum imposed) it looks good, but when I maximize the window, this happens. :/

    Here's the code: http://jsfiddle.net/jQmM4/ . I'm not sure about it, but can someone help?

    Cheers!

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    First of all, you need to use labels along with form controls, for increased accessability and usability (you can click the label text and the associated form control is focused). Plus, you can use that element to style it with CSS, too.

    Now, if you use percent units this will only work if the layout is fixed or if everything is set in percent. In your case the “label” text (which you haven’t marked up with label elements) is supposed to be fixed width and the text area is flexible, so percents don’t work unless you use a trick. One way to do it would be as follows.

    The HTML would ideally look like this (in any case):
    Code:
    <div class="ta">
    	<label for="textarea1">Basic function and Scope <span>*</span></label>
    	<textarea id="textarea1" cols="80" rows="3"></textarea>
    </div>
    I’ve used the class “ta” for demonstration here because I don’t know how the preceding form code looks like (since you didn’t post all your code). You could as well do without the class if you use the right CSS selectors.

    The CSS I used looks like this:
    Code:
    .ta {padding-left: 160px;}
    .ta label {
    	float: left;
    	margin-left: -160px;
    	max-width: 150px;
    }
    .ta label span {color: red;}
    .ta textarea {
    	width: 100%;
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
    	box-sizing: border-box;
    }
    The textarea takes 100% of the parent element’s width. I have now decreased that width with a left padding and floated the label left, dragging it over the padding area with a negative margin. You could also use absolute positioning but this is better.

  • Users who have thanked VIPStephan for this post:

    dude_ (02-08-2014)

  • #3
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    So, all in all, I have to replace every point I have in there and give that "ta" name?

    I'll try it first to see if it works, as you said, by replacing all the stuff. If it doesn't, I will post the code.

    Thank you!

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Your HTML:
    Code:
    <p>Basic function and Scope <span style="color:red">*</span>
           <textarea name="text" cols="80" rows="3" class="intro"  style="float:right"></textarea></p>
    <br/>
    <br/>
    my HTML:
    Code:
    <div class="ta">
    	<label for="textarea1">Basic function and Scope <span>*</span></label>
    	<textarea id="textarea1" cols="80" rows="3"></textarea>
    </div>
    As said, you don’t need the class “ta”, I just added it for demonstration. But it doesn’t hurt either so it’s your call.
    And you don’t need the <br/> tags since you can also (and better) adjust the spacing with CSS.

    And yes, this goes for all textareas. I just took that one as example.

  • #5
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Did what you said (it appears to work just fine), but the writing is all messed up. I tried with margin and padding but nothing helped..
    Attached Thumbnails Attached Thumbnails Resolution and textarea problem-untitled.jpg  

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Would you mind posting your entire code (or a link to an example)? Images don’t help at all here.

  • #7
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    True that.

    HTML
    Code:
    <div class="ta">
    
    <label for="textarea1">Basic function and Scope <span style="color:red">*</span></label>
        <textarea id="textarea1" cols="80" rows="3"></textarea>
    
    <label for="textarea1">Task and duties <span style="color:red">*</span></label>
        <textarea id="textarea1" cols="80" rows="3"></textarea>
    	
    <label for="textarea1">Work contacts <span style="color:red">*</span></label>
        <textarea id="textarea1" cols="80" rows="3"></textarea>
    
    	
    <label for="textarea1">Independence of operation <span style="color:red">*</span></label>
        <textarea id="textarea1" cols="80" rows="3"></textarea>
    	
    <label for="textarea1">Supervisory responsability <span style="color:red">*</span></label>
    
    		<input type="radio" name="tip" value="Supervision"
    		checked="checked" /> Supervision
    		<input type="radio" name="tip" value="Direction"
    		checked="checked"/>Direction
    		<input type="radio" name="tip" value="None" />
    		None		
    		
    			<div id="left">
    				<textarea name="text" cols="50" rows="3"></textarea>
    			</div>
             
    			<div id="one">
    				<p>Total number of subordinates &nbsp 
    				<input name="text" cols="40" rows="1" style="float:right "></input></p>
    			</div>
    	
    <label for="textarea1">Physical effort <span>*</span></label>
    	   <textarea name="text" cols="80" rows="3"></textarea>
    	   
    <label for="textarea1">Work conditions <span>*</span></label>
    	   <textarea name="text" cols="80" rows="3"></textarea>
    		
    	   
    	   
    </div> <!--content/-->

    CSS
    Code:
    .ta {padding-left: 160px;
    	margin-top:100px;
    	font-family:Arial;
    	font-size:12px;
    	
    	}
    
    .ta label {
    	float: left;
    	margin-left: -165px;
    	max-width: 160px;
    	
    	
    	}
    
    .ta label span {color: red;}
    
    .ta textarea {
    	width: 99%;
    	margin-left:10px;
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
    	box-sizing: border-box;
    	margin-bottom:10px
    	}
    
    .intro2 { width:64%;
    background-color:#fff;}
    
    #left textarea{margin-top:10px;
    width:45%;
    position:relative;}
    
    #one {
      float: right;
      width: 50%;
      position:relative;
    	margin-top:-80px;
      }
    #one p{text-align:right}

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,592
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Wrap the <div class="ta"> around each label/input individually - not around all of them together.

    Also each id needs to be unique and the for in each label has to reference the id in the corresponding input.

    All your other form fields need labels as well - not just the textareas.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •