How do you make a textarea with no border and takes up all of the space it can?
Thanks everybody!
Here it is:
<style type="text/css">
textarea.test
{
width: 100%;
height: 100%;
border-color: Transparent;
}
</style>
<textarea class="test"></textarea>
Related
I noticed the scrolling functionality is different when using a flexbox based layout vs a position: fixed footer. The fixed footer is much smoother and shows a scrollbar. Flexbox isn't smooth at all, and does not show the scrollbar. I'd much prefer to use flexbox for my layout, but want the nicer scroll. Is there any way to achieve it with flexbox?
I'm testing on IOS 10 Iphone 7. Happens on both chrome and safari
Flexbox example
Fixed footer example
HTML:
<html>
<head>
<meta name=viewport content="width=device-width,initial-scale=1">
</head>
<body>
<div id='main'>
...lots of content so it would scroll
</div>
<nav class="footer">footer</nav>
</body>
</html>
Flexbox method:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
-webkit-flex-direction: column;
flex-direction: column;
display: flex;
}
#main {
-webkit-flex: 1 1 auto;
overflow-y: auto;
min-height: 0px;
}
.footer {
height: 72px;
min-height: 72px;
background-color: blue;
}
Fixed footer method:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#main {
padding-bottom: 72px;
}
.footer {
position: fixed;
bottom: 0;
height: 72px;
min-height: 72px;
width: 100%;
background-color: blue;
}
there's nothing to do with Flexbox.it's only the problem about overflow.so add this : -webkit-overflow-scrolling: touch; will work.
Trying to get a logo onto a website. Eventually use it as a link to the main page. But it wont even show up when I use css. It does link when I use HTML So i know its not the image. CSS is in its own folder, and Image is in its own folder. So I dont think i have the url incorrect.
CSS
.logo {
background-image: url(../images/logo.png);
display:block;
margin: 0px auto;
padding: 0px 15px 0px 15px;
border: none;
width: 1000px;
height: 100px;
}
HTML
<body>
<div class="logo">
</div>
</body>
Feel like Ive tried everything.
HERE IS THE ANSWER
css
.logo {
background: url(../images/logo.png) ;
background-size: 200px 200px;
width: 200px;
height:200px;
}
Try changing background-image to background and adding quotation marks.
.logo{
background: url('../images/logo.png');
I have a vetical flex box container with two flex boxes. Te bottom one is fixed size and the top one takes up the rest of the space. This works great.
<div id="outer">
<div id="A">
Test<br/>
Test<br/>
Test<br/>
Test<br/>
Test<br/>
Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>
</div>
<div id="B"></div>
</div>
CSS:
body, html{
width: 100%;
height: 100%;
}
#outer{
width: 100%;
height: 100%;
background: yellow;
display: flex;
flex-direction: columN
}
#A{
height: 20px;
max-height: 100%;
width: 100%;
flex: 2;
background: #cccccc;
overflow: auto;
}
#B{
height: 200px;
width: 100%;
background: blue;
}
JS:
$("#B").resizable({
handles: "n"
});
I i now make the bottom one resizable with jquery ui i get a strange behaviour. For some reason jquery ui not only sets the size (height) of the bottom container but also the "top" property.
Is there anything i can do to keep resiable from setting this top property?
http://jsfiddle.net/t6B2e/8/
Your jQuery set your element in absolute position.
you can test and find out using !important to override some of the CSS set by jQuery: http://jsfiddle.net/t6B2e/9/
#B{
height: 200px;
width: 100%;
background: blue;
/* overrides any inline style or javascript style */
position:relative!important;
bottom:0!important;
top:auto!important;
}
I have done some absolute positioning with css. But in the following case, why in the firstBox , the top and left values are ignored? (I want top at 100 px and left at 100px). The Second box is pisitioned correctly.
<html>
<head>
<title>Testing</title>
<style type="text/css">
#firstBox {
color: white;
width: 500px;
padding: 1em;
background: red;
position::absolute;
top:100px;
left:100px;
z-index:2;
}
#secondBox {
color: white;
width: 500px;
padding: 1em;
background: blue;
position: absolute;
top: 100px;
left: 100px;
z-index: 0;
}
</style>
</head>
<body>
<div id="firstBox"> The First Box! </div>
<div id="secondBox"> The Second Box! </div>
</body>
</html>
It is because you are using 2 colons for position: absolute; for #firstBox
My Fiddle
I am working on an app for a client and am trying to create a button with a completely custom icon. The icon is 30px x 30px and transparent in the middle.
I have almost achieved what I want using this css code:
/* info button override */
.ui-icon-info-page {
background: url(images/G_help_icon_round.png) 50% 50% no-repeat;
background-size: 30px 30px;
background-color: black;
}
But there is a thin black circle that appears inside the icon, and also the icon image appears to be cut off:
I want to remove this circle and prevent the icon ? from being cut off. Also, I would like the question mark to be transparent instead of black, to show the image of the navigation bar beneath. If I try to set the background color to transparent though, the button appears entirely white:
How can I do this?
Update:
I tried applying this code:
/* info button override */
.ui-icon-info-page {
background: url(help.png) 50% 50% no-repeat;
background-size: 30px 30px;
width: 30px;
height: 30px;
margin-top: -15px !important;
box-shadow: none;
-webkit-box-shadow: none;
}
And got this result:
I'm able to move the icon around by adjusting the top and left margins, but it's edges are cut off outside a frame centered on the black circle:
Update 2:
Here is the button I am using (Note that it is invisible here because it is a white button on a white background):
Here is the html code that I use to load the button:
<div data-role="header" data-position="fixed">
<div><img border="0" src="images/G_iphone_navbar_logo.png" style="display:inline;"/> </div>
</div>
This should fix the issue
/* info button override */
.ui-icon-info-page {
background: url(help.png) 50% 50% no-repeat;
background-size: 30px 30px;
width: 30px;
height: 30px;
margin-top: -15px !important;
box-shadow: none;
-webkit-box-shadow: none;
}
Please ensure you are loading your application css file after jquery mobile css.
Edit:Here is a sample code based on the code you posted with the issue fixed
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<style>
#rightBtn .ui-btn-inner {
width: 30px;
height: 30px;
margin: -3px;/*Modify to change icon position wrt the header*/
border: none !important;
}
.ui-icon-custom {
background: url(http://i.stack.imgur.com/AqicD.png) 50% 50% no-repeat;
background-size: 30px 30px;
width: 30px;
height: 30px;
box-shadow: none;
-webkit-box-shadow: none;
margin: 0 !important;
}
</style>
</head>
<body>
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content"></div><!-- /content -->
</div><!-- /page -->
</body>
</html>
A demo here - http://jsfiddle.net/LCsmt/
Let me know if that helps.