I have a problem in my button width. my form is able to switch language. For some language the content of the button is longer then the button width, How can I adjust the button width proprety to the text lenght ?
Here is my CSS :
html .formRowSubmit input[type="submit"] {
width: 26%;
margin: 5px 0% 5px ;
margin-bottom: 10px;
height: 25px;
border-radius: 3px;
outline: 0;
-moz-outline-style: none;
background: #CAD722;
border: none;
color: white;
font-size: 10px;
font-weight: 150;
cursor: pointer;
transition: box-shadow .4s ease;
}
You should try setting a min-width instead of a width, this will let the button expand if need be. Once you do this you should also set some horizontal padding so the text isnt butted up to the end like so:
input[type="submit"] {
min-width: 26%;
padding: 5px 15px;
}
http://jsfiddle.net/jqjxd0xt/
Display the button as an inline-block (and delete the width)
html .formRowSubmit input[type="submit"] {
/*width: 26%;*/
display: inline-block;
margin: 5px 0% 5px ;
margin-bottom: 10px;
height: 25px;
border-radius: 3px;
outline: 0;
-moz-outline-style: none;
background: #CAD722;
border: none;
color: white;
font-size: 10px;
font-weight: 150;
cursor: pointer;
transition: box-shadow .4s ease;
}
You might want to add some padding if the text is to close to the border.
Try like this: demo
CSS:
.formRowSubmit input[type="submit"] {
width: auto;
margin: 5px 0% 5px;
margin-bottom: 10px;
height: 25px;
border-radius: 3px;
outline: 0;
-moz-outline-style: none;
background: #CAD722;
border: none;
color: white;
font-size: 10px;
font-weight: 150;
cursor: pointer;
transition: box-shadow .4s ease;
}
HTML:
<div class="formRowSubmit">
<input type="submit" value="Submit loooong llloooonnnng text">
</div>
Related
I've got a search box which transitions and gets bigger when clicked on, and there is a button beside it. My problem is that the input box moves softly but the button stays in place and then teleports to its position once the transition is over. How can I trigger a transition on the button once the input box is clicked?
.searchbox {
width: 150px;
height: 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 14px;
background-color: white;
background-position: 2px 2px;
background-repeat: no-repeat;
padding: 12px 20px 12px 45px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
margin-top:10px;
}
.searchbox:focus {
width: 100%;
}
.searchbt {
float: left;
width: 15px;
height: 4px;
padding: 10px;
background: #2196F3;
color: white;
font-size: 17px;
cursor: pointer;
border:none;
margin-top:10px;
border-radius: 4px;
position:absolute;
z-index:1;
border: 2px solid #ccc;
border-right:none;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
.searchbt:focus {
width=100%;
}
Thanks for your help in advance.
Edit: I temporarily fixed it by moving the button to the other side (The one which doesn't move)
I am attempting to place two buttons side by side, one of which has a border, and both of which are the same height. But even though I am using box-sizing: border-box, the border is still being added to the height.
Here are the links:
.btn {
padding: 10px;
text-align: center;
line-height: 1.15;
border: 0;
cursor: pointer;
box-sizing: border-box;
}
.dib {
display: inline-block !important;
}
.btn {
background-color: initial;
text-align: initial;
letter-spacing: initial;
-webkit-transition: initial;
transition: initial;
-webkit-box-shadow: initial;
box-shadow: initial;
height: initial;
border-radius: initial;
vertical-align: initial;
text-transform: initial;
}
.btn,
.btn-large,
.btn-small {
text-decoration: none;
color: #fff;
background-color: #26a69a;
text-align: center;
letter-spacing: .5px;
-webkit-transition: background-color .2s ease-out;
transition: background-color .2s ease-out;
cursor: pointer;
}
.btn,
.btn-large,
.btn-small,
.btn-flat {
border: none;
border-radius: 2px;
display: inline-block;
height: 36px;
line-height: 36px;
padding: 0 16px;
text-transform: uppercase;
vertical-align: middle;
-webkit-tap-highlight-color: transparent;
}
.btn-ghost-secondary {
background-color: transparent;
border: 2px solid #261a94;
}
<a class="btn btn-ghost-secondary dib">Delete Entity</a>
<a class="btn btn-secondary dib">Edit Entity</a>
My understanding of border-box leads me to believe that the height of the btn-ghost-secondary button should be unaffected by the 2px border, and yet its height is exactly 4px more than that of its sibling.
I even tried removing all style other than display, padding, box-sizing and borders (you can see the difference in the buttons on the left hand side):
I have a range input like this:
.my-slider {
vertical-align: middle;
-webkit-appearance: none;
margin-left: 5px;
width: 100%;
height: 10px;
border-radius: 5px;
color: white;
background: white;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.my-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
border: none;
cursor: pointer;
}
.my-slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
border: none;
cursor: pointer;
}
.my-slider::-moz-range-track {
background-color: white;
}
<input type="range" min="0" max="275" value="0" class="my-slider" id="myRange">
Things are looking fine except that when I click on the thumb, 2 dashed lines appear, which look like this:
I have tried adding border: none and outline: none rules to remove these, to no avail. This happens in Firefox only, the dashed lines don't show in Chrome.
Anyone know how to remove the dashed lines? Thanks!
Use ::-moz-focus-outer selector.
input[type=range]::-moz-focus-outer {
border: 0
}
I have a problem with losing opacity of my form in Mozzilla:
What is more in Chrome everything is great:
Do exist some tolls for set my CSS3 code to each browser? it would be great when it would add additional lines with -o- -moz- ect. prefixes.
My code is nothing special...
.input2
{
transition: all 300ms ease;
width: 240px;
height: 45px;
margin: 0 auto;
margin-top: 10px;
margin-left: 80px;
border-width: 0;
background-color: white;
border-bottom-width: 3px;
border-color: #CCCA14;
text-indent: 20px;
font-family: 'Titillium Web', sans-serif;
color: #232227;
font-size: 16px;
}
Try now it works, Border style was not defined and that's why it was not working Firefox.
You can either define it in one line or in multiple lines i.e. property of border as below,
.input2{
border-bottom : 2px solid #CCCA14;
}
or
.input2{
border-bottom-width : 2px;
border-color : #CCCA14;
border-style : solid;
}
.input2
{
transition: all 300ms ease;
width: 240px;
height: 45px;
margin: 0 auto;
margin-top: 10px;
margin-left: 80px;
border-width: 0;
background-color: white;
border-bottom: 3px solid #CCCA14;
text-indent: 20px;
font-family: 'Titillium Web', sans-serif;
color: #232227;
font-size: 16px;
outline:none;
}
<input type="text" class="input2">
I have some navigation links that I'm using css transitions on.
Here's the CSS...
ul.yui-nav { list-style-type: none; }
ul.yui-nav li {
display: inline-block;
text-align: center;
height: 110px;
width: 110px;
border: none;
background: none;
}
ul.yui-nav li:hover {
background: none;
border: 1px solid #ccc;
border-radius: 50%;
height: 110px;
width: 110px;
transition: all 275ms;
-moz-transition: all 275ms; /* Firefox 4 */
-webkit-transition: all 275ms; /* Safari and Chrome */
-o-transition: all 275ms; /* Opera */
}
ul.yui-nav li a {
font-style: normal;
border-radius: 50%;
height: 100px;
width: 100px;
background: #ccc;
float: left;
color: #fff;
text-decoration: none;
font-size: 50px;
font-family: 'Oswald', sans-serif;
margin: 0 11px;
font-weight: 700;
margin: 5px 5px;
}
ul.yui-nav li a span { font-size: 16px; font-weight: 400; }
And here is the HTML...
<ul class="yui-nav">
<li>Preface</li>
<li>1<br/><span>Step</span></li>
<li>2<br/><span>Step</span></li>
<li>3<br/><span>Step</span></li>
<li>4<br/><span>Step</span></li>
<li>5<br/><span>Step</span></li>
<li>Submit</li>
</ul>
And here's a JS Fiddle with this all working (Don't mind the text not looking right)...
JS Fiddle
The problem I'm having is that when you hover over the circles, during the transition the border goes from a black square to the grey circle border. I just want a grey border to come out from the circle, and I don't understand why it's not happening correctly.
I'm not sure if i underestand your question. The problem is the black color from start the animation? You can fix it in the next lines:
...
ul.yui-nav li {
...
border-color:#ccc;
}
...
Is this correct?
Add border-radius: 50%; to your ul.yui-nav li selector. This tells it it's round even though it has no border.
Demo:
ul.yui-nav li {
border-radius: 50%;
display: inline-block;
text-align: center;
height: 110px;
width: 110px;
border: none;
background: none;
}