Understanding Css Grouping - html

(This might be a beginner question so you are welcome to refer me to other docs or questions)
I am trying to create sub classes in css. I want a group of general buttons like btn.general.X (btn general plain, btn general alert, btn general secondary) and a group of sidebar buttons like btn.sidebar.X (btn sidebar general, btn sidebar alert, btn sidebar secondary).
Is there a way to split the .btn.general class so that it is not applied to all the subclasses. My example here shows how I want to create two different groups of buttons, but currently any button that has the classes btn and general is getting the .btn.general styles. I don't want the .btn.sidebar.general to get the .btn.general styles.
I checked through what I know but I'm not sure how to fix this.
.btn.general {
border: 1px solid red;
}
.btn.sidebar {
background-color: orange;
}
<html>
<div class="main">
<div class="container">
<button class="btn general plain" (click)="Login()">Login</button>
<button class="btn general plain" disabled>Toets Button</button>
<br><br>
<div style="background-color: rgb(196, 196, 196); width: 150px;">
<button class="btn sidebar general">Dashboard</button>
<button class="btn sidebar general">Global</button>
<button class="btn sidebar general">System</button>
<button class="btn sidebar general">Preferences</button>
</div>
</div>
</div>
UPDATE
So after going through all the answers I believe that my approach is wrong. If you want .btn.general to not be applied to btn.sidebar.general then make the first one .btn-general, then add .btn-general.foo (.error/.plain), and with the sidebar do .btn-sidebar.foo (.error/.plain). Grouping CSS seems like a very debatable topic so just go with what works for you I guess.
This link from the comment below by #Paulie_D helps a lot: https://css-tricks.com/bem-101/


Use not CSS selector.
See this
.btn.general:not(.sidebar) {
border: 1px solid red;
}
.btn.sidebar {
background-color: orange;
}
<html>
<div class="main">
<div class="container">
<button class="btn general plain" (click)="Login()">Login</button>
<button class="btn general plain" disabled>Toets Button</button>
<br><br>
<div style="background-color: rgb(196, 196, 196); width: 150px;">
<button class="btn sidebar general">Dashboard</button>
<button class="btn sidebar general">Global</button>
<button class="btn sidebar general">System</button>
<button class="btn sidebar general">Preferences</button>
</div>
</div>
</div>


There is an option to use attribute selectors in css. It is common to use attribute selectors in case of elements like input - input[type='text']. You may try the same method here also. Please check the below example.
button[class='btn general']{
background: green;
}
<button class="btn general">Login</button>
<button class="btn general sidebar">Toets Button</button>


You need to use the cascade in the Cascading Style Sheet.
First, identify which styles are common to all buttons:
button {
[... Styles which apply to all buttons in the document... ]
}
Then, identify which styles apply only to a subset of buttons:
.container button {
[... Specific styles which only apply to buttons in .container ... ]
}
Then, identify which styles apply to an even more specific subset of buttons:
.container .sidebar button {
[... More specific styles which only apply to buttons in .container .sidebar... ]
}
Working Example:
button {
margin: 12px;
padding: 6px;
font-weight: bold;
}
.container button {
font-style: italic;
border: 2px solid rgb(255, 0, 0);
}
.container .sidebar button {
font-style: normal;
background-color: rgb(255, 127, 0);
}
main {
background-color: rgb(227, 227, 227);
}
.container {
background-color: rgb(191, 191, 191);
}
.sidebar {
background-color: rgb(127, 127, 127);
}
<main>
<button>Button 1</button>
<button>Button 2</button>
<div class="container">
<h2>Container</h2>
<button>Button 3</button>
<button>Button 4</button>
<div class="sidebar">
<h3>Sidebar</h3>
<button>Button 5</button>
<button>Button 6</button>
</div>
<button>Button 7</button>
<button>Button 8</button>
</div>
</main>
<p>All buttons have <strong>bold text</strong>.</p>
<p>All buttons in <code>.container</code> have a <span style="color: rgb(255, 0, 0);">red border</span>.</p>
<p>All buttons in <code>.sidebar</code> have an <span style="color: rgb(255, 127, 0);">orange background</span>.</p>
<p><strong><em>But...</em></strong> note that the text in the <code>.sidebar buttons</code> is not <em>italic</em> because it has a more specific declaration than all other buttons in <code>.container</code>.</p>
Clarification of CSS syntax
I think I understand the way you're looking at it now.
The first - very important thing you need to know - is that CSS classes do not have spaces.
When you see something like this:
class="button magical spell"
what you're looking at is a space separated list of classes. The element has the class .button applied to it, the class .magical applied to it and the class .spell applied to it.
If, elsewhere, you this:
class="button magical wand"
that element has the class .button applied to it, the class .magical applied to it and the class .wand applied to it.
That is to say, both elements have the classes .button and .magical applied to them.

