Can someone explain to me how to get to these buttons in the DataGrid?
I want to change the color which atm. looks like this although they are not disabled.
How am I supposed to select the classes correctly to get to the buttons? I actually fixed this by just styling with the sx prop
sx={{
'& .MuiDataGrid-toolbarContainer': {
'& .MuiButton-text': {
color: '#074682',
},
},
}}
But I would like to do this in my theme (components) for light mode here
I read the css documentation of DataGrid on Mui and I'm confused about how to get deeper into toolbarContainer.
Any help is appreciated. I really want to understand this and not just try out stuff.
I can see:
MuiDataGrid-root
MuiDataGrid-toolbarContainer
THEN
MuiButton-text
Would I then just select them in that order?
EDIT:
This also works:
But why can't I just select the MuiButton, then the text and then add the color like this:
Related
i'm trying to remove the light gray line that's next to the darker gray line:
After searching the rechart library through and through i decided to try and hide it with a css file.
this is the code :
.recharts-layer.recharts-cartesian-axis-tick line{
display: hidden;
}
I've also tried :
.recharts-cartesian-axis-tick-line{
display:hidden !important;
}
and still doesn't work.
it's important to note that the css file is linked and when trying to style something else it works.
this is what i see when i inspect and pick the element in the dev tools :
any help will be appreciated!
What you need to do is remove the tickLine from YAxis.
Something like that:
<LineChart>
...
<YAxis tickLine={false} />
...
</LineChart>
You can check more about it in docs API.
Can someone help me out here on how to add passengers count dropdown form like on the image below. i have been searching all over but cannot seem to find any demo or help.
thanks for your help
This is a solution using pure HTML, CSS, and jQuery. For a Bootstrap-specific answer, How use input field as toggle for bootstrap 4 dropdown may help.
Moving on.
You should create a normal number type form and add a disabled attribute in the input tag so that no cursor appears when you click the form (<input type="number" disabled>). Then, just create a dropdown menu (probably a <div> with an absolute position right under the input) with a classname of your choice (assuming in this answer that you choose .passengerInput as the classname).
You can hide the dropdown by default using the $(".passengerInputDropdown").hide() method in the body of your JS.
Then, when you click the form, using the $(".passengerInput").toggle() method, do something to the effect of:
$(".passengerInput").on("click", () => {
$(".passengerInputDropdown").toggle();
})
Let me know if this helps!
I am trying to add bootstrap tool-tip to data-table search box, I can't seem to find any help for that
This is what i have tried but it is not working :
$('.dataTables_filter input').attr('title', 'Type here to search in the table');
Maybe something like that would work :
$('.dataTables_filter input').attr('data-toggle', 'tooltip')
.attr('data-placement', 'top')
.attr('title', 'Type here to search in the table')
.tooltip();
A quick note, Bootstrap 4 depend on Popper.js so you have ton include it to be sure everything will work.
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js
I was wondering if it already exists a way to have an input of type "range" with two different setteable values. The input I would like to achieve is something like this. The idea would be to set a range for a price. Meaning I would need to retrieve the "minimum" and the "maximum" from that input. Obviously, for the sake of learning, we can disregard the CSS style.
Is there a way to accomplish this with HTML5 or JavaScript? I've heard that there are some jQuery plugins that accomplish this, but I was wondering if there's a more "native" way of doing it. As an addition, I'm working with the mobile-oriented framework Ionic. If anybody knows about a plugin for Ionic that can achieve this, it would be much appreciated.
You can use noUiSlider. It includes all Javascript, CSS and HTML necessary.
Having a div like this in your HTML:
<div id="slider"></div>
And using this:
var slider = document.getElementById('slider');
noUiSlider.create(slider, {
start: [20, 80],
connect: true,
range: {
'min': 0,
'max': 100
}
});
You can see an easy example of it working.
Someone was able to so quickly help me with a problem I'd spent hours and hours on, that I'm hoping I'll get lucky and someone can point me in the right direction on this one, too.
I didn't see anyone else with quite my issue here - and I'm new to working with WP templates instead of plain old HTML/CSS/JS stuff.
Basically - on a site we did (www.opted.org) with a purchased WP theme - I can't get the mobile version collapsible menu to stop defaulting on page load to the last item in the Main Menu.
So instead of something that makes sense - like About ASCO, or even being able to add "Select Page" - the drop down shows "-- past issues"
I don't care how I fix it really, but the client just doesn't want that page to be the default. I tried adding an extra menu item at the end called "Select Page" with an href='#' and using CSS to hide it on screens above 480px - but I couldn't get it to work no matter how I tried to refer to it.
I feel like this should be easy - but I don't know where to set the selected LI among the many WP files.
Thanks!!
I had a look at the plugin.js file on the site www.opted.org.
On line 22, there is 'header' : false // Boolean: Show header instead of the active item
and on line 41 there is jQuery('<option/>').text('Navigation')
Try setting line 22 to true, and text('Navigation') to your 'Select Page' if you prefer that over the text 'Navigation'
Or, according to the tinynav.js page (http://tinynav.viljamis.com/), you can customize that as an option like this:
$("#nav").tinyNav({
active: 'selected', // String: Set the "active" class
header: 'Navigation', // String: Specify text for "header" and show header instead of the active item
label: '' // String: Sets the <label> text for the <select> (if not set, no label will be added)
});
In your main.js file, your calling it on line 14. You should add that header: 'Navigation', option there.
It's hard to answer this question without knowing how the theme you are using works. However, you can certainly change the selected attribute using javascript.
Here's the code you would use to set it to 'About Asco' using jQuery:
jQuery('.tinynav').val('/about-asco/')
alternatively (a little clearer, but more verbose):
jQuery('.tinynav option:first').prop('selected', true);