Is there a way to not apply certain CSS classes to a particular class or id? I have an image in a grid using the Materialize CSS framework. I would like it to break outside the grid and reach the corners of the screen. Essentially I want to exclude the .container, .row, and the .col css styles from a class called .break-grid. However, I would still like other styles to apply. (in this case .parallax-container and .parallax.
Is there a better way to go about "breaking out of the grid" than the way I'm pursing? A pure CSS/HTML solution would be preferred but I am willing to use Javascript/Jquery to solve this as well.
Here is a code sample of what I'm trying to do. I have no CSS as this is a css framework (I do not want to edit the framework). I would need css to fix change it I presume.
<div class="container">
<div class="row">
<div class="col">
<!-- Apply here -->
<h1>Things</h1>
<!-- Don't apply here -->
<div class="parallax-container break-grid">
<div class="parallax">
<%= image_tag('infos/home/test_parallax.jpg')%>
</div>
</div>
<!-- Apply here -->
<h2>Stuff</h2>
</div>
</div>
</div>
You can use the :not() CSS pseudo-class. ( On MDN )
.container > .row > .col > *:not(.parallax-container) {
//styling
}
Note: realize this is a demonstration, I'm not going through every BootStrap property that would be applied innately, and you would have to do that yourself:
.container > .row > .col > *:not(.parallax-container) {
background: rgba(0,0,255,.5);
}
<div class="container">
<div class="row">
<div class="col">
<h1>Things</h1>
// Do not apply here
<div class="parallax-container break-grid">
<div class="parallax">
<span>whatever</span>
</div>
</div>
<h2>Stuff</h2>
</div>
</div>
</div>
Personally, I would advise you to listen to everyone else and just build this thing using Cascading styles. :not is an excellent tool, but I get the impression that you're likely to abuse it/over-rely on it and get yourself in a bind style-wise.
In any case, good luck!
Related
I have the following structure:
<div class="container">
<div class="text1">...</div>
</div>
<div class="aside">
<div class="text2">...</div>
</div>
Is it possible when user is using mobile to get this structure:
<div class="container">
<div class="text2">...</div> (should be on top place)
<div class="text1">...</div>
</div>
<div class="aside"> (this class can be hidden)
</div>
I do not prefer the option with display: none/block. Is there way to do this with javascript?
Thank you!
This would be an easy approach in jQuery, but as #messerbill already mentioned, I would recommend you, to use responsive CSS frameworks such as Bootstrap or Bulma.
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$(".text2").prependTo(".container");
}
CodePen: https://codepen.io/dmnktoe/pen/GzwQaR
This may seem weird, I want to create a header as simple as this of Stack Overflow so I've been struggling writing the right codes.
<template name="DashboardLayout">
<hr>
<div class="row">
<div col-md-8 col-md-offset-9><center><input type="text" name="search" placeholder="Search.."></center> </div>
<div col-md-4 ><center><label>Profile</label></center> </div>
<div col-md-4 ><center><label>Settings</label></center> </div>
<div col-md-4 ><center><label>Videos</label></center> </div>
<div col-md-4 ><center><div class="dropdown">
<div class="dropbtn">Dropdown</div>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></center> </div>
</div>
<hr>
</template>
How can I achieve this using Bootstrap?
What are you asking for ? to give you the full HTML CSS and JS is needed ?
Check this link in Bootstrap the default example es basically what you want.
Logo, links (text or icon links), search bar and dropdown.
All responsive.
Then just play around the styles to get a better copy of this.
What you can do is add some custom classes for existing tags and write your own styles for corresponding classes.
or If you need simple customised version of this you can use this to build it easier
or this one https://work.smarchal.com/twbscolor/
read this if you want even mature look for your nav bar http://blog.jetstrap.com/2013/07/less-like-bootstrap/
I've built a standard layout with a sidebar using Bootstrap's grid system (EDIT: I'm using Bootstrap 4 but could still switch). It looks like this:
<div class="row">
<div class="col-md-3">
...
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
</div>
</div>
</div>
On mobile, the red area would be above the green one. I need to be able to switch between them in a way that is more convenient than scrolling, for example a switch button:
Also note the different oder of elements in the green area.
Is there a smart way to do this? Or do I have to alter the dom with JavaScript? Thanks in advance :)
You can use jQuery to toggle one of the BS4 flexbox utility classes. For example, apply the flex-last on the first (col-md-3) column.
To switch the order on mobile using a button, toggle the flex-last class...
$('#btnToggle').click(function(){
$('.col-md-3').toggleClass('flex-last');
})
EDIT: To show only one at a time (switch the visibility of the 2 divs using a button) toggle the hidden-sm-down class instead...
$('#btnToggle').click(function(){
$('.col-md-3, .col-md-9').toggleClass('hidden-sm-down');
})
Demo
In Bootstrap 4, column order can be toggled using CSS only, but this switches the cols based on screen width, and therefore is not triggered by the button.
<div class="row">
<div class="col-md-3 flex-last flex-md-unordered">
...
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
</div>
</div>
</div>
Update
As of Bootstrap 4 Beta 3, the ordering classes are named order-*, such as order-1, order-md-2, etc..
Bootstrap 4 uses Flexbox, which means you could utilise the order in which things are displayed.
As usual, you can specify how it's displayed on different viewports using classes like order-last and order-sm-unordered.
flexbox/order documentation
I have been struggling for some time on how to use shapes in Semantic UI.
I have been trying an example from their site http://semantic-ui.com/modules/shape.html#/definition but the animations are not working properly for me.
HTML CODE :
<div class="ui cube shape">
<div class="sides">
<div class="active side">
<div class="content">
<div class="center">
1
</div>
</div>
</div>
<div class="side">
<div class="content">
<div class="center">
2
</div>
</div>
</div>
</div>
</div>
JAVASCRIPT:
$('#btn').click(function(){
$('.shape').shape('flip up');
});
It's just a JQuery version problem:
This fiddle works.
This one doesn't.
So check the JQuery version you're using, it seems that the version should be upper than 1.8.
Semantic UI and Bootstrap will not play nice together when it comes to Shapes. You will have to manually remove the following CSS in Bootstrap to make it work:
.hidden {
display: none !important;
}
If having a .hidden class is crucial to your operation, rename it instead of removing it. Although I'm not familiar enough with Boostrap's inner workings to know if there are any internal dependencies on that class.
I want to force jQuery mobile to use my own CSS classes to override default values.
Changing the jQuery CSS classes (like ui-controlgroup) is not an option since I just want to change the style in some cases.
When I put the content of my CSS class in the style attribute of the div, my style is applied, but I don't want to use this attribute.
I tried adding my classes when the "mobileinit" event is fired, but it didn't work either.
Here is an example, my class is called "footer-column-left":
<div id="footerMainpage" data-role="footer" data-position="fixed" data-theme="a" class="ui-grid-b">
<!-- column 1 -->
<div class="ui-block-a" class="footer-column-left">
<div data-role="controlgroup" data-type="horizontal">
<button id="buttonLeft" data-icon="arrow-l" data-iconpos="notext">Move left</button>
</div>
<div data-role="controlgroup" data-type="horizontal">
<button id="buttonChooseTool" data-icon="edit" data-iconpos="notext">Choose tool</button>
<button id="buttonUndo" data-icon="back" data-iconpos="notext">Undo</button>
<button id="buttonRedo" data-icon="forward" data-iconpos="notext">Redo</button>
<button id="buttonSave" data-icon="check" data-iconpos="notext">Save</button>
</div>
</div>
<!-- ... -->
</div>
The CSS looks like this:
.footer-column-left { display: inline-block !important; text-align:left !important; padding-left: 10px !important; }
Thanks in advance for your help!
Edit: Adding the classes when the "pageinit" event is fired worked for me, so no further help is needed ;-)
These two things worked for me:
adding the css class when the "pageinit" event is fired using:
$('#footerColumnLeft').addClass('footer-column-left');
using the id in the CSS selector:
#footerColumnLeft { text-align:left; padding-left: 10px; }