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
Related
My Angular 8 app has a simple structure:
app.component.html:
<app-main-nav></app-main-nav>
<div id="main-container">
<router-outlet></router-outlet>
</div>
I would like the <app-main-nav> (which is like a conventional "left nav") to be 160px wide, and 100% of the viewport tall. The <div id="main-container"> should fill the rest of rest of the screen.
Ordinarily, I would make the entire page (body?) a flex container, and set the flex properties on the <app-main-nav> and <div id="main-container"> elements.
But, how to do I set the css properties of the <app-main-nav> component? How to I select it in app.component.css?
Just put in your app.component.css something like:
app-main-nav {
/*your css rules */
}
you could also select the component by id or class. Be aware that Angular components are inline by default so you may have to set it's display property to block or something like that.
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 am working on a website using drupal. I have created a view with several fields. I want to set some if the field inline horizontally not not one after another vertically. Please help me in the context.
I want to set these ratings start , I'm interested button and Read More link in a row.
If you're familiar with html and css, you can create a new "Global: Custom Text" field.
Exclude the other fields from display, and use Replacement Patterns inside styled div-containers specified in the custom text field.
Little dirty example working with float:
<div style="width:50%;height:200px;float:left;">
<div style="width:100%;">Next div below me</div>
<div style="width:100%;">Previous div above me [somereplacementpattern]</div>
</div>
<div style="width:50%;height:200px;float:left;">
<div style="width:auto;float:left;">Next div on my right</div>
<div style="width:auto;float:left;">Previous div on my left<div>
</div>
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>
Currently I have this gallery:
[http://jsfiddle.net/52VtD/8912/][1]
What I want is this:
[http://prntscr.com/53wz9q][2]
If you are using bootstrap 3, I have some experience to share.
Firstly it's better for u to customize /control
css styles if you download them locally instead of using cdn(script loaded from other server);
2.Your question seems to override the default bootstrap 3 grid padding, margin;
Here is one live bootstrap 3 site for reference.
url: http://glow-raspberry.com/
by viewing the source code you can use below code block to remove default margin and padding after css override;
supposing u have created styles such as
<style>
.margin-0 { margin:0px;}
.padding-0 { padding:0px;}
</style>
and applies to bootstrap html grid;
<div class="row margin-0">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 padding-0">
</div>
</div>
"col-lg-12 col-md-12 col-sm-12 col-xs-12" the value in this line should be set according to your responsive needs, according to your demo case url: http://prntscr.com/53wz9q,
They should all be set to value 4 as 3 grid in a row (3*4=12) in all resolutions;
So in this way u balanced using responsive framework and apply your custom padding margin to remove spaces;
screenshot:
I solved it based on
http://www.bootply.com/122476
The result:
http://jsfiddle.net/L45dvek9/1/embedded/result/