I have an app with Rails + Devise + Tailwind. I have a form with this submit button:
<%= f.submit "Login", class: 'w-full text-white bg-blue-700 hover:bg-gray-500 font-bold rounded-lg text-sm px-5 py-2.5 text-center mt-5' %>
and it works well and if I try to change the font size it works, but if I try to change the background color to bg-blue-300 or other different than bg-blue-700 it becomes transparent.
I tryed to add inline style style="color:red;" and it works but we cant add hover background color with inline style.
I could create a plugin inside tailwind.config.js but that doesn't resolve why is that happening.
Thanks
I just solved it, but I dont belive this is a good practice.
I removed from my css file output.css the default value for this this type of button (submit) and now is working
From this:
button,
[type='button'],
[type='reset'],
[type='submit']{
-webkit-appearance: button;
/* 1 */
background-color: transparent;
/* 2 */
background-image: none;
/* 2 */
}
to this:
button,
[type='button'],
[type='reset'] {
-webkit-appearance: button;
/* 1 */
background-image: none;
/* 2 */
}
Related
So I'm trying to add in a glyphicon of a check mark next to the word once it's been clicked by the user. Imagine you click the button TEST and the entire button changes color and a checkmark shows to the left of the word test.
I have the following:
<button type="button" class="btn wk-prd-btn" style="margin-right: 15px;"><span class="fa fa-check-circle"></span>TEST</button>
Then for CSS I have:
.wk-prd-btn:focus {
background-color: #e74481;
color: white;
}
.wk-prd-btn:hover {
background-color: #e74481;
color: white;
}
I've considered putting a div around the button and doing an overlay in the CSS but then that affects the text for the button itself which I don't want to do. Any suggestions on how to handle?
Used the following:
<button type="button" class="btn wk-prd-btn wk-click"> MUG</button>
Then in the CSS:
.wk-click:focus:before{
content: "";
font-family: "fontawesome";
}
Just need to get the buttons to maintain their click. Hopefully my blunder helps others.
I was playing around with the SCSS and Variable Classes in order too customize my Progress bar the same as my theme.
The progress bar styling is Blue and White and when adding styling it changes to Green & Grey no matter what styling I use.
I used these two Webkit Pseudo classes:
-webkit-progress-bar
-webkit-progress-value
"It worked in the browser but not on the device."
Is there any special way to do this or am I just missing it.
EDIT
HTML
<ion-item class="item-stable" ng-click="navtoPhases()">
<div class="row">
<div class="col"><h2>Chassis Prep</h2></div>
<div class="col"><progress class="progress" max="100" value="{{ ph[0].Chassis }}"></progress></div>
</div>
</ion-item>
SCSS
progress.progress{
// -webkit-progress-bar: #ffc900 !important ;
// -webkit-progress-value:#ef473a !important ;
color:#33cd5f;
background-color:#3299E6;
width: 50;
}
The changes can be seen on this jsfiddle page I am using Google, other browsers may defer like fox and opera.
There is a nice article here, that explains how you can override styling of progress bars in CSS. In the article, several ways of overriding the default styling of progress bars are discussed, but the only one you really need is the one for Chrome/Webkit, which I have posted below for your convenience.
progress[value] {
-webkit-appearance: none;
appearance: none;
}
progress[value]::-webkit-progress-bar {
background-color: #33cd5f;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-webkit-progress-value {
background-color: #3299E6;
border-radius: 2px;
}
I have created a select menu next to a button. I wonder how can I get the select menu be at the same Y of the button? (Ideally I would like it to be of the same height too but that is another thing I guess...)
As the shown code I have no configuration other than the select width:
HTML:
<div>
<button>button</button>
<select>
<option>nacho</option>
<option>tama</option>
</select>
</div>
jqueryui JS
$('button').button();
$('select').selectmenu({
width: 120 // Needed to show see options
});
Current Result:
Fiddle that show the problem: https://jsfiddle.net/9xv7jqn4/2/
Is this a bug or a setting I am missing? Any help is appreciated
EDIT:
Thank you for the answers, I am still testing them in my code... I am also interested in know why this happens? Why the selectemenu is taking more space than it looks? Is this a bug of selectmenu widget?
Maybe with this css:
display: inline-flex;
vertical-align: middle;
Your fiddle with the changes: https://jsfiddle.net/9xv7jqn4/3/
Based on thread: "jQuery ui selectmenu vertical position offset (relatively to buttons in this line) " and suggestions here too I ended up adding a couple of rules that fix my case.
I don't know why but ui-selectmenu-button is not vertical-aligned as other buttons. Also decreased the padding of inner text so it looks almost (not exactly) the same height as other buttons.
.ui-selectmenu-button {
vertical-align: middle;
}
.ui-selectmenu-button .ui-selectmenu-text {
padding-top: 0.3em; padding-bottom: 0.3em;
}
You can use
vertical-align: top;
for your button like here: https://jsfiddle.net/9xv7jqn4/4/
$('button').button();
$('select').selectmenu({width: 120});
div,
button,
select{
border: thin dotted red;
}
span {
border: thin dotted blue;
}
.one{
vertical-align: top;
}
<div>
<button class='one'>button</button>
<select>
<option>nacho</option>
<option>tama</option>
</select>
</div>
Another good option is to add wrappers like here: https://jsfiddle.net/9xv7jqn4/6/
$('button').button();
$('select').selectmenu({width: 120});
div,
button,
select{
border: thin dotted red;
}
span {
border: thin dotted blue;
}
.w{
display:inline-block;
vertical-align: middle;
}
<div>
<div class='w'>
<button>button</button>
</div>
<div class='w'>
<select>
<option>nacho</option>
<option>tama</option>
</select>
</div>
</div>
I'm using RoR to make a one-month rails website. This is the code from the styles.css.scss sheet. It utilizes bootstrap. I am unsure as to why but the button color does not change despite the $btnPrimaryBackground: green text. Does anyone have any ideas or thoughts on why the button color doesn't change? Thanks.
$baseFontFamily: Oxygen;
#import url(http://fonts.googleapis.com/css?family=Oxygen);
$navbarBackgroundHighlight: white;
$navbarBackground: white;
$btnPrimaryBackground: green;
#import 'bootstrap';
body{
padding-top: 60px;
}
#import 'bootstrap-responsive';
.navbar-inner{
#include box-shadow(none !important);
border: 0;
}
.footer{
margin-top: 50px;
color: $grayLight;
a{
color: $gray;
}
}
If you are using Bootsrap with LESS, you can simply do:
.btn-primary {
.buttonBackground(#yourColor, #yourColorDarker); //(button, hover)
}
If not then you simply override the button class which you want to change color:
.btn-warning { background-color: Your color; } //button
.btn-warning:hover { background-color: Your color; } //hover
Furthermore, since it appears you want to change the button color to green why dont you use the .btn-success class like so:
<%= button_tag "Hello", :class => "btn btn-success" %>
Source: Styling twitter bootstrap buttons
In Bootstrap 3 buttonBackground doesn't work anymore, you have to use button-variant(#color; #background; #border) like this:
.btn-custom {
.button-variant(#custom-color, #custom-color-bg, #custom-color-border);
}
You can also make your own and inherit from .btn-default. In SCSS like this:
.btn-custom { #extend .btn; #extend .btn-default; color: #6EA81A; }
I would like to use jQuery UI tabs but I need the tabs aligned right … That's "easy" since I can modify the tabs container class and extend it.
But the thing is I want to add a "title" on the left, as shown in this screenshot:
http://cl.ly/400D0E3z0f272h1B3x3R
How can I do it in a clean way ?
(A dirty way could be to prepend/append a div to the tabs tag, adding the DOM on the fly … I'm looking a cleaner way :)
Thank you in advance
First there is nothing dirty adding elements to the dom on the fly :-)
Secondly, you could simply add an element in the markup, for instance a <h3> (let's be semantic (and assume you got other titles before)):
<div id="tabs">
<h3 class="ui-tab-title">My Title</h3>
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
...
</div>
and position it with css:
/* float tab buttons to right */
.ui-tabs .ui-tabs-nav li { float: right !important; }
/* position:relative on container will make the title position:absolute relative to the container */
#tabs { position: relative; }
/* absolute position the title */
.ui-tab-title { position: absolute; left: 20px; top: 15px; }
Here's a jsfiddle to illustrate
Edit:
As you pointed out, floating right the <li> inverts their order.
You could invert the order of the list items in the markup itself but this will mess up the whole logic.
Here's a piece of css to right align the tab button while keeping the markup and the visual order in place:
/* align right the <ul> container */
.ui-tabs .ui-tabs-nav { height: 2.35em; text-align: right; }
/* jquery ui css floats-left the <li> so un-float them */
.ui-tabs .ui-tabs-nav li { display: inline-block; float: none; }
I've changed the fiddle accordingly.