I have a quick question, I know that I can edit a placeholder text for an input field using CSS. But I was wondering how I can add padding to the actual text (the text that the user types in). I have provided an image below, I have added padding to the placeholder text but am struggling to add padding to the actual text for the input field so that it is aligned with the placeholder text.
Here is what I have tried:
.form TextInput {
padding-left: 10px;
}
This obviously isn't working and I was just wondering if anyone else has a solution?
Image link
Edit: I am not trying to move the input field itself, just the text inside. Just like I did with the placeholder, but only this time I want to move the text to match the position of the placeholder.
Link 2
Padding on the input; for users typing in the field or a preset value parameter:
.form input[type="text"] {
box-sizing: border-box;
padding-left: 10px;
}
Padding on the placeholder:
.form input::placeholder {
padding: 10px;
}
You have to give css to the input field as follows
.form input[type="text"]{
padding:10px;
}
Check this fiddle here
1 - Padding for input, where user can type:
.form input.TextInput {
padding-left: 10px;
}
2 - Padding for placeholder of input:
.form input.TextInput::-webkit-input-placeholder { /* Chrome/Opera/Safari */
padding-left: 10px;
}
.form input.TextInput::-moz-placeholder { /* Firefox 19+ */
padding-left: 10px;
}
.form input.TextInput:-ms-input-placeholder { /* IE 10+ */
padding-left: 10px;
}
.form input.TextInput:-moz-placeholder { /* Firefox 18- */
padding-left: 10px;
}
Use css prefixes for cross-browser compatibility.
Related
I have a documentation for my app in readthedocs website. And I have a .css file that changes side bar appearance. About three month ago this .css file worked well, but now it doesn't. Here is the link.
That is how it looked like:
That is how it looks now:
The .css file:
/* Fixes the size of the RTD flyout */
/* .rst-versions {
width: 320px !important;
} */
/* Content area color */
.wy-nav-content {
background: #dddddd;
}
/* Scroll Bar*/
.wy-side-scroll {
width: auto;
overflow-y: auto;
margin-top: 0px;
}
/* width of the side panel */
.wy-nav-side {
width: 320px;
}
/* content section full screen */
.wy-nav-content {
max-width: none;
}
/* set color of left side bar */
.wy-nav-side,.wy-side-nav-search,.wy-nav-top {
/*background: #0079c1; /*005eb8 */
background: #006464;
}
/* Change caption color to be more legible */
.wy-menu > .caption > span.caption-text {
color: #ffcccc;
font-size: 20px;
}
/* Change the version color to match caption color */
.wy-side-nav-search>div.version {
color: #ffcccc;
}
/* Get rid of that ugly yellow highlight color and replace with something more appealing to the eye */
.highlight .hll {
background-color: #fcfcfc;
}
/*
#media screen and (max-width: 768px) {
.wy-nav-content-wrap {
margin-left: 0px;
}
.wy-nav-side {
width: 500px;
}
} */
What could be the reason of this? Thanks!
I partially confirm what #Steve Piercy says in the comment. The rule .wy-menu > .caption > span.caption-text { doesn't work anymore, since the <p> that surrounds the <span class="caption-text"> no longer has a caption class. You can check that by comparing latest with 1.3.4-branch.
However, as you can see from the build logs (old, new), the problem is not with sphinx-rtd-theme (you are using 0.5.0 in both), but the docutils version (0.16 in the old build, 0.17 in the new build). You will need to either upgrade your Sphinx version, or downgrade docutils.
I need to place the icon of my sap.m.Button on top of the text.
I found this blog post: Button with text UNDER the icon
but unfortunately, this method doesn't seem to work anymore.
Is there a convenient way of placing the icon on top of the text using CSS?
You can achieve it using custom class & CSS
VIEW
<Button class="newBtn" icon="sap-icon://sys-help" text="Default Button" />
CSS
.newBtn .sapMBtnInner {
height: 4rem; /* Increase it to 6rem */
}
.newBtn .sapMBtnText>.sapMBtnIcon {
display: contents;
line-height: 3.8rem; /* Add this line when you are using height as 6rem */
}
.newBtn .sapMBtnInner.sapMBtnText {
padding-left: 0.75rem;
}
.newBtn .sapMBtnIcon {
font-size: 1.7rem; /* Icon size */
}
.newBtn .sapMBtnContent {
line-height: normal;
}
I know about how to stylize the placeholder from here css tricks
But I need to know about how to apply to a specific text area.My text-area has class "message".
Thanks.
Actually I used padding.But was interested about thee styling of placeholder with a css3 seelctor.
any help?
All you need is .message { padding-top: 10px; } to achieve the result you're after.
It will apply to any <textarea> that has the class of message
EDIT
If you don't want to apply padding to the element, try this instead. It literally just targets the placeholder.
.message::-webkit-input-placeholder {
padding-top: 10px;
}
.message::-moz-input-placeholder {
padding-top: 10px;
}
.message:-moz-input-placeholder {
padding-top: 10px;
}
.message:-ms-input-placeholder {
padding-top: 10px;
}
Can be seen in action here, I set up 2 <textarea>'s to show this - http://jsfiddle.net/andyjh07/tan7k4rf/
This what you are looking for?
<textarea placeholder="Placeholder text!" class="message"></textarea>
<textarea placeholder="Placeholder text!" ></textarea>
.message::-webkit-input-placeholder {padding-top: 10px;}
.message:-moz-placeholder { /* Firefox 18- */padding-top: 10px;}
.message::-moz-placeholder { /* Firefox 19+ */padding-top: 10px;}
.message:-ms-input-placeholder {padding-top: 10px;}
http://jsfiddle.net/92gnt7qt/3/
Use this CSS:
textarea {
padding-top: 14px;
font-size: 1.0rem;
}
textarea::-webkit-input-placeholder {
padding-top: 0px;
}
textarea::-moz-placeholder {
padding-top: 0px;
}
textarea::-ms-input-placeholder {
padding-top: 0px;
}
Just apply CSS for that class...
.message{padding-top:10px;}
Or
padding:10px;
If you want to apply padding on all sides
AND apply it to text area:
<textarea class="message"></textarea>
You Can Try this .Its working Fine and Tested !!!
<body>
<textarea placeholder = "Enter Your Stuff Here !! Area" class "message"></textarea>
</body>
And you can Add css to class as Follows:
.message {
padding-top : 12px;
}
Give your text area an ID and use that to assign css rules.
e.g.
(html)
<textarea id="thisOne" style="message">
(css)
#thisOne -moz-placeholder {
padding: 5px 0 0 0;
}
I have the following code to style custom scrollbars, but when the scrollbar is not needed because the content is not very long, I would like to hide the scrollbar. Is this possible?
Here's the code I have so far...
.myscroll::-webkit-scrollbar {
width: 15px;
}
.myscroll::-webkit-scrollbar-track {
border-radius: 3px;
background-color:#D4D4D4;
}
.myscroll::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color:#0085bf ;
}
Assuming that the element is having class myscroll, you can try following css
.myscroll{
overflow:auto;
}
It might solve your issue.
How to increase cell height of GWT celltable ?
In mozilla firefox cell height proper(as per content) but In case of Internet explorer some part of content not displaying properly
see image
My Celltable.css is as follows:
#def selectionBorderWidth 0px;
.cellTableWidget {
border: 1px solid red;
}
.cellTableFirstColumn {
}
.cellTableLastColumn {
}
.cellTableFooter {
text-align: left;
color: #4b4a4a;
overflow: hidden;
}
.cellTableHeader { /** COLUMN HEADR TEXT */
text-align: left;
color: #4b4a4a;
overflow: hidden;
background-color: #E1E1E1;
font-family: arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
padding-left: 10px;
height: 20px;
border-bottom: #e6e6e6 1px solid;
border-left: #a6a6af 0.5px solid;
border-right: #e6e6e6 1px solid;
border-top: #a6a6af 0.5px solid;
}
.cellTableCell {
overflow: hidden;
padding-left: 10px;
height: 20px;
font-family: Arial;
font-size: 11px;
font-weight: normal;
border-bottom: #e6e6e6 1px solid;
border-left: #a6a6af 0.5px solid;
border-right: #e6e6e6 1px solid;
border-top: #a6a6af 0.5px solid;
}
.cellTableFirstColumnFooter {
}
.cellTableFirstColumnHeader {
}
.cellTableLastColumnFooter {
}
.cellTableLastColumnHeader {
}
.cellTableSortableHeader {
cursor: pointer;
cursor: hand;
}
.cellTableSortableHeader:hover {
color: #6c6b6b;
}
.cellTableSortedHeaderAscending {
}
.cellTableSortedHeaderDescending {
}
.cellTableEvenRow {
background: #ffffff;
}
.cellTableEvenRowCell {
}
.cellTableOddRow {
background: #f8f8f8;
}
.cellTableOddRowCell {
}
.cellTableHoveredRow { /** background: #eee;*/
}
.cellTableHoveredRowCell {
/** border: selectionBorderWidth solid #eee; */
}
.cellTableKeyboardSelectedRow {
background: #ffc;
}
.cellTableKeyboardSelectedRowCell {
}
.cellTableSelectedRow {
background-image: url("images/row_Highlight.jpg");
color : black;
height: auto;
overflow: auto;
}
.cellTableSelectedRowCell {
}
/**
* The keyboard selected cell is visible over selection.
*/
.cellTableKeyboardSelectedCell {
}
#sprite .cellTableLoading {
gwt-image: 'cellTableLoading';
/*margin: 20px;
*/}
What changes I need to do in css to make consistency (cell height) in all browser?
I think the problem may be that your CSS style for the cell has "overflow: hidden;".
.cellTableCell {
overflow: hidden;
...
}
Take that away and see what happens. I think the cell and row will expand to fit the content.
There is another possible correction for cellTableRow's CSS. Row styles should be overwritten by cell styles, but GWT may be doing something under the hood to compensate for browser differences in IE. To ensure it always applies to the TDs contained in the TR, write it like this:
.cellTableRow,
.cellTableRow td {
overflow: auto;
...
}
First of all, do you make a CSS Reset? Following post refers to the same problem i guess.
Why is box sizing set to border-box for tables in Firefox?
The problem could be caused from the difference between browsers in the way the handle the box-model.
Read this post for more information.
I would set box-sizing property.
IE uses the border-box, every other browser the content-box-modell.
You can define, which one should be used with the following css rule:
table {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
or
table {
-webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: content-box; /* Firefox, other Gecko */
box-sizing: content-box; /* Opera/IE 8+ */
}
We sometimes have problems with IE breaking the layout, because the page is rendered before everything is ready. Try if assigning a dummy CSS class to some element in the DOM changes anything.
If it does, the following code might help you. It just sets some random class at the body element and resets it to force a rerendering of the page:
/**
* Force Internet Explorer 8 to render the page again without a page refresh. after the given delay of milliseconds. This
* method only works for Internet Explorer 8.
*
* #param delayInMillis delay in milliseconds
*/
public void forceIe8ToReRender(final int delayInMillis) {
// call timer to force ie8 to re-render page without page refresh
final Timer t = new Timer() {
#Override
public void run() {
doForceBrowserToReRender();
// timer should only run once
this.cancel();
}
};
t.schedule(delayInMillis);
}
/**
* Force Browser to render the page again without a page refresh
*/
private native void doForceBrowserToReRender()/*-{
var doc = $doc;
var originalClassName = doc.body.className;
doc.body.className = "foobar";
doc.body.className = originalClassName;
}-*/;
use this
.cellTableCell { min-height : 20px ; ..... }
You can use
.cellTableKeyboardSelectedRow {
background: #ffc;
height:30px !important
}
It Works for me :)
/** Cell height */
.mainCellTable tbody tr td{
height: auto;
}
Extend AbstractCellTableBuilder and then mention height attribute of TableRow
height is not the best solution to assign where the content text either be increased or decreased. So there are two cases to make your above example as follows.
A) Using pure CSS.
B) Using Javascript
Explanation A:
In CSS, we depend on 2 more things whether we are using DIV structure or we are using TABLE method.
A.1 Using DIV:
If we are using div structure building my page and i use line-height to vertical align the text and text-align to horizontally align the text.
A.2 Using Table:
If I am using method table, then I would like to center the text in the middle of cell. This miracle will hold true if and only if I use text vertical-align:middle and horizontal-align:center.
Note: the text should be written in tag .
CSS in body as:
I love Allah
I Love Islam
B: Using Javascript
Use min-height in the td and use vertical align and texl-align properties to center and middle the texts by x-axis and y-axis respectively.
But there is only one problem it will create a bug report in IE6, 7. because IE7, IE8 do not understand min-height. So we have IE9.js file which you download it using google. and put the script in the head of html document. Also put the latest jquery file first and then put the IE9.js script after it.
and in css enjoy min-height property and how far as your text grows, the text will automatically be in the middle of the table cells.
If you are using DIV then it is same process.
I hope this will make you something extra. And you will not need to use Google once again.