Related

Making a clickable div overlay a button

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>

Two buttons in one DataTable cell; one is smaller than the othr

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.

Overwrite 'hover' when another specific class is included [duplicate]

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.

HTML/CSS- Button alignment

I'm new to HTML/CSS, so I'm still working out the tags and their uses... This is what my page looks like atm.
This is the goal- sorry for the bad paint drawing..
I want to increase the size of the buttons, "+" and "-", and make them closer to the dropdown, and to the right of the dropdown...Currently, I can only get it this near.
<button type="button" class="button6" id="add_service">+</button>
<button type="button" class="button6" id="delete_row">-</button>
This is the HTML code I have for it. I have a header in CSS to link to, and I've been playing around with it, but I can't get the alignment right...How can I get it to look similar to my paint drawing?
CSS :
.button6 {
text-align: right;
content: "\00a0 \00a0 ";
}

Here is my solution
Its not perfect, but it will give you starting point
.parent {
width: 150px;
}
select {
width: 100%;
margin-bottom:5px;
}
.btns {
text-align: right;
}
<div class="parent">
<select>
</select>
<div class="btns">
<button type="button" class="button6" id="add_service">+</button>
<button type="button" class="button6" id="delete_row">-</button>
</div>
</div>

Bootstrap 3 "btn-group" non-responsive behavior on small screens

Is there a bootstrap 3 way to handle small screen sizes for "btn-group"?
Button group is placed in <td> and wrapped in <div class="btn-group">:
Looks okay, until you re-size it to <768px. Then you have:
How to make them persistent? I tried to add class btn-group-justified. But it gives as a result full width buttons and looks even worse on re-size to small screen size.
P.S> I have an idea, how to implement it adding full set of custom classes. My question is about bootstrap3 way. May be I missed something.

You can create two button groups with the same buttons and make one of them btn-group-vertical. Then after applying the hidden-xs and visible-xs to them you can hide and show vertical group on appropriate screen size.
<div class="btn-group hidden-xs">
<button class="btn btn-default">View</button>
<button class="btn btn-default">Delete</button>
</div>
<div class="btn-group-vertical visible-xs">
<button class="btn btn-default">View</button>
<button class="btn btn-default">Delete</button>
</div>
Unfortunately, this requries repeating the markup of the buttons but it should not be an issue if you use any templating tool (define the markup once and include it twice).
Wide screen:
Narrow screen:
See the JSFiddle.

I want to offer you a version with icons from FontAwesome.
With a minimum screen resolution text hide leaving only icons.
Sorry for my english.
<div class="btn-group">
<button class="btn btn-default" title="View"><i class="fa fa-eye"></i><span class="hidden-xs"> View</span></button>
<button class="btn btn-default" title="Delete"><i class="fa fa-times"></i><span class="hidden-xs"> Delete</span></button>
</div>
UPDATE by Vishal Kumar: add GLYPHICONS preview
Check this fiddle: http://jsfiddle.net/Jeen/w33GD/4/

