I would like to place a button on my page that allows redirect to a custom processing page but the button must be the pencil icon such as when using AllowEdit="True" on a control.
I have the following asp.net :
<px:PXButton runat="server" ID="PXButton1" ImageKey="EditH" ImageSet="control" AlreadyLocalized="True"></px:PXButton>
Which gives the result as can be seen to the left on the image below :
Unfortuantly the button appears a dark grey whereas I need it to mimic the UI of the pencil icon on the right hand side of the image provided.
How would one go about accomplishing this?
Try the following definition:
<px:PXButton runat="server" ID="PXbtnValidateAddresses" ImageKey="EditH" ImageSet="control" AlreadyLocalized="True" CommandName="ValidateAddresses" Style="min-width:20px; width:20px; border-style: none;padding-left:0px;padding-right:0px;height:20px;padding-top:0px;background-color:Transparent;"></px:PXButton>
This is the result:
Also possible with the PXButton DAC attribute properties:
[PXButton(ImageKey = Sprite.Main.RecordEdit, Tooltip = ActionsMessages.Edit, CommitChanges = true)]
You can try to use the <LinkCommand> subtag of the <PXTextEdit> tag.
For example:
<px:PXTextEdit ID="fieldID" runat="server" DataField="FieldName" Enabled="False" AllowEdit="True">
<LinkCommand Target="ds" Command="RedirectAction"/>
</px:PXTextEdit>
You can implement any custom redirect code in the RedirectAction action.
This solution is most generic in your case because it does not depend on specific icons and colors that can change at any time.
Related
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
Hi i have a textbox which i am using as a counter to show how many characters are still allowed in another textbox. I have made it read only and its background transparent so that you cant tell it is a select box. The only problem is you can still click on it or tab to it. Is there a way to do this so it appears just like normal text and people cant click on it or tab to it?
If this is an Asp.Net Web Control set it's Enabled property to false
<asp:TextBox Enabled="false" />
If it is HTML you can do this:
<input type="text" disabled />
Just replace the input element with a span element or some other non-input element. This requires a trivial change to your JavaScript; you would assign to the innerHTML property of the element rather than value. Then the content will appear as normal text, and you can style it as desired.
you need some style with css and some trick with Jquery.
CSS
.readonly{
border:none;
background:#aaa;
}
Jquery
$(".readonly").focus(function(){
$(this).blur();
});
now just add class="readonly" to your textbox.
<asp:TextBox cssClass="readonly" />
check demo here .
I use asp .net image button to show a static jpeg file,
How to make image button has pressed effect
This is what I have so far:
<asp:ImageButton ID="Login_Button" runat="server" onclick="Login_Button_Click" ImageUrl="~/Image/Login.jpg" />
How to remove red cross when ImageUrl not set?
.Login
{
height:50px;
width:100px;
margin: 5px;
background: url(Image/Login.jpg) no-repeat 0 0;
}
.Login:hover
{
background: url(Image/Login_Pressed.jpg) no-repeat 0 0;
}
This might help with rollovers.
Or, this one would work if you only want it to change when you press the button, instead of when you mouseover it.
I'm not totally sure what you're asking...
Only Link button can do this without a invalid icon
<asp:LinkButton ID="Login_Button" runat="server" style="float:left;"
onclick="Login_Button_Click" CssClass="Login" />
To remove the "red x," you could reference a placeholder transparent gif. They're usually named something like "spacer.gif" or "pixel.gif" and they're just a single transparent pixel. They provide the valid reference when an image file is required but are very small and, of course, transparent. What you're seeing with the "red x" is the image button not being able to find the image file. When no file is referenced or when it can't be found, some browsers (IE) will show the red x.
<asp:ImageButton ID="Login_Button" runat="server" onclick="Login_Button_Click"
ImageUrl="~/Image/pixel.gif" />
Or, as you've answered your own question, you can switch to a LinkButton and go from there.
CSS is definitely the way to go if you want the button to react to mouse actions, and the CSS you provided appears to be valid. You might find, however, that some browsers don't interpret the :hover pseudo class unless it's attached to an anchor (link) tag. If you've had trouble getting the mouse actions to work correctly in some browsers when you use the ImageButton, this is probably why.
I want to add an image, instead of the default button.
I already have a CSS class for the image, will this work?
<asp:Button ID="..." CssClass=""/>
I am trying it now, and the image is all scrunched up. Maybe it's a CSS issue?
Why not use an ImageButton control?
Although you can "replace" a button with an image using the following CSS...
.className {
background: url(http://sstatic.net/so/img/logo.png) no-repeat 0 0;
border: 0;
height: 61px;
width: 250px
}
...the best thing to do here is use an ImageButton control because it will allow you to use alternate text (for accessibility).
I actually prefer to use the html button form element and make it runat=server. The button element can hold other elements inside it. You can even add formatting inside it with span's or strong's. Here is an example:
<button id="BtnSave" runat="server"><img src="Images/save.png" />Save</button>
I dont know if I quite get what the issue is. You can add an image into the ASP button but it depends how its set up as to whether it fits in properly. putting in a background images to asp buttons regularly gives you a dodgy shaped button or a background image with a text overlay because its missing an image tag. such as the image with "SUBMIT QUERY" over the top of it.
As an easy way of doing it I use a "blankspace.gif" file across my website. its a 1x1 pixel blank gif file and I resize it to replace an image on the website.
as I dont use CSS to replace an image I use CSS Sprites to reduce queries. My website was originally 150kb for the homepage and had about 140-150 requests to load the home page. By creating a sprite I killed off the requests compressed the image size to a fraction of the size and it works perfect and any of the areas you need an image file to size it up properly just use the same blankspace.gif image.
<asp:ImageButton class="signup" ID="btn_newsletter" ImageUrl="~/xx/xx/blankspace.gif" Width="87px" Height="28px" runat="server" /
If you see the above the class loads the background image in the css but this leaves the button with the "submit Query" text over it as it needs an image so replacing it with a preloaded image means you got rid of the request and still have the image in the css.
Done.
Assuming a Css class of "image" :
input.image {
background: url(/i/bg.png) no-repeat top left;
width: /* img-width */;
height: /* img-height */
}
If you don't know what the image width and height are, you can set this dynamically with javascript.
.my_btn{
font-family:Arial;
font-size:10pt;
font-weight:normal;
height:30px;
line-height:30px;
width:98px;
border:0px;
background-image:url('../Images/menu_image.png');
cursor:pointer;
}
<asp:Button ID="clickme" runat="server" Text="Click" CssClass="my_btn" />
You can add image to asp.net button. you dont need to use only image button or link button. When displaying button on browser, it is converting to html button as default. So you can use its "Style" properties for adding image. My example is below. I hope it works for you.
Style="background-image:url('Image/1.png');"
You can change image location with using
background-repeat
properties. So you can write a button like below:
<asp:Button ID="btnLogin" runat="server" Text="Login" Style="background-image:url('Image/1.png'); background-repeat:no-repeat"/>
when I use the asp:Menu the popoutimage is by default enable, I know I can disable it, but I kind of like it. The thing is I modified my background & foreground of the menu and so the popoutimage arrow is blended in the background. Is there a way to change the settings of this? And how should I go about?
Is there maybe a CSS tag I could use for this?
Thx
EDIT:
the markup language is shown as this:
<td style="white-space:nowrap;"><a class="ctl00_TopNavigation_1 TopNavItem ctl00_TopNavigation_3" href="javascript:__doPostBack('ctl00$TopNavigation','Material')" style="border-style:none;font-size:1em;">Material</a></td><td style="width:0;"><img src="/ASP%20Test%20WebApp/WebResource.axd?d=nNpXA-tgytzmQJwzxJnoSKNU-6BcLlO3wOo_dawXyOs1&t=634050991608503994" alt="Material uitvouwen" style="border-style:none;vertical-align:middle;" /></td>
So I have no idea :s
You the the code-behind, you can do something like:
MenuObject.StaticPopOutImageUrl = "/path/to/your/image";
or, if you don't care to have an image you can do:
MenuObject.StaticPopOutImageUrl = "about:blank";
edit - even better:
MenuObject.staticEnableDefaultPopOutImage= False
Try viewing the source of the rendered page.
Find the menu in the source.
See if you can see the mark-up that displays the poputimage.
If you cant see the mark-up see if there is a css class on the parent element.