• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 296
  • Last Modified:

Media Queries - Label and Content

I have prepared a working html example to give us a starting point attached.

I have this setup using CSS and a media query. A few problems:

I want there to be a vertical rule and padding between the labels and the content. But when I add padding or a margin it breaks the label, so it is now on top  of the content instead of to the left.

Capture.JPG
       .label {
            width: 30%;
            background: dodgerblue;
            text-align: right; /* when full width make label flush right */
                margin-right: 15px;
        }

Open in new window


Like so:

Capture2.JPG
the idea is that when the resolution is smaller, that the label won't be on the left, but instead will flow in the same column.

Capture3.JPG
So in short:
I need there to be padding between and a vertical rule to 100% of the height of the tallest row.

Like this:

Capture4.JPG
But when the resolution is smaller, it will flow onto the same column with the label on top of the content.

Please help and thanks!
LabelTextMediaQuery.zip
0
Starr Duskk
Asked:
Starr Duskk
  • 3
2 Solutions
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
Here is another zip file with a different method of doing the same thing. It might be closer, since it has the padding, but not the vertical rule.

Plus, I don't want to use div.text input for my style as sometimes the control may be a combobox or radio button, so I'd probably want a div around these. So I don't know that this would work at all with my needs.
MediaQuery2.zip
0
 
GaryCommented:
Without going through all your code, when you add padding and you don't declare a box-sizing method then borders/padding etc are added to the element dimensions
The solution is to use in your css
* {
    box-sizing: border-box;
}

Open in new window


This means any padding etc that are added to an element are contained within the elements size i.e. if you add 10px padding to a 200px box then the box stays 200px with 10px padding inside it.

Further reading
http://learnlayout.com/box-sizing.html
http://www.paulirish.com/2012/box-sizing-border-box-ftw/

p.s.
In the future just post the code, it's too much hassle to download a zip, extract etc etc.
0
 
Slick812Commented:
greetings  BobCSD, , I have looked at your HTML and CSS for the  ZIPPED html pages you have here, I also read your descriptions for the way you say that you "need" the labels and inputs to be displayed in the wider view as two columns and in a narrower view as one column, however, your descriptions and "image views" are NOT THE SAME for the different sections, as in the image that you have *country, other state,  and  *city , there is NOT a blue background for the labels, AND you have a Blue vertical divider BAR between the labels and the inputs, this Blue BAR can be separate problem than the labels and the inputs positioning in columns.

first I will comment on your CSS, you try and use the   float: left:  for the labels, but using the CSS  float, takes that element OUT of the container "relative" positioning for the container and surrounding elements, which can cause problems for somewhat dynamic alterations in column setups.

Next and more Important to me, for column display, ,  is the Inconsistent widths you have in the inputs in your second ZIP example, , as to have a textarea that is much wider than the two text inputs, and yet you try and use a -
        @media (max-width: 350px)
even though the two column display is more like  530 pixels wide with the texarea having the  cols="50"

Below in some code that works for me, as far as I can understand your mixed up requirements. Instead of CSS float, I use the CSS  display:inline-block;  which does NOT take that element OUT of the container "relative" positioning for the container and surrounding elements, AND will automatically drop the elements into a single column display IF the container <div> width is smaller.

since the display of the two columns is less  530 pixels wide, I use this -
          @media screen and (max-width: 524px)
since the @media screen uses the pixel standard I had to change the label and text area widths to a pixel definition to guarantee some consistency in display.
FOR DEVELOPMENT and seeing the container, I have placed a dashed border on the .formDiv container, so developer can SEE the result, remove the border in final work.

<!DOCTYPE html>
<html><head><title>Dynamic labels</title>
<style type="text/css">
html, body{margin: 0;
padding: 0;
height: 100%;}

