In my form validation I'm using bootstrap tooltips to show
error message.
I adjusted the css to change the appearance (img 1)
/* Tooltip */
form .tooltip > .tooltip-inner {
background-color: #843534;
color: #FFFFFF;
border: 0px;
padding: 0 4px;
font-size: 9px;
letter-spacing: 0.5px;
}
.tooltip.bottom {
padding: 0px !important;
margin-top: -6px !important;
}
/* Tooltip arrow */
form .tooltip.top > .tooltip-arrow,
form .tooltip.bottom > .tooltip-arrow,
form .tooltip.left > .tooltip-arrow,
form .tooltip.right > .tooltip-arrow {
border: 0px;
}
I would place my tooltip to the left of the element as in img 2,
but I haven't found a way to do it. (bottom-left not working)
Bootply
How would I do it?
Thank you
According your pen, just add this css to your css
.tooltip.fade.bottom
{
left:30px !important;
}
I just use !important to override the current left value and you will get your result.
Please add the following in your css:
.tooltip{
left:20px !important;
}
modify css like below,
form .tooltip > .tooltip-inner {
background-color: #843534;
color: #FFFFFF;
border: 0px;
padding: 0 0px;
font-size: 9px;
letter-spacing: 0.5px;
margin-left: -352px;
}
.tooltip-inner {
max-width: 85px;
text-align: center;
border-radius: 4px;
}
Related
I personalize a part of my Prestashop site and i don't know what I can use for center this element :
Image
Css :
.active, .accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.panel {
padding: 0 18px;
margin: 25px 25px 25px 25px;
display: none;
background-color: white;
overflow: hidden;
}
If you wanna center the words inside the container exist the property css text-align
You must have include the html too if you want a better answer and what have you tried.
As an example, these elements were centered using css, text-align:center;
Below I have included an image illustrating my issue. In summary, I am having an issue with an approximately 2 pixel whitespace below each of the images on my website. I'm not exactly sure what is causing this, but it is most definitely not the image itself. I believe it to be the box-sizing: border-box snippet in my CSS, due to the fact that 2px would be the sum of the top and bottom borders, however, removing that part of the code does not solve the issue. Any help or tips would be greatly appreciated. I have tried viewing the webpage on my mobile phone, using Firefox and using Chrome, and the issue is persistent between all of them.
The webpage in question can be found at http://www.bellasaluminum.com/gallery.php?jobType=GlassWindow&page=1, however, I have included a portion of the gallery's stylesheet below:
#gallery > div {
border: 1px solid black;
margin: 5px;
width: auto;
}
#gallery > div > * {
display: inline-block;
}
#gallery > div > img {
position: relative;
padding: 0px;
margin: 0px;
}
#gallery > div > div.description {
position: relative;
padding: 3px;
width: auto;
vertical-align: top;
}
#galleryNav {
padding: 0px;
background-color: #dedede;
text-align: center;
border-left: 2px solid black;
border-right: 2px solid black;
border-bottom: 1px solid black;
width: 90%;
margin: auto;
}
#galleryNav > a {
text-decoration: none;
color: black;
font-family: Arial;
font-weight: bold;
display: inline-block;
padding: 10px 8px 10px 8px;
margin: 0px;
}
#galleryNav > a:hover {
background-color: #efefef;
}
#galleryNav > a.active {
background-color: #afafaf;
}
You can either make the img elements block level:
#gallery > div > img {
display:block;
}
or, change the vertical-align property value to something like top. (the default is baseline)
#gallery > div > img {
vertical-align:top;
}
The second option (vertical-align:top) should be used in this instance, because you want the text to be inline with the img element.
I'm trying to create a custom checkbox only using css and no images, but I am having a bit of trouble.
I followed a few tutorials online, but I seem to have hit a road block and help would be great.
My css looks like this
input[type='checkbox'] {
-webkit-appearance: none;
background: #dee1e2;
width: 1.3em;
height: 1.3em;
border-radius: 3px;
border: 1px solid #555;
position: relative;
bottom: .3em;
}
input[type='checkbox']:checked {
-webkit-appearance: none;
background: #dee1e2;
width: 1.3em;
height: 1.3em;
border-radius: 5px;
position: relative;
bottom: .3em;
-webkit-transform: rotate(45deg);
}
What keeps happening is when I do the rotate the whole box rotates and I have tried adding a :after to it, but it didn't seem to do anything.
You could use a unicode check, or even an icon font if you want to get really fancy...
input[type='checkbox'] {
-webkit-appearance: none;
background: #dee1e2;
width: 1.3em;
height: 1.3em;
border-radius: 3px;
border: 1px solid #555;
position: relative;
bottom: .3em;
}
/* added content with a unicode check */
input[type='checkbox']:checked:before {
content: "\2713";
left: 0.2em;
position: relative;
}
Demo
As a matter of fact I tried the same thing on my website (http://e-home.mx) but I ended up hiding the input element with css and adding a label to each one which is the one that "emulates" its behavior like this:
HTML
<input type="checkbox" id="c8" name="c8" />
<label for="c8"><span></span>Label here</label>
CSS:
input[type="checkbox"] + label{color:#000;font-family:Arial, sans-serif;}
input[type="checkbox"] + label span{
display:inline-block;
width:19px;
height:19px;
margin:-1px 4px 0 0;
vertical-align:middle;
background:url("http://e-home.mx/html5/img/form_elements_outlined.png") left top no-repeat;
cursor:pointer;
}
input[type="checkbox"] {display:none}
input[type="checkbox"]:checked + label span {
background:url("http://e-home.mx/html5/img/form_elements_outlined.png") -19px top no-repeat;
}
Here is the fiddle:
http://jsfiddle.net/xedret/bTAGU/
I'm working in the main page of www.recaccesorios.com and I'm struggling with a padding. The vertical distance between two elements is too big and I don't know why is doing that. I'll show you the inspection with Google Chrome:
As you can see, Chrome is telling me that the top padding is 0 or null, but in the image you can see that it isn't true. What is happening?
My horrible CSS (not the whole CSS, I can't put here more than 3000 lines...):
#galeria {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color: rgb(222,222,222);
background-color: rgba(222,222,222,0.8);
border: 1px solid #e5e5e5;
border-radius: 4px;
/* padding-bottom: 40px; */
width: 100%;
}
#galeria > h5 {
text-align: center;
}
#noticias > h5 {
text-align: center;
}
#noticias a {
color:#555;
}
#noticias p {
text-align : justify;
padding-left:12px;
padding-right:12px;
}
#noticias {
height:292px;
}
#vistaPrevia {
position: absolute;
z-index: 6;
top: 40px;
display: none;
}
#galeria > img {
display: block;
margin-left: auto;
margin-right: auto;
}
#galeria > span {
margin-left: 5px;
}
#noticias {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color: rgb(222,222,222);
background-color: rgba(222,222,222,0.8);
border: 1px solid #e5e5e5;
border-radius: 4px;
/* padding-bottom: 40px; */
width: 100%;
}
.td-galeria {
padding-right: 6px;
padding-left: 0px;
border-color:transparent;
width:50%;
height:300px;
}
.td-noticias {
padding-left: 6px;
padding-right: 0px;
}
I believe the issue is the reset on line 42 of the CSS file vertical-align: baseline; this seems to be causing your chrome issues.
This solves the issue:
#tablaInicio td {vertical-align:}
But it is strange.
EDIT:
Found out why it is strange; it is a JS script causing the extra height.
The Problem exists in line 42 of Style.css;
remove vertical-align:baseline;
and also correct
#tablaInicio td {vertical-align:}
We need to see your CSS to understand this better. But, I'm guessing you've declared the padding somewhere else in your code.
In your CSS file, change the padding value line to something like this:-
"padding: 0px !important";
the !important message means it will ignore any other values you try to set for padding.
I hope this helps.
Our application has a master .css common for all our pages and we are not allowed to change anything in this file.
We have an entry there as follows:
ul li{display:block;padding:0 0 0.5em 15px;margin:0 0 0 0;background:url(../images/bullet.gif) top left no-repeat;}
I am implementing predictive search on one of the jsp-s and I have a specific css file for this purpose which is as follows
.ac_results {
padding: 0px;
border: 1px solid black;
background-color: white;
overflow: hidden;
z-index: 99999;
}
.ac_results ul {
width: 100%;
list-style-position: none;
list-style: none;
padding: 0;
margin: 0;
list-style: disc inside;
}
.ac_results li {
margin: 0px;
padding: 2px 5px;
cursor: default;
display: block;
/*
if width will be 100% horizontal scrollbar will apear
when scroll mode will be used
*/
/*width: 100%;*/
font: menu;
font-size: 12px;
/*
it is very important, if line-height not setted or setted
in relative units scroll will be broken in firefox
*/
line-height: 16px;
overflow: hidden;
}
.ac_loading {
background: white url('indicator.gif') right center no-repeat;
}
.ac_odd {
background-color: #eee;
}
.ac_over {
background-color: #0A246A;
color: white;
}
My problem is that I am unable to remove this bullet.gif from my current predictive search list . If I add background: none I am loosing all the existing background colours.
How can I stop this bullet.gif to appear in my list.
PLEASE NOTE : I tried with background-image:none; also and it did not work, the bullet.gif is still coming up in my search list :(
Regards, M
Instead of background: none try:
background-image: none
You should write
background-image:none;