I'm using multiple window on the same page and i want to apply
different styles on which window. I try to write a wrapper over the
window so it can be identified in the css by id but that does not work.
This is the source:
<div class="wrapper">
<div kendo-window="InitialisingApp">
</div>
</div>
This is the result:
<div class="wrapper"></div>
<div class="k-widget k-window....">
..........................
</div>
Any ideas about this problem?
Thank you! Have a nice day!
You can take a look at this:
Limit scope of external css to only a specific element?
Only other option that I see is to copy the theme and add a css selector in front of everything so that the theme only apply when wrapped with a specific class. Also keep in mind the CSS priorities to make sure the blue style gets applied over the default style.
Example:
<style>
.blueStyleWrapper .k-window {
/* Some kendo styles */
}
</style>
<div class="blueStyleWrapper">
<div class="k-window">
This window will be using the blue theme!
</div>
</div>
Related
Because Bootstrap 4 uses SASS for components like cards, I'm having trouble overriding it in CSS since I haven't used SASS before.
I see ways to override configuration files in a server node.js environment, but for a basic index.html file linked to Bootstrap and a custom CSS file, how do you go about setting margin bottom to 0?
HTML here:
<div class="card mb-3" id="sheet-footer">
<div class="card-header text-center">`=
<h3 class="card-title">
Content
</h3>
</div>
</div>
Chrome dev tools show the following:
.mb-3, .my-3 {
margin-bottom: 1rem!important;
}
Any attempts to override margin-bottom (even with the terrible HTML style tag) don't beat this rule - what's the proper way to override this?
Thanks in advance.
If you don't want a margin bottom remove the class mb-3
If you only want a margin bottom on specific breakpoints bootstrap 4 allows mb-md-3
see https://getbootstrap.com/docs/4.0/utilities/spacing/
I need a way to identify a 2nd modal as being a child of the first, eg:
.modal .modal {
/*change some styles to make nested modal look different*/
}
Even though I place the HTML of the 2nd modal within that of the first, when the Browser loads Bootstrap compiles them to sit independently outside of the #wrapper.
Eg, I set it up as this:
<div id="wrapper">
<div class="modal">
<div class="modal"></div>
</div>
</div>
But on browser load I get this:
<div id="wrapper"></div>
<div class="modal"></div>
<div class="modal"></div>
So my css (.modal .modal) deosnt work.
Would anyone know how I can identify a child modal?
(I know I can put IDs on them, but as these modals are shared on other pages and appear as stand alone [non-nested] modals, styling the ID directly would not work).
You can open a modal via a modal. That should solve your issue :)
I found a not-so-elegant way to do this with JQuery, but am open to better suggestions.
$(".modal [data-toggle='modal']").each(function( index ) {
$(this).click(function() {
var modalref = $(this).attr('data-target');
$(modalref).addClass('child-modal');
});
});
$('.modal [data-dismiss="modal"]').click(function() {
$('.modal').removeClass('child-modal');
});
I have made 2 Divisions out of bootstrap property <div class="col-md-12" > on the same page. In the first one, I have added a different Background and some hover property, now in the second one I have to make a "Sign Up" Div but with other properties with the same <div class="col-md-12" > ie. Full page width row. But the changes are happening on both the Divisions.
Can somebody Help ?
I am using Visual Studio 13 for aspx webpage.
Sorry if it is a silly question.
Thanks In Advance.
You can append another class to the ones you want to style:
<div class="col-md-12 styleme">
Content
</div>
CSS:
.styleme {
background-color: #000;
}
This way, you can style the div using your own custom class as opposed to overriding BootStrap's native one.
NOTE: ensure to place the custom style in your own custom CSS file and ensure it is referenced in your site AFTER the BootStrap CSS file.
I am creating an application and I am using the ReactJS Griddle component. I am trying to create a custom row component but it keep applying an inline style like so:
<div class="myCustomRowClass" data-reactid="react_id" style="clear:both;display:table;width:100%">
I would need to override the style so I can set display: grid;. The reason for this is that I am using Semantic-Ui for the user interface, and when I do something like this:
<div class="ui four cards">
<div class="ui card">
/* content */
</div>
<div class="ui card">
/* content */
</div>
/* etc... */
</div>
instead of display a grid of 4 card per row, it displays one card per row.
Is there a way I can override the style?
Help appreciated.
I have found the answer to this. I should have used customGridComponent instead of customRowComponent and render my data in the CustomGridComponent
I am trying to define styling for second sibling's child element based of first sibling's class.
Here is an example of what I am trying to achieve
<div >
<div class="one">
<div class="find edit">
Find me
</div>
</div>
<div class="two">
<div class="change">
Change me
</div>
</div>
</div>
In this example, I want "Change me" to be green if "edit" class is found. Is it possible to achieve this purely based on css?
Help much appreciated.
Thanks,
Medha
As far as I know, it's not possible to access the parent selector (I wish it was). If you could consider this structure, it'll be no problem at all:
HTML
<div>
<div class="one edit">
<div class="find">
Find me
</div>
</div>
<div class="two">
<div class="change">
Change me
</div>
</div>
</div>
CSS
.one.edit + .two .change { color: green; }
If not, you could easily accomplish what you're after with a little JavaScript.
Here You can find answer:
Complex CSS selector for parent of active child
Short answer copied from link:
Selectors are unable to ascend
CSS offers no way to select a parent or ancestor of element that
satisfies certain criteria. A more advanced selector scheme (such as
XPath) would enable more sophisticated stylesheets. However, the major
reasons for the CSS Working Group rejecting proposals for parent
selectors are related to browser performance and incremental rendering
issues.
Update:
Now I notice the edit class required in the child. You cannot.
simply you need something like a parent selector, and this doesn't exist in CSS 3, it's suggested in CSS 4 though, but that's far from happening any time soon.
More here:
CSS selector for "foo that contains bar"?
.
Original:
Depending on which browsers you care about, this may work:
div.one + div.two > div.change {
color: green;
}
Reference:
http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors
Live Example:
http://jsfiddle.net/Meligy/NVjq6/