I use primeNG (Angular2) to show the modal:
<p-dialog appendTo="body" [(visible)]="displayCreateGateway" modal]="true" [width]="700">
When I am on mobile view (less than declared 700px) modal does not display correctly. For example: I have window width 500 px, but modal generates in 700 px (properly will be width:100%). I think this is not fault of my code, because in official website primeNG situation is the same.
Do you know how to solve this problem? The easiest way is probably add media queries in css, but override component from primeNG isn't easy. Maybe helpful will be JS?
If you look at the documentation of the component, you will see a styleClass attribute, used like this :
<p-dialog styleClass="myStyle">
When you do that, it adds a new class to the component, allowing you to style it as you want.
Related
Our team already develop a web page using custom div, css and Split.js the to produce the following layout. There are 3 panels in the layout with each panel can be resize (notice the gutters).
Problem is, when using mobile the layout is not responsive - and we still do a lot of r and d for this.
I'm looking for alternative, which is Bootstrap framework. But so far, still don't figure out how to do this. Is there something I miss, or bootstrap is not the right choice?
I know this JQuery Resizable Plugin works for this purpose on mobile:
https://github.com/RickStrahl/jquery-resizable
I built a component for this purpose a while ago. The concept is to split any view (html element) into two, one has a fixed width/height and the other consumes the rest of the parent. If you put an optional divider in between the two views, you are able to drag and drop it to resize.
https://www.npmjs.com/package/split-view
Let me know if it works for your case.
I want to be able to preview a react component on a page at different viewport widths to trigger different CSS media queries. This is for a component library, and I want to be able to show developers what the component will look like at different screen sizes.
Any strategies on how to tackle this problem?
CSS media queries take account of client window with, if you want to show the behavior of component by resizing the browser window you won't need to do anything different. However, if you are looking to place your component in a container within the browser (like some div) and allow developers to resize that container to see the behavior, they you might need to replicate the media queries behavior on that container. First you will need to make that container resizable. After that you will need to listen to that resize event and then apply relative classes to that container according to the width of container.
You can use this plugin to make container resizable https://github.com/STRML/react-resizable and then use onResize event to apply appropriate css classes to show the behavior according to the width of container
Try using the rule #media to define what css properties are used at which screen size, here is a guide by W3schools CSS #media rule
I was looking at some of my code in Safari when I resized the page and it didn't look great. I need to restyle it, and using the media tag I added another style sheet. It looks better now but there are still some aspects of the page that don't look good that I could easily fix with html. When I add the html, the page starts to look better but then when I make the browser full page is look weird. Is there a way to make an html tag work based on the screen size? I am looking for something like the "media" tag used when linking a style sheet. I also have JavaScript and jQuery on my site if that helps, but that's it.
you can use this
#media
example this will only on width of 500px or higher
#media (min-width:500px)
{
/*Class name*/
{
/*properties*/
}
}
similarly you can specify max width but to save time you should use popular framework bootstrap compatible with jQuery
if you want that html tag work based on the screen size then you need to work on responsive css or you can you any framework like bootstrap or foundation many more available for html and css where u can get visibilities classes for you html
I've been investigating ways of creating a responive menu.
The standard technique would be to use a navicon on smaller devices which would trigger some kind of fly out/drop down menu.
I would like the most common options to show on screen, so I came up with the idea of a nav-bar, consisting of only a few important menu items, which would be visible on smaller devices. This would still need the navicon to display any additional items.
I then came across a menu which fulfills my requirements better in that it is more dynamic. The concept is that the menu grows as the screen size grows, but only displays an option when there is enough screen width to accomodate it fully. The remaining options are tucked beneath a dynamic navicon.
Here is the menu: http://www.money.co.uk/
As you will see changing the screen width changes the available options.
I could produce a semi-dynamic version using my media query breakpoints, but it would be good to be able to create a fully dynamic version. I'm guessing that it uses javascript - but as far as the techinque to be able to determine the available space and the space required, I don't know where to start.
I have some basic js/jquery knowledge, but would appreciate it if anyone could give me some guidance on how to go about approaching this one.
Thanks in advance.
Responsive menus are nothing, but its just a style manipulation as per screen size. You can go for CSS3 media queries to do it. It has inbuilt functionality to define the screen size.
#media (max-width: 912px) and (min-width: 681px)
Then, you need to manipulate the stylesheet. This is very common approach. Although, you can go with javascript as well by using window resize events and change your stylesheet accordingly. So whenever you will resize the window it will automatically overwrite the defined stylesheet.
Although, it is not recommended to manage it through javascript as it has lots of code complexity while managing the style. Use CSS media queries.
Hope this helps :)
I'm converting a large Dojo 1.1 application to Dojo 1.9.1 & in the process replacing dojox.Grid with dgrid.Grid. My initial issue was that the column headings were consistently being overwritten by the first row. Researching here I discovered that since the grids are being embedded either directly or indirectly within dijit layout widgets that I should use the dgrid.extensions.DijitRegistry mixin. However this in turn results in the grids not being displayed at all. They are being added but are being hidden by their style being explicitly set to zero width & height, which in the past I've identified as a symptom of a resize problem. These grids are on different tabs of a TabContainer each of which displays a custom widget. Each of these custom widgets implements a simple resize method which resizes the "containing" ContentPane upon which one or more grids are added.
My understanding is that the DijitRegistry mixin should cause the grid to be registered in the dijit registry & that this should mean that when resized the grid should be resized as a "dijit" child of the content pane.
Obviously something is wrong but I'm unsure where to look. Suggestions & solutions appreciated.
It's typically just a matter of calling resize(). One technique I use when creating custom widgets that contain a dgrid is to extend from a layout widget, such as BorderContainer, instead of dijit/_WidgetBase. This gives me a hook into the resize function. I simply override it, call this.inherited(arguments), then explicitly resize my grid. Other than that, you can use .on to connect to show events on whatever the grid's container is and have it resize whenever the container is shown.