Really basic question but please read to the bottom for the things I have tried. I have the following for an input box:
<input type="number" ng-model="vendor.day_of_the_month" name="" class="text-radio" max="31" min="1">
And the following CSS:
input[type=number] .text-radio{
vertical-align: middle;
margin: 0px;
width: 60px;
margin-left: 2px;
margin-right: 2px;
height: 30px;
border: 0;
border-bottom: 1px solid #909090;
box-shadow:none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
}
For some reason the code around the borders do not seem to work. What seems odd is:
When I change the width of the input box in the CSS that seems to effect a change which seems to indicate it is NOT a selectivity issue
When I remove the "number" type from the HTML the formatting works which would seem to indicate the CSS code works.
Is there something special around how you have to format borders for a number input I am missing?
i think it is the space in your css between input[type=number] and .text-radio{
input[type=number].text-radio{
vertical-align: middle;
margin: 0px;
width: 60px;
margin-left: 2px;
margin-right: 2px;
height: 30px;
border: 0 none;
border-bottom: 1px solid #909090;
box-shadow:none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
}
Demo
I think error is in your selector you are using it wrong
use just
.text-radio
or
input[type=number]
or if you want to use both then try this
input[type=number].text-radio
mean remove space b/w slectors because space is used when we want to add css to a child of a selector.
Related
I came across this trick when I wanted to feature some headline text. I love the look of it as was wondering if there was a way to have the ends point up.
.pagebreaker {
padding: 10px;
margin-bottom: -5px;
border-top: 4px solid #f6d241;
border-radius: 35px;
}
ref Image:
I've tried negative border-radius and negative padding. Is there something I am missing here? Or is this something that can't be done?
Thanks.
Use border-bottom
.pagebreaker {
padding: 10px;
margin-bottom: -5px;
border-bottom: 4px solid #f6d241;
border-radius: 35px;
width: 300px;
height: 10px;
}
<div class="pagebreaker"></div>
I'm trying to achieve an input field with an underline. As it is visually more appealing to me, I'm trying to make underline as close as possible to the font. I did achieve the closeness, but now, input field cuts tail parts of the letters with tails. Is there a possible workaround for this? Can I cancel input's this behaviour with something like "overflow: visible"? Or may I draw a fake line over the input field, instead of using border-bottom? Thanks in advance.
In short, I'm trying to make text get through the bottom line.
Here is a screenshoot about the problem.
Here is my current class:
.kk_input {
border: 0;
border-bottom: 1px solid #000;
outline: none;
font-size: 20px;
height: 20px;
margin-top: 5px;
}
Without seeing the rest of your markup, this should give you an idea enough to go off of.
.kk_input {
border: 0;
outline: none;
font-size: 20px;
}
div {
position: relative;
}
div:after {
position: absolute;
content: "";
bottom: 4px;
left: 0;
height: 1px;
width: 100%;
background-color: black;
}
<div>
<input class="kk_input" type="text">
</div>
You can use more than one box-shadow to create this effect.
.so49204829_input{
line-height: 20px;
font-size: 20px;
padding: 8px 4px;
box-shadow: inset 0 -11px 0 #fff, inset 0 -12px 0 #000;
}
<input type="text" class="so49204829_input">
& here's another approach using a second element. Unfortunately, you can't add an :after pseudo-element to input elements (at the time of posting).
.so49204829_input {
line-height: 20px;
font-size: 20px;
padding: 8px 4px;
width: 200px;
display:block;
}
.so49204829_input_accent {
margin-top: -14px;
height: 1px;
width: 208px;
background-color: #000;
pointer-events: none; /* this makes sure click events aren't intercepted by the accent-line element */
}
<input type="text" class="so49204829_input"><div class="so49204829_input_accent"></div>
I have tag me box to add the tag.
http://jsfiddle.net/hailwood/u8zj5/
I was trying to change it's looks using css.
I wanted to create tags and box to look like in this code:
http://jsfiddle.net/hAz5A/20/
I added the css in first but does not make change. Can any css guys help me out?
Just add the css from the second fiddle into the first fiddle
Note: if you want to remove the 'x' - delete tag (for some reason) then add display: none to your tagit-close class
FIDDLE
FIDDLE without delete button
ul.tagit.ui-widget li.tagit-choice {
display: block;
float: left;
position: relative;
line-height: inherit;
border-radius: 6px;
background-color: #EFEFEF;
border: 1px solid #DDD;
padding: 5px 15px 5px 5px;
margin-right: 10px;
color: #08c;
text-decoration: none;
}
ul.tagit.ui-widget li.tagit-choice a.tagit-close {
cursor: pointer;
position: absolute;
right: 5px;
top: 50%;
margin-top: -8px;
}
I'm try to display two rows of six columns and have them shrink when the browser window shrinks. The original css displays number of columns depending on the image size, each image floating left, so for different screen sizes I end up with large spaces.
.ngg-albumoverview {
overflow: hidden;
margin-top: 1px;
margin-left: 0px;
width: 100%;
clear:both;
display:block !important;
}
.ngg-album {
float:left;
height: 100%;
padding: 0px;
margin-bottom: 0px;
border: 0px solid #fff;
}
/* IE6 will ignore this , again I hate IE6 */
/* See also http://www.sitepoint.com/article/browser-specific-css-hacks */
html>body .ngg-album {
overflow:hidden;
padding: 0px;
margin-bottom: 0px;
border: 0px solid #cccccc;
}
.ngg-album {
overflow: hidden;
padding: 0px;
margin-bottom: 0px;
border: 0px solid #cccccc;
}
.ngg-albumtitle {
text-align: left;
font-weight: bold;
margin:0px;
padding:0px;
font-size: 1.4em;
margin-bottom: 0px;
}
.ngg-thumbnail {
float: left;
margin-bottom: 10px;
margin-right: 2px;
text-align: center;
font-weight:bold;
background-color:#0F0F0F;
-webkit-border-radius: 0px 0px 8px 8px;
-moz-border-radius: 0px 0px 8px 8px;
border-radius: 0px 0px 8px 8px
}
.ngg-thumbnail img {
background-color:#A9A9A9;
border:0px solid #1D1D1D;
display:block;
margin:4px 0px 4px 5px;
padding:4px;
position:relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width:200px;
}
.more {
width: 100%;
background-color:#0F0F0F;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px
}
.ngg-thumbnail:hover {
background-color: #333333;
}
.ngg-thumbnail img:hover {
background-color: #FFFFFF;
}
.more:hover {
background-color: #333333;
}
.ngg-description {
text-align: center;
}
When I add this css to .ngg-albumoverview it displays six columns ok and shrinks them, but the second image is placed under the first, instead of alongside, with the third image alongside the first.
columns:100px 6;
-webkit-columns:100px 6; /* Safari and Chrome */
-moz-columns:100px 6; /* Firefox */
CSS columns are just segregations of the page and flow the same as the rest of the page. Your images are laid out like this:
[1][3][5]
[2][4][6]
because the flow of a page goes top to bottom and expands as necessary depending on element widths.
Your images will not be in the order you want unless you remove the columns and replace it with a responsive grid. If you want the images to appear like:
[1][2][3]
[4][5][6]
you need to adjust your .ngg-thumbnail widths to be a percentage (that incorporates the margin, border and padding spacing in between and adds up close to 100% between 3 of them), float them to the left and give your .ngg-thumbnail img a max-width: 100%; and height: auto;. Be sure to float the .ngg-thumbnail parent element and not the img or they will be removed from the document flow and not line up with the grid unless you perfectly size everything (and you don't want that).
Almost forgot - make sure you add a clear: left; on the 4th image if your widths don't add up to 100% so it starts on a new line by default. You can select the 4th image with:
.ngg-thumbnail img:nth-of-type(4);
Here is a good resource for you if you'd like an enjoyable way to learn more about this.
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.