I was trying Angular UI's ui.layout directive that allows to split the view .
https://angular-ui.github.io/ui-layout/
I was using this as a replacement for JQUERY UI layout plugin . So I wanted the same behaviour in angular . I am having just two div's suppose east and west and I wanted to split the layout into 1:3 ratio . In angular it splits in 1:1 ratio . I am able to change it using the splitbar but when I refresh the page it goes back to the initial stage . This was not the case in Jquery UI Layout .Once I drag the splitbar and refresh , the layout remains the same .
Please Help !!
Related
In my Angular 2 environment, the OpenLaysers and Highcharts components are not rescaling themself after I change the Bootstrap layout. If I click on my button that changes the Bootstrap grid classes, the components should rerender. I tried rerendering the charts through highcharts.redraw() function - that does not fix the problem. As visible in the video, if I press 'F12' and go into 'Developer Tools' (showing as a black box at the bottom - 0:08), the components redraw. Therefore I tried workarounds like giving the body a zoom of 2.0000.1, new zIndex, different height, display 'none' - 'block'. Nothing works.
In Highcharts you should use chart.reflow() not chart.redraw(). Alternatively, you can use chart.setSize(newWidth, newHeight).
Is there anyway to hide ant design sidebar fully on onCollapse method?
One way is to set it's display to none, But I don't want that coz I want the same animation that onCollapse method provides by default.
As mentioned in the "Responsive" example you can set <Layout.Sider collapsedWidth={0} />, which will completely hide it.
By default this causes a trigger button with a hamburger icon to appear, but you can turn it off by adding trigger={null}.
Antd uses breakpoints similar to bootstrap, their idea is Mobile first, which means, you should think in mobile first.
It means, you should not design your web app for desktop and then try to hide/adjust when it's in smaller view.
Instead, you should, design it for mobile view and then adjust to desktop view.
ultimately, what I want to say is, set the sidebar default state as display:none and then use grid break points such as <Col md={2} />
you can see this question for more details antd hide on smaller view
We faced several limitations when creating form using form builder:
When I drag an UI control into a grid cell, the UI control's label and the UI control itself are top down aligned. How to make both aligned at the same row (side by side). I could only figure out the way to do this by using bootstrap CSS.
When we started to customize the form with CSS more & more due to the form builder limitation, the form designer no longer show the exact form output. This trouble us as we need to test/publish the form to view actual output which defeat the purpose of WYSIWYG editor.
for the time component, is there any option to prefix zero in front of selected hour?
Appreciate anyone can help on this.
Note:
I am using orbeon forms 2016.2 for the form development.
I have three tabs in a Jquery UI tabs widget. Inside of the tabs I am creating a Wijmo Grid. One on each tab. The Grid is based on Jquery UI as well. The grid on the first tab seems fine.
The grid on the second and third tabs (the hidden ones) have strange sizing issues. The Grid on one appears roughly 10 pixels wide and the full height. The one on the third tab appears about 50 by 50 pixels.
I know the code on those tabs is fine because if I make one of those the primary tab then it works fine and the other two are broken. So I think it is some sort of interaction between the Jquery UI Tabs widget and the contents of the tabs (a Wijmo Grid). Does anyone know what causes this strange interaction and what I can do to make it work predictably?
The Grid does size calculation when initializing. It needs to be displayed somehow when doing so.
You can add class="ui-helper-hidden-accessible" to make it off screen when rendering.
Make sure you initialize the grids then the widgets. Or you can call $("#grid").wijgrid("doRefresh"); when the tab is activated that it is contained in.
i am using partial view for my project but my problem is that my links are on right side of masterpage and when i clicked on particular link the view should displayed on left side on contentplace holder of master page. but right now its showing exactly below so my whole disgne is distrubed.
how to position partial view in asp.net mvc through java script?
so please if anyone know the solution tell me.
thanks
Do you basically mean your HTML is not set to allow the Content on the left, and the Menu on the right?
Maybe you would benefit from a CSS Layout Template? Put the Content placeholder in large column, and the menu PartialView in the side bar.
It might be a problem with your page CSS. Look at your styles for "Float" 's. If you want your content to be to the left of your page, surround your contentPlaceHolder with a div tag and add a "float:left" style to it.
If that doesn't work it might be your view is wider than your master page design is set up for. So it will pop below every other page element to fit on your page!
This is not realy asp.net mvc specific but html. You will have a better chance to solve your problem if you tag your question as html and css.
You can just save the source (I mean the rendered source from within the browser) of the page that doesnt display properly with the extension html in the root of your web. Then start playing with the html.
Request the page by calling http://yourserver/yourpagetodebug.html.