I am having trouble to make container to take certain width using percentage value. When using max-width to certain % it is overflowing out of the window. If i use fixed width it's working as expected.
As i want make it responsive i want to use % value. How can i achieve the result?
HTML:
<div class="select-address">
<div class="address-radio-container radio-element-container">
<div class="address-radio">
<div class="address-radio-element radio-element">
<input id="address-tmirddv" name="address" type="radio" class="radio-input" value="cash">
<div class="radio-input-check"></div>
<div class="label-container">
<label for="address-tmirddv" class="radio-label">
<p class="type">Radio</p>
<p class="details">Radio</p>
</label>
</div>
</div>
<div class="address-radio-element radio-element">
<input id="address-y4x3jr" name="address" type="radio" class="radio-input" value="dp">
<div class="radio-input-check"></div>
<div class="label-container">
<label for="address-y4x3jr" class="radio-label">
<p class="type">Radio</p>
<p class="details">Radio</p>
</label>
</div>
</div>
</div>
</div>
</div>
SCSS:
.address-radio {
width: 90%;
overflow: auto;
white-space: nowrap;
.address-radio-element {
display: inline-block;
padding: 12px;
border: 1px solid transparent;
border-radius: 4px;
background-color: $color-grey-lighter;
.label-container {
width: 224px;
margin-left: 7px;
}
}
}
While using % value in width:
While using px value: (Want to achieve result like this using %)
When you set width 100%. You most remove margin,padding and border of this div. If set padding,margi,border then you must write like this:
Width : calc (100% - 26px)
Related
i want to align the text of an input type time in Firefox.
The following code works in Chrome and Edge but not Firefox:
<input type="time" value="00:00">
input {
text-align: center;
}
here is a codepen
Here is an alternative that would accomplish the same result. Place the input inside of a div and a center the div's text. The following results in a consistent display on Chrome, Edge, and Firefox :
input {
border: none;
}
.container {
border: solid 1px #ccc;
text-align: center;
width: 300px;
}
<div class="container">
<input type="time" value="00:00">
</div>
Even not the exactly solution, you can try to use a <div> element as the parent of <input> element and use CSS for centering that <div> element such as below. It will work on both Firefox and Chrome.
<div class="center">
<input type="time" value="00:00">
</div>
.center {
text-align: center;
}
It's Working on any Browser.
<div style = "text-align: center; width: 100px; padding: 50px;">
<input type="time" value="00:00">
</div>
In Bootstrap:
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<input type="time" value="00:00">
</div>
</div>
</div>
I had encountered to an interesting CSS challenge. In the following code I was able to vertically aligned the text and input. The part I couldn't manage was, without breaking the vertical alignment (text - input) I need to put footer text under the input.
.container {
width: 300px;
}
.head {
display: inline-block;
vertical-align: middle;
width: 20%;
}
.col {
display: inline-block;
vertical-align: middle;
}
.col input {
width: 100px;
}
<div class="container">
<div class="head">
Text
</div>
<div class="col">
<input type="text" />
</div>
<div class="col">
<input type="text" />
</div>
<div class="head"></div>
<div class="col">
Footer Text
</div>
</div>
<div class="container">
<div class="head">
Three Line Text
</div>
<div class="col">
<input type="text" />
</div>
<div class="col">
<input type="text" />
</div>
<div class="head"></div>
<div class="col">
Footer Text
</div>
</div>
Also, container div height should effect from footer text as well. So using absolute will not work for this case.
I already aware some JavaScript or CSS hack solutions. But for this case, I want to proceed with a proper way. How can we achieve this properly?
UPDATE
I forgot to mention before. Footer text could be multiple lines as well. It should cover both inputs underneath.
Flexbox can do that but it requires restructuring the HTML and altering a class or two...oh, and a pseudo-element.
.container {
width: 300px;
display: flex;
margin: 1em;
border: 1px solid red;
}
.head {
width: 20%;
display: flex;
flex-direction: column;
justify-content: center;
}
.col,
.second {
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 .25em;
}
input {
width: 100px;
}
.col:before {
content: "";
height: 1.2em; /* or whatever your line-height is */
}
<div class="container">
<div class="head">
Text
</div>
<div class="col">
<input type="text" />
<div class="foot">
Footer Text
</div>
</div>
<div class="second">
<input type="text" />
</div>
</div>
<div class="container">
<div class="head">
Three Line Text
</div>
<div class="col">
<input type="text" />
<div class="foot">
Footer Text
</div>
</div>
<div class="second">
<input type="text" />
</div>
</div>
My work seems like above. The width of left one (img) and right one (button) is fixed, and that of middle one (textarea) should be flexible.
It has to work like max-width property is given to it.
When the size of the window shrinks, the size of the textarea should also be shrunk.
But max-width property doesn't work well in this case.
When the size of the window reaches the length of A, width of the textarea should be start shrinking, but it doesn't.
Instead, it starts shrinking when the width of the window reaches the length of B.
Below shows what happens when the window shrinks.
What should I do for this problem with css? Or do I need to use javascript?
html
<div id="div_target">
<p>
<img src="~~~"/>
</p>
<p>
<textarea id="target" cols="40"></textarea>
</p>
<p>
<input type="submit" value="등록"/>
</p>
</div>
css
#div_target{
width:60%;
}
#target{
max-width:60%;
}
If I understand correctly your problem is shrinking the width of textarea in the small size devices.
Try below structure:
<div class="col-xs-12 target">
<div >
<img src="~~~"/>
</div>
<div>
<textarea></textarea>
</div>
<div>
<input type="submit" value="등록"/>
</div>
</div>
.target{
text-align: center;
display: inline-block;
}
textarea{
width: 60%;
}
I believe you want to have the element inline in the "md" and "lg" so you can define:
display: inline-block;
for the elements in the large devices.
Here's one method using CSS flexbox:
#div_target{
display: flex;
width: 60%;
}
#div_target > * {
margin: 5px;
}
<div id="div_target">
<img src="http://placekitten.com/g/50/50">
<textarea id="target" cols="40"></textarea>
<input type="submit" value="등록" />
</div>
jsFiddle
.target{
text-align: center;
display:block;
}
textarea{
width: 60%;
}
<div class="col-xs-12 target">
<div >
<img src="http://orig05.deviantart.net/8ac4/f/2011/297/5/6/hammer_bro__by_yoshigo99-d4duynn.png"style="width:50px;height:50px;"/>
</div>
<div>
<textarea></textarea>
</div>
<div>
<input type="submit" value="등록"/>
</div>
</div>
This page has questions on the left, and radio buttons for ranking/scale answers on the right. It's designed so that if the question text is too long too fit in the left pane it just keeps going and pushes the radio buttons down a line beneath the question text. I emphasized if because I want to keep it that way, so it only moves if the text is long, I don't want to set something fixed so that every question does the same thing.
The problem is, the N/A radio button doesn't adjust like the other radio buttons. Is there a way to force it to move down with the others? I've tried surrounding the two sections with a div with vertical align bottom but that didn't work. Maybe I am doing something wrong but whatever I've read with regards to vertically aligning inner divs doesn't seem to accomplish this. Is it possible to fix this?
https://jsfiddle.net/x5y49d0n/
.qg {
width: 700px; /* this is only to demonstrate a smaller screen */
padding-top: 10px;
margin-top: 0;
}
.qg-row {
margin-left: 10px;
margin-bottom: 10px;
overflow: auto;
}
.qg-head {
padding-top: 5px;
padding-bottom: 5px;
background-color: #fcfcfc;
}
[class*="qg-guide"] {
font-size: 11px;
min-height: 10px;
text-align: center;
float: left;
}
[class*="qg-right-section"] {
float: right;
width: 500px;
}
.qg-right-section-1 {
width: 60px;
}
.qg-right-section-5 {
width: 300px;
}
[class*="qg-guide-"] {
word-wrap: break-word;
}
.qg-guide-1 {
empty-cells: hide;
width: 100%;
min-width: 100%;
}
.qg-guide-5 {
/* replicate in mobile */
empty-cells: show;
width: 20%;
min-width: 20%;
}
.qg-guide-7 {
empty-cells: show;
width: 14.28%;
min-width: 14.28%;
}
.qg-label {
font-size: 13px;
float: left;
margin-bottom: 10px;
}
[class*="qg-input"] {
font-size: 11px;
width: 60px;
text-align: center;
float: left;
}
<div class="qg">
<div class="qg-table">
<div class="qg-row qg-head">
<div class="qg-guide-label"></div>
<div class="qg-guide qg-right-section-1">
<div class="qg-guide-1"> </div>
</div>
<div class="qg-guide qg-right-section-5">
<div class="qg-guide-7">High7</div>
<div class="qg-guide-7"></div>
<div class="qg-guide-7"></div>
<div class="qg-guide-7">Neutral4</div>
<div class="qg-guide-7"></div>
<div class="qg-guide-7"></div>
<div class="qg-guide-7">Low1</div>
</div>
</div>
<div class="qg-row">
<div class="qg-label">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.</div>
<div class="qg-guide qg-right-section-1">
<div class="qg-input-1">
<input type="radio" name="0LoMVa" value=""><br>
N/A<br>
</div>
</div>
<div class="qg-right-section-5">
<div class="qg-input-5"><input type="radio" name="0LoMVa" value="5"><br>5<br></div>
<div class="qg-input-5"><input type="radio" name="0LoMVa" value="4"><br>4<br></div>
<div class="qg-input-5"><input type="radio" name="0LoMVa" value="3"><br>3<br></div>
<div class="qg-input-5"><input type="radio" name="0LoMVa" value="2"><br>2<br></div>
<div class="qg-input-5"><input type="radio" name="0LoMVa" value="1"><br>1<br></div>
</div>
</div>
</div>
</div>
<div class="qg">
<div class="qg-table">
<div class="qg-row qg-head">
<div class="qg-guide-label"></div>
<div class="qg-guide qg-right-section-1">
<div class="qg-guide-1"> </div>
</div>
<div class="qg-guide qg-right-section-5">
<div class="qg-guide-5 qg-guide-item-0">High0</div>
<div class="qg-guide-5 qg-guide-item-1"></div>
<div class="qg-guide-5 qg-guide-item-2">Neutral2</div>
<div class="qg-guide-5 qg-guide-item-3"></div>
<div class="qg-guide-5 qg-guide-item-4">Low4</div>
</div>
</div>
<div class="qg-row">
<div class="qg-label">Far far away, behind the word mountains.</div>
<div class="qg-guide qg-right-section-1">
<div class="qg-input-1">
<input type="radio" name="W1MkXk" value=""><br>
N/A<br>
</div>
</div>
<div class="qg-right-section-5">
<div class="qg-input-5"><input type="radio" name="W1MkXk" value="5"><br>5<br></div>
<div class="qg-input-5"><input type="radio" name="W1MkXk" value="4"><br>4<br></div>
<div class="qg-input-5"><input type="radio" name="W1MkXk" value="3"><br>3<br></div>
<div class="qg-input-5"><input type="radio" name="W1MkXk" value="2"><br>2<br></div>
<div class="qg-input-5"><input type="radio" name="W1MkXk" value="1"><br>1<br></div>
</div>
</div>
</div>
</div>
This is what I want it to do:
Also, these questions are created programmatically using a template, so the divs used have to be the same, IOW I can't add a div (with an additional class) to the 1st question that fixes the issue without the 2nd question having the same div. This is the critical requirement which is making it difficult for me to find a solution. Can this be solved?
Is it possible to change DOM structure?? If yes then just try pushing
<div class="qg-guide qg-right-section-1"></div> inside
<div class="qg-guide qg-right-section-5">
code
<div class="qg-row qg-head">
<div class="qg-guide-label"></div>
<div class="qg-guide qg-right-section-5">
<div class="qg-guide-5 qg-guide-item-0">High0</div>
<div class="qg-guide-5 qg-guide-item-1"></div>
<div class="qg-guide-5 qg-guide-item-2">Neutral2</div>
<div class="qg-guide-5 qg-guide-item-3"></div>
<div class="qg-guide-5 qg-guide-item-4">Low4</div>
<div class="qg-guide qg-right-section-1">
<div class="qg-guide-1"> </div>
</div>
</div>
</div>
and change css
.qg-right-section-5 {
width: 360px;
}
.qg-right-section-1 {
width: 60px;
float: left;
}
You can achieve the effect you want by adding a clear-fix after the .qg-label class. I did this in the fiddle by manually inserting an empty <div> with the style clear:both;. You could instead use the clear-fix class of your favorite library or create you own such as:
(This is a classic clearfix example from this answer)
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Another solution is to include all radio buttons in the same parent element, give it a fixed width, and add float:right; to it and the radio element children. This should be a simple fix. I showed this in comparison to your original fiddle here - fiddle.
On my page, I need to display 10 boxes across it horizontally. Each box has a min-width of 150px and a max-width of 299px. The page should fit as many boxes as it can across the page without leaving any gaps, with each box having the same width (extending a pixel if needed due to rounding).
Example: If the width of the page is 660px, 4 boxes at 165px width should be used.
If the width of the page is 600px, 4 boxes at 150px width should be used.
If the width is 597px, 3 boxes at 199px should be used, since a box cannot go under 150px.
The remaining boxes on the bottom should have the same width of the ones above.
How can I accomplish the above?
I have a fiddle here: http://jsfiddle.net/CD4f2/1/
Note how the rows of boxes leave a gap to the right.
using the follow code (because I'm forced to)
<body>
<div id="mainPage">
<div id="bar">Width of a row of boxes should match the length of this bar.</div>
<div id="capTable">
<div class="cap" id="cap0">
<img class="capImage">
<input type="text">
</div>
<div class="cap">
<img class="capImage">
<input type="text">
</div>
<div class="cap" id="cap2">
<img class="capImage">
<input type="text">
</div>
<div class="cap">
<img class="capImage">
<input type="text">
</div>
<div class="cap" id="cap4">
<img class="capImage">
<input type="text">
</div>
<div class="cap">
<img class="capImage">
<input type="text">
</div>
<div class="cap" id="cap6">
<img class="capImage">
<input type="text">
</div>
<div class="cap">
<img class="capImage">
<input type="text">
</div>
<div class="cap" id="cap8">
<img class="capImage">
<input type="text">
</div>
<div class="cap">
<img class="capImage">
<input type="text">
</div>
</div>
</div>
body
{
background-color:black;
}
.cap
{
background-color: red;
float: left;
height: 150px;
max-width: 299px;
min-width: 150px;
}
.capImage
{
background-color:blue;
float: left;
height: 37px;
width: 37px;
}
#bar
{
background-color: orange;
}
#cap0, #cap2, #cap4, #cap6, #cap8
{
background-color: green;
}
#mainPage
{
margin: 0 auto;
max-width: 800px;
min-width: 150px;
}
I've tried this with tables also but ran into the same problems, as well as many different combination of floats, and displays, and overflows.
I believe I might be able to do this by manually specifying different resolutions in the CSS. But A more automatic approach would be preferred if possible.
I only want to use javascript as a last resort. Which I should be able to do myself.
Thanks.
I have changes your .cap divs to use % widths instead of px to make it easier to get a responsive layout.
DEMO
Main CSS Change
.cap
{
background-color: red;
float: left;
height: 150px;
width: 25%;
min-width: 150px;
}
#media only screen and (max-width: 1024px) {
.cap {
width: 50%;
}
}