Here's an alternative to #fracz's answer you can try that won't duplicate HTML content. Just copied the css from btn-vertical-group and btn-group and used a media query.
All you have to do is add btn-toolbar-responsive to the toolbar div's classes.
It's in scss for simplicity although you can convert it online easily. Here is the JS Bin:
demo
SCSS:
.btn-toolbar.btn-toolbar-responsive{
text-align: center;
margin: 0;
.btn-group{
float: none;
}
#media (max-width: 767px){
.btn + .btn,
.btn + .btn-group,
.btn-group + .btn,
.btn-group + .btn-group {
margin-top: -1px;
margin-left: 0;
}
.btn-group{
position: relative;
display: block;
vertical-align: middle;
margin: 0;
.btn {
display: block;
float: none;
max-width: 100%;
}
.btn:not(:first-child):not(:last-child) {
border-radius: 0;
}
.btn:first-child:not(:last-child) {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn:last-child:not(:first-child) {
border-top-right-radius: 0;
border-top-left-radius: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
}
.btn-group:not(:first-child):not(:last-child) {
.btn {
border-radius: 0;
}
}
.btn-group:first-child:not(:last-child) {
.btn:last-child, .dropdown-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
}
.btn-group:last-child:not(:first-child) {
.btn:first-child {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
}
}
}

Okay, so this worked in a test page I made:
<div class='btn-group'>
<button class='btn btn-default col-xs-6'>View</button>
<button class='btn btn-default col-xs-6'>Delete</button>
</div>
Forcing each button to be 50% using col-xs-6 kept it from wrapping in my own test page modeled after your example. However, if you have a wider table than the example and you squish down to 320px, the text will overflow the buttons and it looks even worse than your bad example.
You may already know this and it may not be practical for your situation, so I apologize if I'm just presenting unhelpful examples. However, if your table is much wider than what you posted as an example, I would suggest making your rows using the BS grid instead of a table. What this allows you to do is make a single row become two rows when the page shrinks, e.g.
<div class='row'>
<div class='col-xs-12 col-sm-6'>Some additional details</div>
<div class='col-xs-6 col-sm-3'>Date</div>
<div class='col-xs-6 col-sm-3'>
<div class='btn-group'>
<button class='btn btn-default col-xs-6'>View</button>
<button class='btn btn-default col-xs-6'>Delete</button>
</div>
</div>
</div>
then, just find a way to alternate colors, add borders, or whatever you need to show the separation between the multiple row rows.
In the BootPly that I just made, as I said, the buttons start to overlap at very small sizes, but they don't wrap when inside a <td> in my browser tests:
http://www.bootply.com/117330

try to set min-width on <td>
<td style="min-width: 90px">
<div class="btn-group">
<button class=" btn btn-default btn-circle" type="button">
<i class="fa fa-check"></i>
</button>
<button class=" btn btn-default btn-circle" type="button">
<i class="fa fa-question"></i>
</button>
<button class=" btn btn-default btn-circle" type="button">
<i class="fa fa-times"></i>
</button>
</div>
</td>

<div id="secondNav" class="btn-group" role="group">
<button class='btn btn-default'>View</button>
<button class='btn btn-default'>Delete</button>
</div>
You can accomplish this with some simple jQuery
<script>
$(window).resize(function() {
justifyBtnGroup('secondNav');
});
function justifyBtnGroup(id) {
var btnGroup = $('#' + id);
if($(window).width() > 768) {
btnGroup.addClass('btn-group').removeClass('btn-group-vertical');
} else {
btnGroup.removeClass('btn-group').addClass('btn-group-vertical');
}
}
justifyBtnGroup('secondNav'); // will run when page loads
</script>

This help for me. It doesn't make the buttons vertical, but it doesn't compress them either
<div class="btn-group flex-wrap" data-toggle="buttons">

No, If you open page in small screen, bootstrap wrap you buttons.

<div class="btn-group btn-group-lg">...</div>
<div class="btn-group">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>
you can add the class (btn-group-xs,btn-group-sm) in the media < 720px
hope it will help you ;)