I am learning how to use the Chakra-UI drawer component: https://chakra-ui.com/docs/overlay/drawer. It basically does everything I want it to, with one exception -- it covers the content instead of pushing it to the side. What I want is a right side drawer that when it opens pushes the content to the left.
Is this possible with the Chakra-UI Drawer component? If so, how can I do it?
Thanks.
I am not sure about this solution but you can try This
1.Don't Use Drawer.
2.Instead of drawer create a one component called custom Drawer(you can name enter code hereany) that have stuff which you required
In custom Drawer write some css for parent element class name will be as follow and class Name Will Accept By Props
.displayNone{
display:none
}
.displayNone{
display:block;
position:absolute;
top:0px;
left:0px;
width:400px
overflowX:scroll
}
3.Now By Conditional Rendering of components you have to pass following components
I.
<customeDrawer class="displayNone"><customeDrawer>
II.
<customeDrawer class="displayBlock"><customeDrawer>
Hope So It Will UseFull
what worked for me was to set padding-right: 0 !important to the body.
Related
Hello I'm having a problem with material ui css. I tried to override it but still doesn't work. I want my full div to get the full page but this is happening.
I want it to take the full width. but I can't edit the muicontainer
in your CSS:
div.MuiContainer-root.MuiContainer-maxWidthLg.css-1qsxih2 {
width:100vw!important;max-width:100vw!important;min-width:100vw!important;
}
You might want to try using this selector instead (dropping the last class that seems to be generated each time):
div.MuiContainer-root.MuiContainer-maxWidthLg
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 am using IAjaxIndicatorAware for a panel containing several elements able to call AJAX. The indicator shows currently under the panel and I need to change its position - how should I do that?
If you use IAjaxIndicatorAware then you have a Wicket Component that implements IAjaxIndicatorAware. In that case Wicket just makes the HTML element with id == IAjaxIndicatorAware#getAjaxIndicatorMarkupId visible by using jQuery.show($('#indicatorId')). This HTML element is placed by you somewhere in your page so you have full control on it. For example you can add CSS rule like:
#indicatorId {
// padding: ...
// margin: ...
}
But if you use org.apache.wicket.extensions.ajax.markup.html.AjaxIndicatorAppender then you should use the CSS class returned by org.apache.wicket.extensions.ajax.markup.html.AjaxIndicatorAppender#getSpanClass() as a CSS selector.
I have a component and I want to place it centrally within a grid. The selector of the component is app-signup-component and the rule I have applied is
app-signup-component{
align-self:center;
width:100%;
}
The it seems the rule is not getting applied. I am unable to figure out why. What am I doing wrong?
The top level component is content-component. Its html is
<div id="content-div"> <!--this is a flex -->
<router-outlet></router-outlet>
</div>
Its css is
#content-div{
display:flex;
height:75vh;
}
app-signup-component{
align-self:center;
width:100%;
}
The app-signup-component component gets added dynamically. It is a form. When I run the code, I see in the debugger window that css rules for app-signup-component are not applied (see attached pic)
If I manually add the rule in the browser then the form moves to the center (see below pic)
I don't know why it worked but if I move the rule to styles.css which is the global css file applicable across all components then the code works. I suppose the issue might be that if a rule is added in component's local css then that component has to exist in the page when the page/component is loaded. In my case, content component has router-outlet and when content component some other component homepage at start up. When I click a button, signup component gets loaded. But because signup component was not present initially, the css rule doesn't gets applied to it when it is later loaded probably because the browser doesn't recalculate the css rules. I suppose my options are that I either redesign the architecture to keep css effects local or I add such rules in the global styles.css.
I have some code in HTML and CSS where HTML looks like this:
<div id="avmenu">
<h2 class="hide">Menu:</h2>
<ul>
<li>Welcome!</li>
And my CSS looks like this:
#avmenu
{
Style details
}
#avmenu li a:hover
{
Style details
}
a:hover{ Hover styles }
So above piece of code shows a menu item and does some animation like color change etc when you hover your mouse over the menu. I have show bare minimum styles sufficient to explain problem at hand.
Now when I migrate this to GWT. We have used Label as menu items, and I want to achieve same effect in GWT too. Here is what I have tried
I tried to apply CSS Style named "avmenu", this applied basic styles, but of course didn't get animation
Then I tried DOM.setElementAttribute(orgLbl.getElement(), "id", "avmenu"); but that also didn't help.
What would be my best option with minimal time and effort to achieve same effect? I can of course listen to events on Label and then change the style, but doing that for all of the widgets would be an overkill!
EDIT- More info: I am building Menu using Label, and adding that to tree
userMgmtLbl = new Label("User mgmt");
userMgmtLbl.setStyleName(HOME_MENU_LBL_STYLE);
treeItem_1 = configParentTL.addItem(userMgmtLbl);
userMgmtLbl.addClickHandler(Click logic)
One of the problems that you're running into is that Tree and TreeItem in GWT are composed of arbitrary divs, rather than ul and li as in your original html. (When indoubt you can inspect the DOM of GWT's showcase to see how the underlying widgets are created).
What this means is that your selectors, such as "#avmenu li a:hover" will no longer work.
If your navigation menu is static, your best bet is probably to use GWT ui-binders, which are basically gwts templating system. If you use a HTMLPanel as your root widget, you can effectively use all your original HTML verbatim and not worry about trying to mash all the DOM elements into corresponding widgets.
A basic widget would look something like this:
NavigationWidget.java
public final class YourWidget extends Composite {
YourWidget() {
initWidget(binder.createAndBindUi(this));
}
private static final Binder binder = GWT.create(Binder.class);
interface Binder extends UiBinder<Widget, YourWidget> {}
}
NavigationWidget.ui.xml
<ui:UiBinder
xmlns:gwt="urn:import:com.google.gwt.user.client.ui"
xmlns:ui="urn:ui:com.google.gwt.uibinder">
<gwt:HTMLPanel>
<div id="avmenu">
<h2 class="hide">Menu:</h2>
<ul>
<li>Welcome!</li>
</div>
</gwt:HTMLPanel>
</ui:UiBinder>
As an aside, in this example HTMLPanel adds a DIV of its own to the DOM, making the second div a bit redundant. Unfortunately, widgets in gwt don't have an easy way of setting the ID attribute from templates, so you're stuck with the second div unless you want to switch your #avmenu selector to .avmenu
Post how you are building menu in GWT. You are probably not using anchors inside your labels so your :hover styles are obviously not working.