OK, I'm just playing around with Alpine in Codepen, getting the hang of things, but I can't figure out what I am doing wrong here. With this example input, when I click on it, it correctly logs the value in the text box. If I put a different variable in the :class attribute it works fine. But I can't get it to apply classes based on what I type in the text box. I suppose there is no real-world use for this, but I want to understand what I am getting wrong.
<input type="text" :class="$el.value" #click="console.log($el.value)" />
Currently, your textbox is not connected to Alpine's internal state management but handled by the DOM which, by itself, has no concept of "reactivity". Therefore, if you change the element's value, Alpine has no idea that it should "rerender" the component.
From Alpine's documentation:
Alpine is "reactive" in the sense that when you change a piece of data, everything that depends on that data "reacts" automatically to that change.
By itself, the value of a textbox is not reactive, i.e. not connected to Alpine's internal state management. For a textbox value to be connected to an Alpine state variable, you can use the x-model directive.
x-model is two-way bound, meaning it both "sets" and "gets". In addition to changing data, if the data itself changes, the element will reflect the change.
Here is a working example:
<script src="//unpkg.com/alpinejs" defer></script>
<style>
.red {
color: red;
}
.bg-yellow {
background-color: yellow;
}
</style>
<input type="text" :class="clsText" x-data="{clsText: 'red bg-yellow'}" x-model="clsText" />
Related
After a good scrape of the web I am close to resolved that there is no nice way of doing this with the package we are using but I turn to you as a last hurrah!
The package in use is element-plus, and the component my question relates to is the Select component, specifically with the flag multiple.
Logically, this works exactly as expected this question is %100 about styling.
Code below:
<el-select
v-model="specialistsData"
multiple
filterable
remote
reserve-keyword
placeholder="Please type a specialist name"
remote-show-suffix
:remote-method="remoteMethodSpecalist"
:loading="loading"
:disabled="isShowAllSpecialist"
#change="filterSpecialists"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
Is it possible to style the tags in the multiselect? I know you can style the dropdown items using the <el-option>, but we need to style the actual select tags, conditionally per item. See dreadful snipping tool picture for example. ANY ideas welcomed.
it's unclear to me what exactly you're after, plus element-plus doesn't seem to provide a any way to pass properties to the tag elements.
However, if you're ok using the order (background not tied to select) you could use nth-child() css selector
<style>
.el-select .el-select__tags .el-tag--info:nth-child(1){
background-color: khaki;
}
.el-select .el-select__tags .el-tag--info:nth-child(2){
background-color: skyblue;
}
.el-select .el-select__tags .el-tag--info:nth-child(2) .el-select__tags-text{
color: darkslateblue;
}
</style>
example
Hello again everyone,
I am putting validation on a Web Form I'm making, and I set all the placeholder text to red to indicate which fields were required. I also have a dropdownlist that is required, so I wanted to change the text color of the first "default" option to be red also. All the solutions I find across the internet say to just style it:
<asp:ListItem style="color:red" Value=null>--Select Tax Status--</asp:ListItem>
However, this is not making any difference in Chrome or IE. I inspected the element and it even has the element.style color as red, but it is clearly not...
Anyone know how to do this so it works? or where I'm messing up?
IMHO if you want to indicate that some fields are required you should use something like put an asterisk(*) to indicate that, and then focus and color with red (or another color) the controls they are missing when clicking the submit button, this way is more standardized and thus the users can understand easily what you are trying to tell them, because they are more familiar in this way, I think it could give a better experience to your users .
However, as #Yuriy commented, the DropDownList/ListItem control is rendered into SELECT/OPTION tags, so if you set the style="color:red" to a ListItem tag only the Option tag is going to be red.
You should apply the style to the DropDownList control as below:
<asp:DropDownList ID="ddl" style="color: red;" runat="server">
<asp:ListItem>--Select Tax Status--</asp:ListItem>
</asp:DropDownList>
It will be rendered as
<select name="ddl" id="ddl" style="color: red;">
<option>--Select Tax Status--</option>
</select>
Dropdown/ListItem render as HTML SELECT/OPTION elements - there're very limited styling you can apply to those - i.e. you can change background color.
Your solution is either use different elements or apply a 3rd party library (e.g. https://select2.github.io/) that turns normal select into styleable elements
I have a requirement to white label (specifically changing header logo/menu/font colors) our existing asp.net web forms site per each customer. Customer will be able to pick the colors they want for the site.
The site is a portal and consists of multiple web sites. I don't want to use themes or different master pages because we don't have the bandwidth for restructuring the app heavily. As far as I can see I have a few options. I want to know if there is more or someone knows any other better/best way to do this. The first two options may be similar but one could be better performance.
Have a dummy css class for all the "color changing" sections - say customColor.
Examples
<div class="menu customColor" />
<div class="header customColor" />
menu and header css classes contain all styles but the color.
Programmatically add color to this css class when the master page loads. Pseudo code : Page.Header.Controls.Add(New LiteralControl("<style type=""text/css""> .customColor { color: blue }");
Have a asp.net ashx handler return whiteLabel.css that contains customColor { color:blue }; and add this css to the page dynamically.
It is not that many elements in every page that needs to change. You can have a function in each page that sets the appropriate colors from the database.
I assume my options pretty much are dynamically changing css or programmatically setting colors to individual elements.
Also I would think it may be better to do option#1 than #2 because does css get cached on #2? This will make it difficult for companies to change colors.
Does all your pages use a common MasterPage?
If so, then I have once used setting a class for body or may be a div wrapper like:
<div class='<%= GetCustomClass() %>'>
<div class="menu customColor" />
<div class="header customColor" />
</div>
GetCustomClass is a static method that will return say class1 or class2 based on customer's selection.The css will look something like:
class1.customColor{color:blue;}
class2.customColor{color:red;}
Hope that helps.
Let's rule out option 3 also, it may fail to reskin the page if a javascript error occurs during the page load.
That leaves option 1, although you might want something a bit more readable:
<style>
.menu.customColor { color: <%= menuColor %>; }
.header.customColor { color: <%= headerColor %>; }
</style>
What I'm trying to do is remove the drop down arrow from a select with this CSS:
.Gender:first-child::-ms-expand {
display: none;
}
The select element is disabled and its content is set programmatically. It is still a select because of our "unique" roll-your-own binding approach that would be a huge overhaul to replace/update.
Basically I have a section to input basic information for a dynamic number of people. The first instance is always the Primary instance and it's data comes from another section of the page so it's disabled here and bound to the values in that other form. Every other entry after it is editable. The idea was to remove the drop down arrow from the first selects because they're read only. I know that even though the drop down arrow is missing that the select continues to work but I still want it to be there for every other select that isn't disabled.
I know it works in a simplified JSFiddle but in my site ALL selects that have those classes are hiding their drop down arrow. What can I look for in my site that would circumvent the :first-child pseudo class? Why could it possibly work in the fiddle but not in the actual site?
Everything I'm reading says to check your doctype. Mine is <!DOCTYPE html public "-//W3C//DTD HTML 4.0 Transitional//en">. Nobody that I found ever explicitly says the exact doctype to use, so this may not be 100% correct.
Also, this only needs to work in IE10, it's an internal web app that'll never be run anywhere else.
The single most common cause of every instance of a specific element matching :first-child, when only the first of them should match, is if each of those elements actually exists in its own container element. Here's an example:
<div class='parent'>
<select class='Gender'>
<option>Male</option>
<option>Female</option>
</select>
</div>
<div class='parent'>
<select class='Gender'>
<option>Male</option>
<option>Female</option>
</select>
</div>
<div class='parent'>
<select class='Gender'>
<option>Male</option>
<option>Female</option>
</select>
</div>
Here, every .Gender is the first — and only — child of its parent element, .parent. The .parent elements themselves, on the other hand, are siblings of one another, sharing the same parent element (not shown). Depending on what your source looks like, it may be difficult to pinpoint the location of these parent elements within the source, but as long as your markup is valid, they should be somewhere.
If it does turn out to be the problem, fixing it is trivial — just move the :first-child pseudo-class to the appropriate element:
.parent:first-child .Gender::-ms-expand {
display: none;
}
Updated fiddle
I'm trying to create a very basic chat system, part of which will be the entry box for lines of chat. If the user is logged in, that's all I need; but if the user is not logged in, I want an additional text box to allow them to enter their name.
I have the following HTML (although of course it can be altered):
<form>
<input type="text" placeholder="Name?" name="name" id="name"> <!-- This line may be absent -->
<input type="text" placeholder="What do you want to say?" name="say" id="say">
</form>
Is it possible to style this with CSS so that #name and #say together fill the whole width of the form, with #say taking all the width if #name is absent?
(The backend is Ruby on Rails; I have javascript available, so can use a JS solution, but would prefer pure CSS if possible)
For a simple, all-CSS solution, try the first-child pseudo-selector to overide a default half-width when #say is the first element inside of the form:
#name, #say{width:100px}
#say:first-child{width:200px}
This works perfectly fine with your simple markup structure. (I've tested it)
With whichever of the two languages you'll be using to determine whether the user is logged in, create a conditional statement that adds a html class to the input field that alters it's width say .input-full and .input-partial
IF user is logged in
SET class to input-full
ELSE
SET class to input-partial
ENDIF
sorry for the psedo code, then have appropriate CSS for each.
oooh, didn't see the CSS only, sorry. Without CSS3 and a disregard for IE I don't think you can do this with straight CSS.