I'm currently using ReactJS and SASS.
I have two print buttons in my webpage and a list of items.
I need to print the list of items in two different ways using the same stylesheet.
I tried everything.
Basically I open a new page with the print preview and I already set the page properties to fit one of the two formats. Is there a way, even with SASS and maybe not using JQuery to differentiate the layout or define the rules based on the button clicked? Or even a workaround based on the width of the window that I open when I click one of the two buttons.
Thank you
Related
Currently we have a page which has options with each section consisting of lots of checkboxes - a section might have 20 checkboxes due to each one being a separate option and then the page might have 10 sections. This takes up a lot of space and looks really messy so we experimented using select2 along with multiple option so now, by default, the space is no bigger than a text input with the added advantage that the list is searchable (when focused).
The issue is that some users have fed back that they load the page and then use ctrl-F in their browser to find the relevant setting section - using select2 (or any select based option I guess) that is no longer possible as the options are not visible on the screen.
It is something similar to the tags section at the bottom of the page - for example if I search for jQuery when focussed in the tags box it comes up but if use Ctrl-F in the browser it would not etc.
Is there a way to make the options in the select list "searchable" using the browser search without having to resort to listing them all which would then defeat the point of the change?
We had thought of displaying the options in a comma list, for example, with the same text colour as the background in a really small font but it is clunky or maybe add some sort of JS search box on the page so, whilst not using the ctrl-F route, it still makes it searchable but were curious if there was there a way we could do this via Select 2 itself or any other routes we could explore using the native browser search?
Shorter question: how should toolbars be programatically created and dynamically changed in a D3.js app with a Python backend?
I'm trying to create Javascript/D3 visualizations for simulations written in Python and using Flask, as an alternative to using a Tkinter GUI. I want a particular model to be selected by a radio button. Changing the selection not only changes the plot, but also swaps to a toolbar of numerical inputs appropriate for that model. I want to create the toolbars programatically, so that as a new model is added to the code an appropriate toolbar is automatically generated.
My problem is that there are a lot of ways to manipulate the DOM, and it's not clear to me what the best approach would be:
Python/Flask could manipulate the DOM, but I think that requires a
page refresh.
If HTML imports were used, there would have to be a separate .html file for each toolbar.
A unique <div> could be created for each toolbar and hidden/unhidden as needed, but it feels wrong to create a dozen <div>s rather than swap the content of one <div>.
A toolbar <div> could be torn down/built up everytime a toolbar is needed, but it feels wrong to keep building the same toolbars from scratch.
innerHTML could be swapped, but this might be bad? cf. this SO question
There are multiple options for manipulating the DOM at the frontend: JS, D3, JQuery...
To illustrate, here is a screenshot of what I have so far. The radio buttons swap between two models. In lieu of a toolbar, I have a JSON dump of the model's toolbar info. The JSON dump would be replaced by its interpretation as a series of labels and numerical inputs.
I would like to create a "FlipView" of ListViews in Windows8 using JS and HTML. That is, I would like a control that would display a ListView and when the user swips or scrolls, it would display the contents of a different ListView. Is this possible? If so, how? Thanks for helping a Windows8 noob!
My attempt to put a listview under flipview, was not successful. css classes used by both controls overlap (e.g. win-item). I found that items in the nested list view occupied the whole available space like flip view item. This behavior was happening because the win-container hosting the nested list view item, was sized like that. I could not set its (win-container) size explicitly to smaller size even after overriding it in css file.
It does not look like that list view will work nested under a flip view for css/html. If any one else has had success with this, do share your comments and code.
if anyone had tried it in c# using FlipView and nested GridView/ListView and had success, do mark a answer with code (will be interesting to know).
I need to load a very large text into a dialog box using YUI or jQuery and I'd like to know the best way to do it. I have an Oracle CLOB column which I need to show if the user needs to know what was stored there. Since CLOB data are huge, it is impossible to load everything. Any ideas?
Use multiple divs and load each one with what's left of your clob content when your user drops cursor in it : you can do this either using connection manager for YUI 2 or nodeList if you are using YUI3 (here's an example of how to use it)
Put it in a fixed-size DIV and add: overflow-y:auto.
I've been searching for a good way in which to style up a selectbox, and have found a couple of good jQuery plugins that do the trick... However, they replace the selectbox with an input and a list and then give it a specific class which is used to add your custom styling...
This is fine and dandy, but I need to be able to use multiple sizes. The script is adding the same class to all of the replaced elements, so there's no way that I can find to style them with different widths.
Here's the script I'm talking about: http://www.brainfault.com/2008/02/10/new-release-of-jquery-selectbox-replacement
I just need to be able to have two distinct sizes/widths of the custom selectboxes. One for numbers such as 1-1000, and another for longer textual names such as "Transylvania County Home Buyers Association".
Obviously, one size would look ridiculous if I used the larger size to hold a list of numbers that only goes to 1000, and visa versa.
Any ideas how to make it work?
That plugin lets you supply classes via its setup options; can't you just give it whatever classes you need to distinguish big ones from little ones?
Here's the page: http://www.brainfault.com/jquery-plugins/jquery-selectbox-replacement/