Hello I need to apply css on a button using value attribute.
But it's not taking the css
button[value=Export List to Excel] {
margin-top: 14px;
background: red;
}
<button type="submit" id="cp_export_excel" name="cp_export_excel" value="Export List to Excel" class="btn btn-warning form-submit icon-before"><span class="icon glyphicon glyphicon-export" aria-hidden="true"></span> Export List to Excel</button>
How will I implement this one. I need to specifically use value attribute only.Can somebody please help.
You must put your value expression in quotes, as your spaces breaks CSS rule match:
button[value="Export List to Excel"] {
margin-top: 14px;
background: red;
}
<button type="submit" id="cp_export_excel" name="cp_export_excel" value="Export List to Excel" class="btn btn-warning form-submit icon-before"><span class="icon glyphicon glyphicon-export" aria-hidden="true"></span> Export List to Excel</button>
Related
I have a pretty familiar bootstrap modal with the submit button on the left of the close button in the footer. But I am disabling the submit button for a particular invalid form filling, but I am thinking of doing one of a few things - making the button appear enabled so that people can click it and the error will pop-up in a tooltip. Or, I will leave the button with its familiar disabled appearance but if someone clicks it, it will show them the tooltip. Either way I need the div to over the top of the submit button no matter the circumstance:
#clickable {
position: absolute;
width: 55px;
height: 25px;
background-color: pink;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal-footer">
<div id="clickable"></div>
<button type="button" id="mapOneSubmit" class="btn btn-success btn-submit mapSubmit" disabled>✓ Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="far fa-times-circle"></i> Close</button>
</div>
(I just made it pink so I can see where it is landing). Currently this goes over the close button and not the submit button. Any ideas how to get it to fit snuggly over the submit button?
I'm not sure I got your point. If you just want to hide the button, you can use a pseudo element.
Why not using a pseudo-element?
Basically, you use position: relative inside your button to make it a new space reference. It will be use as a reference for the pseudo-element which is inside, and you strech it with top/bottom/left/right: 0, and that's it.
No need to add some DOM just for styling purpose.
.btn-submit:disabled {
position: relative;
}
.btn-submit:disabled::after {
background-color: pink;
bottom: 0;
content: '';
left: 0;
position: absolute;
right: 0;
top: 0;
}
<div class="modal-footer">
<button type="button" id="mapOneSubmit" class="btn btn-success btn-submit mapSubmit" disabled>✓ Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="far fa-times-circle"></i> Close</button>
</div>
If you want it to be the tooltip, you'll have to wrap both the tooltip and the button:
.tooltip-container {
display: inline-block;
position: relative;
}
.tooltip {
background-color: pink;
position: absolute;
left: 0;
top: 0;
width: 55px; //Note that fixing size is probably a bad idea.
height: 25px;
}
<div class="modal-footer">
<div class="tooltip-container">
<div class="tooltip">This is the tooltip.</div>
<button type="button" id="mapOneSubmit" class="btn btn-success btn-submit mapSubmit" disabled>✓ Submit</button>
</div>
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="far fa-times-circle"></i> Close</button>
</div>
Im working with a DataTable that has a column containing two Bootstrap-styled buttons. For some reason the button on the right is slightly smaller than the left one.
Image of said problem
Below the code:
<div class="btn-group">
<button type="button" class="btn btn-success btn-block mr-4" style="font-size:20px"> Hoogbouw</button>
<button type="button" class="btn btn-danger btn-block" style="font-size:20px"> Laagbouw</button>
</div>;
Css:
.dataTable tbody tr {
height: 425px;
}
.btn-group{
width: 100%;
height: 100%;
}
h1{
text-align: center;
}
Anything wrong?
Need you to provide additional code, what you have appears fine but what does each individual button look like in terms of formatting? Colours don't default to red and green.
This question already has answers here:
Can you target an element with CSS only if 2 classes are present?
(2 answers)
Closed 4 years ago.
I have this button:
<button type="button" class="btn btn-link btn-link-dark">
<i class="material-icons">help</i>
</button>
When I hover over it, it becomes blue. I want to alter this.
This does the trick:
.btn-link:hover {
color: white;
}
But I only want this when the class btn-link-dark is included.
These syntax, used seperate, don't work:
.btn-link-dark .btn-link:hover {
color: white;
}
.btn-link-dark:hover .btn-link:hover {
color: white;
}
I don't want a third class.
By putting a space between the classes, you're using the descendant combinator.
.btn-link-dark .btn-link
translates to "A .btn-link which is a descendant of a .btn-link-dark". To indicate that one element needs both class names, don't put a space between them, eg .btn-link-dark.btn-link:hover:
.btn-link-dark.btn-link:hover {
color: white;
}
<button type="button" class="btn btn-link btn-link-dark">
<i class="material-icons">help (hover effect)</i>
</button>
<button type="button" class="btn btn-link">
<i class="material-icons">help (no effect)</i>
</button>
You can override using !important;
This approach can be used if you want to override existing hover styles with your styles.
.btn-link-dark.btn-link:hover {
color: red;
}
.btn-link-dark.btn-link:hover {
color: green !important;
}
<button type="button" class="btn btn-link btn-link-dark">
<i class="material-icons">help</i>
</button>
.btn-link.btn-link-dark:hover {
color: blue;
}
.btn-link:hover {
color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-link btn-link-dark">
<i class="material-icons">help</i>
</button>
https://jsfiddle.net/Sampath_Madhuranga/aq9Laaew/158765/
This works fine.
I want to change bootstrap glyphicon color to "yellow" because current color is showing in white that looks like Delete button. How can i change color of glyphicon-folder-close or use any other glyphicon that display folder image better ?
main.html
<button type="button" class="btn btn-info btn-lg" ng-click="serverFiles()" style="margin-left: 10px"><span class="glyphicon glyphicon-folder-close"></span></button>
You can also change the icon/text by adding to the class "text-success" for green, "text-danger" for red etc. This will change the color of the icon itself.
<span class="glyphicon glyphicon-usd text-success"></span>
Also this has been answered here.
Change the color of glyphicons to blue in some- but not at all places using Bootstrap 2
Use color
<button type="button"
class="btn btn-info btn-lg" ng-click="serverFiles()"
style="margin-left: 10px; color:#FF0000;">
<span class="glyphicon glyphicon-folder-close"></span></button>
But remember that it is desirable to avoid the use of inline style is better use classes or references based on external css configuration items
<button type="button"
class="btn btn-info btn-lg mybtn-blue" ng-click="serverFiles()"
style="margin-left: 10px;">
<span class="glyphicon glyphicon-folder-close"></span></button>
edn for external css
.mybtn-blue {
color: blue;
}
Use the following HTML code
<button type="button" class="btn btn-info btn-lg" ng-click="serverFiles()" style="margin-left: 10px"><span class="glyphicon glyphicon-folder-close yellow"></span></button>
And the css code
.yellow {
color: #FFCA28;
}
here is the demo http://jsfiddle.net/S3R23/1217/
You can change color of the icon by directly specifying color name, however this will only apply to targeted icon.
To change the color, do this:
<span class="glyphicon glyphicon-folder-close" style="color:#ffff00"></span>
Just edit the span tag in your code to the one above, making your code to look like this:
<button type="button" class="btn btn-info btn-lg" ng-click="serverFiles()" style="margin-left: 10px"><span class="glyphicon glyphicon-folder-close" style="color:#ffff00"></span></button>
You can change glyphicon color to any value. see below given example
<span aria-hidden="true" class="glyphicon form-control-feedback glyphicon-ok"></span>
//css
.glyphicon.form-control-feedback.glyphicon-ok{
color: #20032d !important;
}
I'd like to show a <h4> in line with a <button>:
<h4 style="display:inline-block;">headline</h4>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle btn-dropdown-flat" type="button">
<span>Button</span>
</button>
</div>
https://jsfiddle.net/punwaew1/1/
Result: the two elements are shown below each other. Why?
Because h4 and .dropdown are on the same level. Set display: inline-block for the elements on the same level to make them align.
h4,
.dropdown {
display: inline-block;
vertical-align: top;
margin: 0;
}
<h4>headline</h4>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle btn-dropdown-flat" type="button">
<span>Button</span>
</button>
</div>
The default value of display on a <div> element is display:block;. You have to set the display:inline-block; to the <div> too!
Simply add the following rule (https://jsfiddle.net/punwaew1/5/):
div.dropdown {
display:inline-block;
}
Add line style to <div class="dropdown" **style="display:inline-block;"**>
DEMO 1
OR use proper rows and column of bootstrap to get best results and consitency.
Here is your fiddle Just give display: inline-block to dropdown div
https://jsfiddle.net/sesn/punwaew1/4/
This can be done without any extra css. So in-order to make your button inline with your headline, place the button between the <h2></h2> heading tag.
Structure:
<h1>Headline
<button class="btn btn-default dropdown-toggle btn-dropdown-flat" type="button">
Button
</button>
</h1>
Have a look at your updated fiddle here