Solved

Media Queries - Label and Content

Posted on 2014-11-16
5
177 Views
Last Modified: 2014-11-20
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
Comment
Question by:BobCSD
  • 3
5 Comments
 
LVL 1

Author Comment

by:BobCSD
Comment Utility
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
 
LVL 58

Assisted Solution

by:Gary
Gary earned 25 total points
Comment Utility
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
 
LVL 33

Accepted Solution

by:
Slick812 earned 475 total points
Comment Utility
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
 
LVL 1

Author Comment

by:BobCSD
Comment Utility
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
 
LVL 1

Author Closing Comment

by:BobCSD
Comment Utility
Slick, thanks! I added a combobox and it works like a charm for that as well! thanks!
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now