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.
Related
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
this is not another "should i use html-tables to style a form"-question. Now i read Is it bad design to use table tags when displaying forms in html? and Why not use tables for layout in HTML? and i get why i should not use tables for layout-purposes, but i guess i don't know how.
Recently i mostly developed JSF applications and got used to accompany every input field with a description-label infront of it and another label for validation-messages. Now in JSF/Primefaces this could look like so:
<p:outputLabel for="tf" value="Firstname" />
<p:inputText id="tf" value="#{contact.currentContact.firstname}" />
<p:message for="tf" />
If you are not familiar with JSF, in this simple case the p:outputLabel would render to a simple html-label, the p:inputText to a html-input and the p:message to a html-div which contains either nothing (no error-message) or two span-elements (for error-icon and message). Now JSF may be a bit of a special case since in the rendered HTML the spans are simple not rendered if they are not needed. Still this question could apply do any sort of HTML-form.
Now if i use a table to style this each of this components would be a cell (= be within a td). Since this is a table i get a correct "alignment" out of the box, meaning all inputfields are vertically aligned, even if one of the labels is much longer than the others like this:
Now this seems like no big deal, because i could find out the pixels of the longest label and use it as width or min-width or something like that, right? But what if the labels change or if i support multiple locales where label-length could vary a lot?
And what about the validation-message? Usually i want my label+input field to use 100% of the width. But if i display a validation message this changes, because there is a third component to be displayed like this:
When using a table again this works pretty much out of the box because in my case the column is collapsed as long as there is no content, yet if there IS a validation-message it's still displayed fine.
So my question is: How do i style this properly with CSS?
How can I go about creating a form which pops up when the user clicks a button on a Jade template? I tried the following in HTML, which works:
http://www.formget.com/how-to-create-pop-up-contact-form-using-javascript/
Now to use this in my Node.js project would I need to create a separate Jade file for the form itself? That is what I tried and then I tried to display the form like this:
function div_show() {
alert("Test");
document.getElementById('abc').style.display = "block";
}
Unfortunately that does not work. What is the recommended approach for creating a pop up form in Jade? I am really confused with Jade and I can't seem to find a good tutorial for this, there are loads for HTML...
Thanks for the help!
Normally for this you would use:document.getElementById('abc').style.visibility="visible";
To hide your table use:document.getElementById('abc').style.visibility="hidden";
When using the 'style' attribute you are using plain css commands. Make sure your default div style settings have it 'hidden', if that is what you want.This display:block;visibility:hidden;' must exist in your default settings for that div style so the DOM has a clear path to what it is controlling. By itself 'display:block;' does not hide or make objects visible, it is mostly about the shape the div creates as a container for objects.
As an option you can use:
document.getElementById('abc').style.display="block";
To hide your table use:document.getElementById('abc').style.display="none";
For this you would set your div style settings to 'display:none;visibility:visible;.
In this case 'display="none"' removes the object from all display layers and could allow other objects to fill in it's space. When it is visible it will push other objects on the same z-index out of the way. If it has a higher z-index, say +100 higher, it will pop-up above the other objects on the page. The 'visibility' attribute only controls the objects visibility, it does not remove it from the display memory. It can still take up space even though it is not visible. The 'opacity' attribute does about the same thing, except it allows you to also make an object as transparent as you like.
According to http://webaim.org/standards/wcag/checklist#sc2.4.4
2.4.4 Link Purpose (In Context)
(Level A)
The purpose of each link (or form image button or image map hotspot) can be determined from the link text alone, or from the link text and its context (e.g., surrounding paragraph, list item, table cell, or table headers).
Links (or form image buttons) with the same text that go to different locations are readily distinguishable.
and so WAVE (Web Accessibility Evaluation Tool - http://wave.webaim.org) says all my "details" links are not recommended on my page here:
but I can't think what would work better. I don't really want to clutter up the page with the first few characters of the actual details text because I think it would make the page look too cluttered.
Well, there are many ways you could solve your problem. To name a few:
You could add a title attribute to each link (i.e. title="Details on makeagoodpassword.com"), however screen readers might not read out the title attribute's values, so you'd better add aria-label="Details on makeagoodpassword.com" to your link tag
another (my preferred) option would be hidden text since this appears to be the most generic solution:
Details <span style="display:none;" aria-hidden="false">on makeagoodpassword.com</span>
Please also see: http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-refs for other options.
How do I create a label that is editable? I am displaying data in a table, and would like to provide in place editing for the displayed data. What CSS styles can I use for it?
Put a text input box there and make its background same as the background of its container and put 0 border on it and use same font style and color as other items in the table
What CSS styles can I use for it ?
It's not really a matter of CSS (unless your questions pertains solely to achieving a particular style).
You can:
Make all table cells contain inputs. This has the (potentially significant) downside that all data will be submitted to the server if the form is POSTed. I wouldn't recommend this approach unless the table is small or you are never fully submitting the whole page.
Change the label to an input on click. When the form is submitted, this value will now be a part of the request.
Change the label to an input in response to an action elsewhere (e.g. focusing the row, clicking an edit button next to the row, etc.)
Set contenteditable="true" on the element. This allows rich formatting but also requires that you keep track of the changes the user has made; they will not be submitted to the server unless they are placed into a form field.
You will likely want/need a snippet of JavaScript to change the label to an input (#2 and #3). You will need JavaScript to get the data to the server with approach #4.