Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Media Queries - Label and Content

Posted on 2014-11-16
5
205 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:Starr Duskk
  • 3
5 Comments
 
LVL 2

Author Comment

by:Starr Duskk
ID: 40446290
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
ID: 40448886
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 34

Accepted Solution

by:
Slick812 earned 475 total points
ID: 40450537
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 2

Author Comment

by:Starr Duskk
ID: 40456136
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 2

Author Closing Comment

by:Starr Duskk
ID: 40456144
Slick, thanks! I added a combobox and it works like a charm for that as well! thanks!
0

Featured Post

Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
parse url to form? 7 25
How to check if a session is disconnected in php 9 32
Override MS CSS in SharePoint Online Modal Form 19 45
Using Specialized Fonts in CSS 1 24
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

828 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