body {background: #fffadf;}

input:active,
input:focus,
input:hover,
textarea:active,
textarea:focus,
textarea:hover {background-color: #ffedd8; border-color: #c76; }

.inblk {display:-moz-inline-box;-
  moz-box-orient:vertical;
  display:inline-block;
  vertical-align:top;
  zoom:1;
  *display:inline;}
  
.formDiv {width:33em;
 border:1px dashed #0a0;}
 
.bluLabel {width:96px;
 padding:0 4px;
 text-align: right;
 background: dodgerblue;
 margin-right:-1px}
 
.leftLine {padding-left:3px;
 border-left:2px solid #008;
 padding-bottom:1em;}

@media screen and (max-width: 524px){.formDiv{width:414px;} .bluLabel{width:405px; text-align:left;} .leftLine{border: 0;}}
</style>
</head>
<body>
<h3 style="text-align: center; color:#b00;">Dynamic labels on Inputs</h3>

<div class="formDiv">
  <div>
    <label for="name1" class="inblk bluLabel">Name</label>
	  <div class="inblk leftLine">
        <input type="text" size="30" name="name1" id="name1" />
      </div>
  </div>
  <div>
    <label for="email1" class="inblk bluLabel">E-mail</label>
	<div class="inblk leftLine">
      <input type="text" size="25" name="email1" id="email1" />
	</div>
  </div>
  <div>
    <label for="comment1" class="inblk bluLabel">Comment</label>
	<div class="inblk leftLine">
      <textarea name="comment1" id="comment1" style="width:404px; height:90px;"></textarea>
	</div>
  </div>
</div>
<!DOCTYPE html>
<html><head><title>Dynamic labels</title>
<style type="text/css">
html, body{margin: 0;
padding: 0;
height: 100%;}

body {background: #fffadf;}

input:active,
input:focus,
input:hover,
textarea:active,
textarea:focus,
textarea:hover {background-color: #ffedd8; border-color: #c76; }

.inblk {display:-moz-inline-box;-
  moz-box-orient:vertical;
  display:inline-block;
  vertical-align:top;
  zoom:1;
  *display:inline;}
  
.formDiv {width:33em;
 border:1px dashed #0a0;}
 
.bluLabel {width:96px;
 padding:0 4px;
 text-align: right;
 background: dodgerblue;
 margin-right:-1px}
 
.leftLine {padding-left:3px;
 border-left:2px solid #008;
 padding-bottom:1em;}

@media screen and (max-width: 524px){.formDiv{width:414px;} 
  .bluLabel{width:405px; text-align:left;} 
  .leftLine{border: 0;}
  }
</style>
</head>
<body>
<h3 style="text-align: center; color:#b00;">Dynamic labels on Inputs</h3>

<div class="formDiv">
  <div>
    <label for="name1" class="inblk bluLabel">Name</label>
	  <div class="inblk leftLine">
        <input type="text" size="30" name="name1" id="name1" />
      </div>
  </div>
  <div>
    <label for="email1" class="inblk bluLabel">E-mail</label>
	<div class="inblk leftLine">
      <input type="text" size="25" name="email1" id="email1" />
	</div>
  </div>
  <div>
    <label for="comment1" class="inblk bluLabel">Comment</label>
	<div class="inblk leftLine">
      <textarea name="comment1" id="comment1" style="width:404px; height:90px;"></textarea>
	</div>
  </div>
</div>

</body></html>
</body></html>

Open in new window

ask questions if you need more information.
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
Slick,

I apologize. I meant to say the second one was another one I found on the web. I didn't create that one, but altered it and tried to make it work, but it was setup for inputs, and I need it for anything. So the original author had the weird widths, I guess to show how it wraps down on longer lines, etc. And didn't have the vertical rules, etc.

I just didn't know which one might be easier to work with from a starting point.

I tried both.

Gary,

Yes, some people flip out if I paste code in and tell me to put it in a zip and others ...

Slick,
Thank you for your educational post and helping me on this. Fantastic!
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
Slick, thanks! I added a combobox and it works like a charm for that as well! thanks!
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now