I am trying with overflow-x: auto, but it is not working as it should. Where no scroll bar should be visible, it is showing horizontal scrollbar.
Vertical scrollbar(overflow-y) is working perfectly as desired, but horizontal scrollbar(overflow-x) is not working properly. Here is the JSFiddle link.
Here are some minor changes required in your classes to get it work as you expected.
.container_row
{
width: 100%;
white-space: nowrap;
display: inline-block;
margin: 0 auto;
}
#name_label
{
list-style: disc inside;
margin-left: 10px;
float: left;
color: white;
display: list-item;
width: 50%;
}
#name_text
{
color: white;
padding-left: 5px;
width: 50%;
display: inline;
}
Updated
Check this Example fiddle
You're making your #container1 larger than 100%. Change it to the following:
#container1 {
width: 100%;
padding: 10px 0;
}
Related
I have some html content with following structure:
<div class="message-container">
<p class="message-value">someVal</p>
<div class="message-attribute">someUsername</div>
<div class="message-attribute">11-09-2017 12:30</div>
</div>
So, I want to scale my message-container up when it gets long values in message.value and scale it down as far as possible to min-width in the other way.
I also wan't to specify max-width for this props.
I've done this:
.message-container {
resize: both;
margin: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
color: #ffffff;
border-radius: 20px;
min-width: 100px;
max-width: 400px;
width: auto;
height: auto;
background-color: #80CBC4;
}
.message-value {
resize: both;
float: left;
max-width: 380px;
word-wrap: break-word;
height: auto;
}
.message-attribute {
padding-left: 50px;
width: 150px;
display: block;
color: #607D8B;
}
and message-username and message-datetime has fixed width.
Finally, I'm alsways getting max-width in my message-container even when it has free space to cut it down
https://jsfiddle.net/Lwrpegqe/
As you can see in jsfiddle width is too long with following content it could be shorter
Main purpose to resize block automatically
See the solution.
.message-container {
resize: both;
margin: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
color: #ffffff;
border-radius: 20px;
min-width: 100px;
max-width: 400px;
width: auto;
height: auto;
background-color: #80CBC4;
}
.message-value {
resize: both;
float: left;
max-width: 380px;
word-wrap: break-word;
height: auto;
display: inline;
}
.message-attribute {
padding-left: 50px;
width: 150px;
display: inline;
color: #607D8B;
}
https://jsfiddle.net/Lwrpegqe/2/
Add display: inline-block; to your .message-container
Inline elements only take up the space of the content. A div is always a block element unless specified.
Give width and height in percentage (%).
Hope it will work for you.
.your-class {
width:100%;
height:100%;
}
just use w-100 in bootstrap 4 to fit to 100% width of container element
I am having an issue with the web page display on iPad. The last div jumps out at the bottom when viewed in iPad (landscape mode). See screenshot below
Here is the CSS.
div .container-home
{
float: left;
width: 290px !important;
padding: 20px;
}
img.section-icon
{
display: block;
margin-left: auto;
margin-right: auto;
width: 150px;
max-height: 150px;
}
h2.section-head
{
text-align: center;
line-height: normal;
font-size: 22px;
}
p.section-description
{
text-align: center;
}
I would really appreciate any help.
Many thanks!
Are you including a viewport?
Its because of float left and the width of them together is more than the display. You define their width for 290px and also a padding of 20px which means they're 330px and you will need a display width of 1320px at least.
Try using a gridsystem for them or give them a width value in per cent.
If you don't know what gridsystem to use, I recommend Skeleton because it is very light.
EDIT: Don't use !important because then you cannot change the value anymore !important will overwrite any other rule
Don't use hard value for width, example
div .container-home
{
float: left;
width: 20% !important;
padding: 20px;
}
img.section-icon
{
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
max-height: 150px;
}
h2.section-head
{
text-align: center;
line-height: normal;
font-size: 22px;
}
p.section-description
{
text-align: center;
}
When using overflow: auto on an element, I am noticing a performance issue. I have tried translateZ(0) and backface-visibility: hidden but neither solved the issue.
<div id="testA">
<ul>
<li>...</li>
</ul>
</div>
CSS:
div {
width: 12em;
background: #c6c6c6;
padding: 0.5em;
float: left;
margin-right: 1em;
}
ul {
margin: 0;
}
#testA ul {
border-radius: 6px;
background: #f6f6f6;
height: 6em;
overflow: auto;
}
The issue is actually caused by the border-radius. Having overflow: auto or overflow: scroll on an element which has a border-radius causes paint storms and to repaint on scroll.
It would be suggested to remove the border-radius from such elements completely.
Demo: http://codepen.io/kevinfarrugia/pen/KgAYyE
CSS:
#testB .container {
border-radius: 6px;
background: #f6f6f6;
display: inline-block;
padding: 0;
}
#testB ul {
height: 6em;
overflow: auto;
}
The jsfiddle for the code can be found here: http://jsfiddle.net/c4rz0hk1/
The nav-wrapper at the bottom should be centered below the dividing line div at the bottom of the page. The works correctly in Firefox, but in Chrome it placed to the r-hand side of that same line. This is strange as the wrapper is set to 1024px anyways...
Here's a snippet of the css code:
footer {
text-align: center;
width: 1024px;
}
#nav-wrapper {
display: -moz-inline-stack;
display: inline-block;
text-align: center;
width: 900px;
*display: inline;
}
Because footer has floated children, a overflow:hidden should be applied to it so it properly contains them, also your bottom nav needs to have floats cleared as it's siblings are floating causing it to 'go with the flow' (lame joke, sorry I couldn't stop myself :P).
To center the nav simply apply a margin: 0 auto; to it after clearing the floats.
Here's the updated css that I believe works according to your requirements -
footer {
overflow: hidden;
text-align: center;
width: 1024px;
}
#nav-wrapper {
clear: both;
display: block;
margin: 0 auto;
padding: 10px 0; /* Some padding to give the footer some vertical breathing space */
text-align: center;
width: 900px;
}
Updated fiddle: http://jsfiddle.net/c4rz0hk1/1/
Try this:
#-moz-document url-prefix() {
#nav-wrapper {
display: -moz-inline-stack;
text-align: center;
width: 900px;
}
}
#nav-wrapper {
display: inline-block;
text-align: center;
width: 900px;
}
I have been stuck with this div in the header wrapping to the next line when the window is resized. You can view it at http://www.commexfx.com . The right div in the header which includes the search box etc is wrapped to the next line when resizing the window. I tried everything: changing position, display, white-space, etc, but nothing. the structure is like this:
<div id="header">
<div id="logo"> </div>
<div class="top-widget"></div>
</div>
And the CSS code for the time being is:
#header {
margin: 0 auto;
/* max-width: 960px; */
width: 960px !important;
height: 100px !important;
border: 1px solid blue;
background-color: #ffffff;
white-space: nowrap !important;
}
#logo {
float: left;
z-index: 9999999;
margin-bottom: 20px;
width: 360px;
display: inline;
border:1px solid green;
padding: 0 !important;
margin: 0 !important;
}
.top-widget {
background: none;
border: none;
/*clear: right;*/
float: right;
height: 95px;
text-align: right;
display: inline;
width: 590px !important;
border: 1px solid yellow;
padding: 0 !important;
margin: 0 !important;
}
Would appreciate any help. Also searched the forums here and tried every possible solution I could find but nothing.
Thanks
Add min-width:960px to your css #header declaration.
Replace your css with these new ones. Floating two elements, one right and one left will make them wrap so I would use inline-block.
You don't need position:relative unless you are positioning elements within that div as absolute so you can remove those as well. Same with z-index.
Also, you don't need !important unless you have other styles overriding this. I try and use it sparingly.
#header {
margin:0 auto;
width:960px;
}
#logo {
margin-bottom: 20px;
width: 360px;
display: inline-block;
}
#logo img {
vertical-align: inherit;
}
.top-widget {
text-align: right;
width: 570px;
display: inline-block;
}