So I was trying to align a textarea inside of a div using the padding property:
#content {
background: #FFFFFF;
width: 80%;
height: 800px;
margin: 4em auto;
padding: 20px;
border-radius: 2px;
}
textarea {
width: 100%;
height: 790px;
}
But it appears that the sides are uneven even so:
I was wondering how I could fix this so the sides are even?
BONUS QUESTION: How can I make it so the text box is not scrollable if the text amount goes over the box size?
On the textarea set the border to 'none'. Edit - set padding to 0
textarea {
border: none; /*optional */
padding: 0;
height: 790px;
width: 100%;
}
to remove the scrollbars add overflow: hidden
textarea {
border: none;
height: 790px;
overflow: hidden;
width: 100%;
}
Make sure you always reset before adding ANY styles. Each browser comes with it's own set of 'defaults', so it can make your site vary from browser to browser (and add unwanted spacing, such as your issue).
Check this link http://meyerweb.com/eric/tools/css/reset/
You can put that at the top of your main style sheet or as the first external to load.
Related
I have the following HTML code:
<textarea type="text" class="dlk_q" rows="2" cols="98%" name="q[]">
in a page that has other stylesheets but I added this CSS right before the textarea in my HTML:
textarea, .dlk_q {
width: 98%;
height: 50px !important;
}
however the height of the textarea appears to be much bigger than 50 (ie the height is ignored)
What can I do about this?
Option height will be ignored if there is also min-height that has bigger value, because this is was it was designed for.
Docs: https://www.w3schools.com/cssref/pr_dim_min-height.asp
Based on demo that you provided in comments, you have this block in CSS:
textarea {
font-size: 12px;
line-height: 21px;
color: #444;
border: 1px solid #e1e1e1;
width: 100%;
max-width: 100%;
height: 168px;
min-height: 168px; // HERE
padding: 6px 9px;
}
Like you see, there is min-height: 168px;.
All you have to do is to remove this, or overwrite it if for some reason you cannot do this.
textarea, .dlk_q {
width: 98%;
height: 50px !important;
min-height: 0 !important; // ADD THIS
}
Since there was a min-heigth setting I've reset it like this:
textarea {
min-height:initial; /* resets the value set by theme */
}
Codepen link: [removed for privacy]
(Ignore the search button, I am mainly concerned with results displayed within it's parent element of #results_container).
On the actual app, results will be generated based on a search term,
I have the overflow set to "scroll", but as you can see, the bottom result still overflows. What gives?
#results_container {
height: 430px;
overflow: scroll;
margin-top: 5px;
}
The unwanted "bottom result still overflows" seems to be due to the height: 100%; CSS definition for the #wrapper div.
If you remove "height: 100%; from #wrapper, I think you'll see the results you were looking for.
Also, notice that the #wrapper div expands and collapses as the browser's display is expanded and collapsed. Once the height: 100%; is removed from #wrapper, the #wrapper height does not change.
I made a fork from your codepen.
#sidebar {
border: 1px solid black;
width: 40%;
margin-top: 22px;
height: 93%;
overflow-y: hidden;
}
#results_container {
height: 430px;
overflow: auto;
margin-top: 5px;
}
Here the full example: codepen fork
I just finished the landing page for a nonprofit's holiday campaign. I am having a little trouble with some little finishing touches.
Currently, there is extra white space on the right side of the page triggering the horizontal scroll bar in browsers. I am not sure why, I'd like for the page width to adjust to screen size along with the elements.
Also, I am having trouble with the styling of the four images of the people being featured. I'd like the images to display on the same row with no spacing in between when screen is minimum 1200 pixels, each image is 300 x 300 pixels. Otherwise, I'd like them stacked one on top of each other centered on the screen (for mobile). They are stacking, but are displayed to the left.
I am not the savviest of programmers as I am NOT a web developer. I am actually a the Social Media Specialist for the nonprofit. I appreciate your help.
Page can be accessed here:
https://secure3.convio.net/little/site/SPageNavigator/Holiday%20Page%20Wrapper/HolidayCampaign2015.html
Best thing you can do is wrap everything inside tag to a new div & set overflow:hidden;
<body>
<div class="wrapper">
Every other HTML will go here...
</div>
</body>
CSS
.wrapper {
overflow: hidden;
}
ALSO: It is not best practice to call scripts/css inside body tag. Those should be called inside tags
Try placing everything in a Wrapper div with the folowing css:
.container {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
You could also try playing around with:
overflow-x: hidden;
For the whitespace (and scrollbar being displayed), add CSS for .row { margin: 0 !important; }. You currently have -10px +10px... I never understood why that was the bootstrap standard.
For centering the images, you want to add margin: 0 auto; to the parent div.box of the image.
The problem is all this margin fudging:
#media (min-width: 480px)
.row {
margin-left: -10px;
margin-right: -10px;
}
.row, #content-wrapper .fc-section__inner, .fc-section-outer .fc-section-row, #testimonial .fc-section__inner, footer .fc-section__inner {
margin-left: -15px;
margin-right: -15px;
}
.row, #content .fc-section__inner, #testimonial .fc-section__inner, footer .fc-section__inner {
margin-left: -15px;
margin-right: -15px;
}
After I turned all that off, things seemed to line up correctly.
Apply this to your CSS maybe styles.css it looks to be the stylesheet with the highest priority.
html,
body {
box-sizing: border-box;
width: 100vw;
height: 100vw;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/* place this div right aftter thr <body> and before the </body> */
#jar {
width: 100%;
height: 100%;
position: absolute;
margin: 0 auto;
overflow-y: auto;
}
UPDATE
I forgot to post a solution for your images. This code applies to an element wrapped around the images. Most people use a <div>, but I'm using a <figure> since it's semantically proper.
Using max-content on a container like .frame makes it act like shrink wrap. You need to use the vendor prefixes which is a pain as you can see you have to write out height and width 3 times each.
You might have to use negative margins and reset padding and borders to 0 in order to get rid of the space in between the images.
.frame {
width: -moz-max-content;
width: -webkit-max-content;
width: max-content;
height: -moz-max-content;
height: -webkit-max-content;
height: max-content;
margin: 0 auto;
max-width: 100%;
height: auto;
border: 0;
}
.frame img {
padding: 0;
margin: -2px;
border: 0;
display: inline-block;
width: 24%;
height: auto;
}
<figure class="frame">
<img src="http://placehold.it/150x85/000/Fff.png&text=FIRST" />
<img src="http://placehold.it/150x85/048/Fee.png&text=SECOND" />
<img src="http://placehold.it/150x85/fa8/375.png&text=THIRD" />
<img src="http://placehold.it/150x85/9a7/a10.png&text=FOURTH" />
</figure>
If you go here you will see at the very bottom a light gray box that says "Partners". While the site is in full screen mode everything looks correct but when you edit your browser and make the width smaller then it switches to have an image on each line. It appears to happen when the max-width of the DIV gets below 1000px which you can see from the below I have the CSS set to be a max-width of 1000px or 95% of the browser width. Any ideas on how I can fix this?
.footer-full-row {
padding-left: 20px;
width: 95%;
max-width: 1000px;
margin: 0px auto 0px auto;
color: #fff;
background:gray;
}
In your responsive.css file, you have media queries that set all img elements to display: block;. You could override that using something like
.footer-widget img {
display: inline-block;
}
If I understand you right, you want the images to not display in a separate row each, so you need to add this css property to .textwidget img :
.textwidget img{
display:inline-block;
}
This will make it wrap anyway,in order to leave the size of the images as is, but you'll not get each picture in a separate ligne, it'll be wrapping according to the need of the page.
In your style.css change:
#footer .textwidget {
background: none;
margin-bottom: 26px;
padding: 0px;
overflow: hidden;
}
to this:
#footer .textwidget {
background: none;
margin-bottom: 26px;
padding: 0px;
overflow: hidden;
display: flex;
}
My situation:
On my page I have multiple collapsible panels in the right hand column of my main content.
At the moment what happens is when I expand the panel (which contains a large amount of text) it goes off the page.
Therefore meaning that the user can't read it. This due the fact that the height is hard coded.
Now what I want to happen is when the div expands, if it reaches the max height of the page, the page height expands to incorporate all of the text.
Question:
Is there a way to make it possible that the page height expands along with the div?
My CSS:
.container {
width: 1000px;
margin: 0px auto;
background-color:White;
height: 0px auto;
}
#page {
overflow: hidden;
width: 900px;
padding: 0px 50px 50px 50px;
background-color: #FFFFFF;
}
#content {
float: right;
width: 580px;
}
Thankyou for any suggestions
Instead of using height you could try to set position to "absolute" and 0px top and bot on the .container?
.container {
width: 1000px;
margin: 0px auto;
background-color:White;
top: 0px;
bottom: 0px;
}
You can make .container a clearfix so it will expand to the size of the floated element inside of it. Here's a great article on using clearfix.
.container {
width: 1000px;
margin: 0px auto;
background-color:White;
height: 0px auto;
}
.container:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
That code will work for everything outside of IE6&7. If you need tose too just take a look at the article.
Never mind guys, I solved it....It was due to the fact that i was positioning the div with a relative height and width, so i just used margin-top instead.
Thanks to everyone