enter image description here
Look at my picture.
I have an issue like this.
I cant find out my way to show my error tooltip over my row in my table.
Someone have met this trouble before.
Any suggest for me?
I have try to set overflow property is auto in every single html tag inner my table row but nothing happen.
I still try to set z-index of this tooltip but still got nothing.
This is my example about this:
[1]: https://codesandbox.io/s/errormessage-not-overflow-in-table-row-4y6m2b?file=/index.js
I edit your style.css file :
#import "rsuite/dist/rsuite.css";
#root {
padding: 10px;
}
.rs-table-row,
.gridcell,
.rs-table-cell ,
.rs-table-cell-content {
overflow: unset !important;
}
Related
https://www.insure.report/en
I need to fix the Updates widget to have a top margin so it isn't covered by the header OR I need the widget to load on top of the header, not behind it.
Then I need to hide the 'Submit an idea' link.
I'm still new to CSS and the Submit link uses several classes so I don't know which to set to display none.
Any help or guidance is appreciated.
Without seeing your html and css it's hard to be absolutely positive but I gave the id frill in dev tools a property and value margin-top: 20px and that seems to solve your first question in dev tools. Since you are using bootstrap, in your custom CSS stylesheet you'll probably want to add:
#frill {
margin-top: 20px!important;
}
For the submit link you could give that link a class, like class="hide-link" in your html and then give that class a CSS rule of display: none; like:
.hide-link {
display: none!important;
}
I configured it according to https://help.frill.co/article/75-adding-the-widget
It's not really the right answer because what I was seeking was not done. But I removed the top elements instead.
I have posted another similar problem yesterday. Here's the link.
Now I ran into a different problem. Under a rich-column of an extended data-table, I have added another 2 rich-datables. One table for the header, the other table for the table-data. All these were done to make sure our design doesn't get changed.
Now, coming to the problem, you can see the attached image down. [Intended Page Rendering][2]. This is what I need. But when the page loads, I generally get something like this [Actual Page rendering][3].
After looking through the generated HTML code, I can get the desired output by deselecting the background-color property of the rf-dt class. See the third image below.
[Generated HTML -code][4] - this shows by deselecting the background-color property of rf-dt class, I can achieve my purpose. But when I go to actual code and try to put the changes its not working... I tried to put this in the CSS class
.shipmentBrowseTable .rf-dt {
background-color: none;
}
where shipmentBrowseTable is the styleclass for outer Extended-data-table - the same styleclass used for inner data-table too.
The above code is not giving me the intended result. If someone can help me with this, it would be great.
.shipmentBrowseTable .rf-dt {
background-color: none !important;
}
the !important tag should override most styles
I'm trying to fix an alignment issue that's caused by a row of social media share buttons, specifically the code generated by the Google+ button. I didn't set this site up and I'm not sure how the button was implemented, only know that it was part of an AddThis plugin or something.
The Google+ button seems to automatically generate a div with inline CSS styling:
<div class="google_plusone_iframe_widget" style="width:90px;height:25px;">
I need to get rid of the width and height, but how can I override it externally? I've tried the following but it didn't work:
div.google_plusone_iframe_widget[style] {width:auto!important; height:auto!important;}
Does anyone know how I can do that? Thank you in advance! Here is the page for reference, I am referring to the top left social media buttons:
http://www.canadianoutback.com/events/crime_investigators.php
Your CSS selector should be:
.google_plusone_iframe_widget {width:auto !important; height:auto !important;}
Remove that [style] attribute in your selector, and there's no need to specify the div tag.
Try to add this code #leftNav .addthis_toolbox .google_plusone_iframe_widget {width:auto!important; height:auto!important;} to make it.
Could please try this once #leftNav a.addthis_button_google_plusone .google_plusone_iframe_widget[style] {width:auto!important; height:auto!important;}
Please do try with this
#leftNav a.addthis_button_google_plusone.at300b .google_plusone_iframe_widget {
width: auto !important;
height: auto !important;
}
If it is inside iframe we can't apply any style or script for it.
I'm trying to turn a brand new template into my login script and for some reason the text "ON" for the checkbox isn't aligned properly like the template is as well as there doesn't seem to be a right border when on is selected. I've been trying to match up the elements and css to troubleshoot but not having any luck.
http://www.kansasoutlawwrestling.com/kowmanager/login
http://themeforest.net/item/zice-admin-colorful-admin-templates/full_screen_preview/1980638
I tried changing the padding as suggested by the two people below but I'd rather not change the css because it works on the template shouldn't it work without changing the css on mine.
Any other ideas?
I'm hoping someone sees something.
There's a 13px padding set on the span. Remove it and it will align properly.
It's on line 1187 of your zice.style.css file:
label.iPhoneCheckLabelOn span {
padding-left:13px
}
Change this declaration to this value:
label.iPhoneCheckLabelOn span {
padding-left: 1px;
}
This website that I'm working on has annoying alt tags popping up when you hover over links in the sidebar. I didn't put these alt tags in. But, I can control the CSS... Is there anyway to disable them?
Thank you!
Tara
Simple answer: no
They are impossible to turn off just with CSS. They are browser dependant and are not part of any CSS spec i.e. you can't style them, hide them, anything.
Though you can get rid of them by Javascript:
Javascript
var elements = document.getElementsByTagName('a');
for (var i = 0, len = elements.length; i < len; i++)
{
elements[i].removeAttribute('title');
}
They're actually title tags and you can't remove them with css (you can with javascript) but I guess they're there for a reason.
You can use CSS like below:
pointer-events: none;
From what I can see of the site, you’re getting a tooltip when you hover over the side bar links because they each have a title attribute.
I don’t think there’s anything in CSS to prevent these showing up. Showing these in a tooltip on hover is a decision the browser makes, separately to the rendering of the HTML.
The best you can do is use JavaScript to remove the title attribute.
You can use CSS to hide images with any alt text, for example alt = "LinkedIn"
[alt="LinkedIn"] {
display: none !important;
}
You can also hide the image with title for example title = "Company logo"
[title="Company logo"] {
display: none !important;
}
Dear stackoverflow members,
I wanted to remove the img alt attribute, to remove the alt thing, with css, without changing html php, or adding java elements.
I wanted simply this box (border) around the image that is appearring to be removed. I could not find anywhere this simple solution! So i post it here! I hoep will help someone! I include a screenshot.
I made height and width to be exact with the picture, no more, no less.
Also, check that font-size attribute element was set to 0.
That is (dependign on other set attributes, you may also need to adjust them, in order this "box" be adjusted to the exact size of your image:
#your_specific_ID_name .image_myclass_image {
background-position: 0px 0px;
height: 'the height of your image';
width: 'the width of your image';
font-size: 0;
}