I have created a reusable search component, i am facing two issues on this.
overlapping the search text on the svg icon - enter more text on the input box
entering more text the text-indent not staying - text goes left side when more text is entered
I have added the codesandbox
For the overlapping text on the search icon, I would simply solve it by adding some padding to the input field.
input{
padding-right: 50px;
box-sizing: border-box;
}
For the text-indentation not staying while the input field is active, I'm not sure how to solve it in a clean way. You could add a div with the same background color and width as the indentation, and then just give it an absolute position.
Second Issue Workaround
Instead of using text-indent, we can use padding-left and it will work properly, kindly see this one SO
This might help with keeping the content of the input from overlapping the search icon.
.App {
font-family: sans-serif;
}
.css-btdvqp {
background:#e1e1e1;
border-radius: 2px;
}
.css-btdvqp .css-vrkvd {
width: 85%;
}
Related
I am trying to learn some CSS and I currently struggle with the following problem: in the following code if you will try to edit text inside of the span, the cursor (big blinking line) is too huge.
Is there a way to make it the same size of the text, while having everything else looks the same (I assume that my css is not really good, so it can be changed).
.thumbnail-descr{
min-height: 10px;
display: table-cell;
vertical-align: middle;
font-size: 26pt;
color: #bbb;
outline:none;
}
P.S. The problem is with my line-height inside of the .square, but removing it will remove my text from being in the center.
The problem is your massive line-height. I realize that you do this to vertically center the text, but you are going to have to find another way. Since you are using set height, you can just use top or margin-top to push the text down to midway.
http://jsfiddle.net/M4fKM/4/
If you want to cover the case of your text going onto multiple lines, you can use the translateY(-50%) transform.
http://jsfiddle.net/M4fKM/5/
So, I have a form.
I want to add a padding to the form fields. So, when people start typing, the text will appear with a nice gap between the sentences and the left border of the field...
I can use padding-left, but then the who field jumps to the left (but it does work for the text).
I am looking for CSS code that allows me to style the input text on its own.
I tried this code, but that won't work either.
input[type=text] {
padding-left: 20px;
}
EDIT: I posted a picture what happens when using padding-left on input[type=text]. It does work but on the right you can see what happens with the field. The field gets wider..
The issue is because padding gets added to the rendered width of a field.
Use the box-sizing property to solve it.
input[type=text] {
padding-left: 20px;
box-sizing: border-box;
}
In the following fiddle, I am trying to find out why the div where the checkbox is placed is bigger than the content itself (which is only the image of an empty checkbox). I am trying to accomplish the same as seen on the fiddler but without the overlapping of the white background over the border of the underlying .
I think the problem is related to this css style:
.selectable-content label:after {
background: white;
color: #9fc5e8;
content:"\f096";
position:absolute;
}
You'll have to play with some of the bottom values in your media queries, but your white background was due to default line-height on the label.
http://jsfiddle.net/xtm9D/11/
Added:
.selectable-content > label {
padding-top: -5px;
font-family:'FontAwesome';
font-size: 32px;
cursor: pointer;
line-height:26px;
}
Messed around with your media queries as well.
The element created by :after contains the character, but also has a white background. As this element later in the DOM and positioned at the bottom-right of its parent, it will overlap the background.
This could be fixed by creating a translucent picture of the actual image, and removing the white color from the CSS.
Try setting the line-height. When I add the line
line-height: 31px
to
.selectable-content > label {...
the problem is resolved. I initially set line-height: 32px, but there was still a pixel of white. You are going to need to find a consistent way to position the element and set the line-height in relation to the checkmark character to resolve the overflow.
I have a background image associated with a table column, in the centre of that table column i have a dynamic link, example below .
http://www.qrrw.net/v
As you can see the writing is a php link, Is there anyway to make the whole area of the background image clickable rather than just the text?
Any ideas or suggestions would be appreciated.
Thanks
Just add a display: block; on your <a>s.
By the way, those <div> with a center attribute (brrrrh) invalid your code. Consider remove them and, to not loose your layout, add this rule on your <a>s.
.manu1 a {
display: block;
text-align: center;
line-height: 109px;
}
In addition to the display:block; it might be helpful to put a little padding:10px; on that <a> as well. Adjust the pixel amount as needed to cover the majority of the background image
I'm adding the text Like with jQuery. This gives 20px of width to the elements that contain that text (they have width: auto). If you click the a.gdt-starrating link the text Like changes to Liked which now has 25px (due to the extra letter 'd'). But the elements still having 20px. So the text overflows the elements containing it.
$j(".gdup a.gdt-starrating").text("Like");
$j(".gdup div.gdt-starrating").text("Liked");
$j("a.gdt-starrating").live("click", function() {
$j(".gdup div.gdt-starrating").text("Liked");
});
Here is a live example:
http://www.taiwantalk.org/topic/asdasdasdasdasdgg/
If you click the Like link you will see the issue.
Any suggestions to fix this?
problem is this css rule
.gdt-size-20.gdthumb, .gdt-size-20.gdthumb a, .gdt-size-20.gdthumb div {
width: 20px;
height: 20px;
}
in http://www.taiwantalk.org/wp-content/plugins/gd-star-rating/css/gdsr.css.php