This is really a trivial problem, but it is still annoying. I'm writing a tool to allow a user to set a bunch of numerical parameters for an analysis in the IPython notebook. I've set it up as a bunch of FloatTextWidgets in a ContainerWidget. They have rather long labels like "Number of Posture Points" or "Background Disk Radius". They don't line up nicely. This is because of the length: as explained on this page, "The label of the widget has a fixed minimum width. The text of the label is always right aligned and the widget is left aligned... If a label is longer than the minimum width, the widget is shifted to the right."
My labels exceed the "fixed minimum width". What I want to know is how to change it. I have poked around in the Widget source code, and I can't find this anywhere.
EDIT: In response to #Jakob, here is some code, and here is a screenshot
In this example, "Threshold:" is small enough to fit within the label width, but all the others are too long.
To change the style from within the notebook:
from IPython.display import HTML, display
display(HTML('''<style>
.widget-label { min-width: 20ex !important; }
</style>'''))
use the layout argument for each widget. Here's the link to the documentation: https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Styling.html
In particular it says, you an define description and widget separately in an HBox like this:
from ipywidgets import HBox, Label, Layout
label_layout = Layout(width='100px',height='30px')
HBox([Label('A description',layout=label_layout), IntSlider()])
Well, I found the narrow answer to my question: the minimum field width is defined in site-packages/IPython/html/static/style/ipython.min.css (located wherever your python libraries live -- on my Max that is /Library/Python/2.7/), where widget-hlabel is defined by
.widget-hlabel{min-width:10ex;padding-right:8px;padding-top:3px;text-align:right;vertical-align:text-top}
min-width:10ex is the relevant part.
Although one can override this for an entire document, I don't see an easy way to change it one widget at a time. It would have to be done on the JavaScript side, since the FloatTextWidget class doesn't give separate access to the label component of the Widget from the python side. That would require developing a custom widget subclassed from FloatTextWidget, which seems like way too much effort for such a simple problem, and fragile to boot. At least, that's the only way I see to do it -- corrections welcome.
Instead, I have decided to eschew altogether the automatic labeling of widgets with their descriptions, and instead construct each label as an HTMLWidget, which gives me complete control over its appearance. Here's what that looks like:
Related
I have a page with many buttons labelled "Buy". How can I make them unique? They aren't in a form.
Thanks
This message basically means that you must provide more precise context in the text of your buttons, because you have at least two of them with the same accessible text and they are so undistinguishable one from the other.
When using a screen reader, depending on how do you navigate, you jump directly to a given element, but skip over the elements that can give you more context.
In your case, for example, if I navigate by from button to button, I would be jumping from one "buy" button to the next, without being told what I'm going to buy because the information isn't on the button itself but next to it.
So it's absolutly required to give me more context, by extending the text of the buttons. The text in question isn't required to be visible on the screen, as it's a specific screen reader issue.
However, other people may also benefit from it if the text is also available as tooltip for example.
There are several ways to add the required context to your buttons.
The simplest is probably to use screen reader specific text also known as visually hidden text, like this:
<button>Buy<span class="sr_only"> basic package for 10$</span></button>
<button>Buy<span class="sr_only"> premium package for 20$</span></button>
<button>Buy<span class="sr_only"> full package for 40$</span></button>
Where .sr_only is a specific class from bootstrap. Other frameworks have similar CSS classes doing the same.
Pay attention to spacing so that words aren't uselessly glued together.
You may also use aria-label, like this:
<button aria-label="Buy basic package for 10$">Buy</button>
<button aria-label="Buy premium package for 20$">Buy</button>
<button aria-label="Buy full package for 40$">Buy</button>
Having the extended text in another element is also possible with aria-labelledby.
For both aria-label and aria-labelledby, in the label, pay attention to repeat the text actually shown on the button, as the accessible label completely replaces the natural text of the button (here, repeat the word "buy").
As a final note, it's also a good practice to shortly remind of the price, like I did here.
Depending on what you are selling, telling about the price late in the buying process (like just before checkout) can be considered as a dark pattern, and it's even more true with screen reader users, as they may miss indications that are obvious for sighted people.
There are many ways. Hopefully each button has a unique ID and so does something on the page containing text describing what the user would be buying. Then you can use the aria-labelledby attribute:
<button id="unique-thing-to-buy-button" aria-labelledby="unique-thing-to-buy-button unique-thing-to-buy">Buy</button>
Note that the ID's are space separated. This will announce the word buy followed buy the thing we are buying in a screen reader.
If not, you can create a translated string that accomplishes the same thing and use aria-label.
<button aria-label="buy unique thing">Buy</button>
Optimally, you would have something to improve the experience for sighted users as well. Putting a similar string in the title attribute to display on hover is a good start. Ideally you would use a widget that displays the same string on focus to cover your non-mouse users.
The Goal
I want to have a v-data-table that is editable and looks "nice".
The problem
Adding a v-text-field to make it editable also increases the row-height to a very eye unpleasing level
Original view:
With v-text-field inputs
The quesion
How can I decrease the row height to resemble the one without v-text-fields.
As a Bonus
Because I am quite new to this whole Front-End-Development-Kind-Of-Thing, how would I go about it identifying what is causing this "height issue"?
PS: I've tried to add a JSFiddle but I cant even seem to be unable to figure out how to display the v-data-table correctly...
The basic draft can be found here
Is it necessary for your table to be editable within the columns? How do you decide when to pass data back via request to your Backend? After the user left a field?
If it is not necessary to have the edit option within the table, I would just use the action buttons you already have in your table to trigger a modal in which you can edit the fields. This also allows you to have proper form control before a user can submit a request. There is also a Vuetify Codepen with an example how to do this Codepen
If it is necessary you should implement the v-data-table as v-data-iterator which is essentially the same functionality-wise, but allows for complete control over the look. https://vuetifyjs.com/en/components/data-iterators/
As to how to identify the problem with the v-text-field height you have to use your browser dev tools. You would then realise that the input has default paddings and margins but also a whole lot under the hood. It e.g. allocates space for error messages to pop up and for a label to go above the field.
And how to fix your JSfiddle you can read in the getting started section of the vuetify documentation under CDN https://vuetifyjs.com/en/getting-started/installation/#usage-with-cdn.
you can use the "dense" property for Lower height of v-data-table inputs
https://vuetifyjs.com/en/components/data-tables/#dense
I have a LOT of asp:Labels and I want to change the size of the font for every single one.
I know that they are converted to <span> but I have other elements with text that get converted to spans which I don't want to change.
So how can I apply style to only the the spans generated from Labels all at once?
Please don't tell me I'll have to go through each one and apply a cssClass directly.
You can define a Skin for that. Think of Skin as a set of settings common for all controls of specific type. Skins do not exist on their own, but within a theme. Here is a walkthrough on how to create a theme from MSDN. I do not think it is reasonable to copy it here.
But to focus on your specific use case, go ahead and follow this walkthrough and create a theme with only a single skin defined like so:
<asp:Label runat="server" CssClass="CommonCssClass" />
Notice we do not use SkinID, so this will be applied to all Label controls.
Next go to the page and modify Page directive:
<%# Page Theme="YourThemeName" %>
That's it, this should apply skin defined in the theme to the labels on the page.
In fact I would make an argument that this is a better way to do similar changes to server side controls then trying to figure out how to capture resulting HTML with css selector. The latter puts your code into dependency on the generated markup, which is dangerous as ASP.NET does not always generate what you would expect. For example, Label does not always render as span.
I am looking for some advice on how to build my first Angular2 app.
I have been playing around and done some little proff of concepts to get my head around how it works, and now want to check that I am taking the right approach as I think there is likely a better way to achieve what I want.
The project:
I am building myself a dashboard that will consist of tiles/widgets that fill the screen. Each will show different information on some topic. Each widget will also have three states/sizes: small, medium & large. Each widget will show a different amount of information based on its size.
Exg. if the widget showed the time, it may work like so:
Small: Display the time in a small font.
Medium: Display the time in a large font.
Large: Display the time in a large format and a few other timezones in a small format.
All widgets will start as medium. Clicking any widget will make it large and every other widget small. Clicking a large widget will make all widgets medium again.
My approach:
I have build an app.component that contains 1 div per widget, along with a few sample widgets that get loaded in. I would like to separate everything and be as modular as possible, so I plan that app.component will deal with positioning, moving and sizing the divs based on the screen size and number of widgets. As a result, I intend on using a pretty front end that takes care of where to position the divs. It will then also tell each widget if they should be small, medium or large.
The widget will then be responsible for displaying the correct amount of information.
Here is where I run into trouble - The app.component sets the widths as a percentage - currently 20%, 50% and 80%. I want the contents of the widget to display based on the width of its div, including as the window size changes, but I cannot pass the width in as the app.component doesn't know it (it only sets the width as a %).
What I have come up with works, but I'm sure there is a better way...
app.template.html:
<div class="widget-container" (click)="onClick1($event);" [style.width]="widget1Width + '%'"><widget-1></widget-1></div>
<div class="widget-container" (click)="onClick2($event);" [style.width]="widget2Width + '%'"><widget-2></widget-2></div>
<div class="widget-container" (click)="onClick3($event);" [style.width]="widget3Width + '%'"><widget-3></widget-3></div>
app.component.ts:
public widget1Width=50;
public widget2Width=50;
public widget3Width=50;
#ViewChild(Widget1Component) widget1: Widget1Component;
#ViewChild(Widget2Component) widget2: Widget2Component;
#ViewChild(Widget3Component) widget3: Widget3Component;
onClick1(value:any) {
this.widget1Width=80;
this.widget2Width=20;
this.widget3Width=20;
this.widget1.parentResize(this.widget1Width);
this.widget2.parentResize(this.widget2Width);
this.widget3.parentResize(this.widget3Width);
}
widget1.component.ts:
export class WidgetWeatherComponent {
panelLarge = 0;
public widgetWidth:any;
parentResize(value:any) {
console.log(value);
this.widgetWidth=value;
}
}
widget1.template.html:
<div #widget1ParentDiv>
<div *ngIf="widget1ParentDiv.clientWidth>=700"> ... </div>
<div *ngIf="widget1ParentDiv.clientWidth>=300 && widget1ParentDiv.clientWidth<700"> ... </div>
<div *ngIf="widget1ParentDiv.clientWidth<300"> ... </div>
</div>
I understand that I can also change the class and use CSS if I am changing format of text ect.
While I am very happy to take advice on the arranging, sizing, front end stuff, my main focus atm is to work out the right approach for the widgets so that I can go ahead and build a number of them. The code to resize things in app.component.ts is just to get things moving.
The problem
The main concern I have is that accessing widget1ParentDiv.clientWidth seams really bad! Normally I would handle the screen size change in the css using #media, but as each widget has 3 'states/sizes' (small, medium, large) that would cause too much effort. I really want to do exactly like #media, but for the parent div. I have read about that a little, but my understanding is that it doesn't really exist out of the box.
My other frustration with this approach is that I have to keep repeating *ngIf="widget1ParentDiv.clientWidth>400" where I would rather define that somewhere else and use *ngIf="large", but I cannot see how to do this without needing to respond to the screen size changing and update a variable.
Please let me know if this doesn't make sense or more information is needed. Any advice/thoughts would be appreciated.
This seems dissimilar to the accordion functionality provided by bootstrap.
To give an example, let's take the "how to format" info starting me in the face right now. I'd want it so that it only displays up to X pixels deep, and then stops until expanded. So it might look like:
and then, once expanded,
I happen to be using bootstrap. Is there a bootstrap native or other HTML solution to create this kind of experience?
Assume that the thing that I only want to show of is a single element, such as an image, rather than a series of text. This means a solution like min-height:50px and overflow:hidden won't work, as it will simply hide the entire image rather than part of it.
We can use jQuery .height() to accomplish knowing the rendered height of an element then making conditional modifications.
Documentation and examples for jQuery .height().
A combination of height and overflow in combination with the toggling of a class should work here.
http://jsfiddle.net/fm56je84/1/
The click of the arrow is bound to the following function:
function expandCollapse() {
$("#container").toggleClass("expanded");
$(".glyphicon").toggleClass("glyphicon-arrow-down"); // Flip Arrow
}