I changed the version of the library to v1.0.0-beta.21 from v.0.19
And now all buttons have a focus frame. For example
First
Second
How can I hide this frame?
Using css, something like button:focus {outline:0;} should work. Although you should consider re-styling the outline rather than hiding it for the sake of accessibility.
Related
When I use lightning inline editable data table component, the status bar would cover the edit panel.
I think it might is a SLDS bug.
I ran into this problem as well. I agree that I think it is a CSS issue on the SLDS side.
I'm using a lightning:datatable with inline editing, and I noticed that the footer bar div with the Cancel/Save buttons is using the 'slds-docked-form-footer' class, which sets the z-index at 8000.
Crawling up from the datepicker I noticed that the "table cell" contains a section element that has inline styling setting the z-index to 7002. That section element also has a class of "slds-popover_edit", so my workaround solution was to put this into my lightning component's css file:
.THIS section.slds-popover_edit {
z-index: 9999 !important;
}
Hope this helps, or that you've found a better solution by now. I'm going to test my page to make sure this change didn't have any unintended consequences.
Designing a React application, what I want is having the title of a Card or Paper on the top border with some indention from left side, like this:
I searched a lot and couldn't find a generic way to do so. Should I create a customised component or there's way for this?
I don't know exactly what you want it to look like, but you can achieve something like that by using the fieldset and legend elements.
It might look like this:
<fieldset>
<legend>Current</legend>
// Content within border.
</fieldset>
Result:
This approach is used by Material-UI for the "Outlined" variant of TextField (demo here). The code that handles this aspect is the NotchedOutline component (source here).
You can also fairly easily do something yourself via a position attribute to move a title element up over the border. This would actually allow you to use one of those material-ui components to provide most of the styles, and then just move the title on to the border.
Checkout this Codepen for an examples: https://codepen.io/codingmatty/pen/bOXKpZ
I want to create a material-ui stepper element which looks like this:
They call it stepper element with alternative label placement.
I am using material-ui library which implements Google's Material Design. Right now all examples from that library show in-line label placing and I don't see any property which would make it possible to use alternative label placement. But I believe it was implemented at some point of time because there was discussion about it.
Is there a way to set alternative label placement for stepper right now?
According to their docs Labels can be placed below the step icon by setting the alternativeLabel prop on the Stepper component.
How to use an image as a button in GTK in c language in code blocks? I have tried making the button of same color as that of the background and then adding image on it. But there is a outline or shadow still there. So, how can i remove those shadows or is there a way to directly use an image as a button?
One way is outlined by #Shabhaz, by putting the image in an EventBox, and handling the button-press event.
The other way is by placing the image in the button and customizing the style of the button to remove the outline and the shadow. You would call gtk_rc_parse_string() to define an outline-less button class, and gtk_widget_set_name() on your button to apply the style.
I can't figure out how to remove the scroll bar from my website.
I've looked up ways of doing it on SO but with no luck. It just keeps staying in the box.
I also want to be scrollable but just without the actual scroll bar visible from computers.
(It's not visible via mobile devices which is okay)
Regards,
Alex
There is no standard cross-browser CSS code you can use to render scroll bars invisible. However, you can put your <div id="shoutbox_data"> element inside another <div> element with an id field like "shoutbox_wrapper", set the CSS overflow property of the wrapper element to hidden, and then use JavaScript to automatically resize the wrapper element so it covers up the scrollbox. The idea comes from Jan Bilek, and you can find the JavaScript to accomplish this on his blog.