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.
Related
I am using Drupal 7. I want to animate the login block with aos.
The login block is called "block-user-login". It´s a <div id="block-user-login" ... >
Can I create some css code around to make "data-aos='zoom-in'" be associated to that #block-user-login ?
How can I create a style script to do that?
I dunno if you're still in doubt bout that. But you can try <div id="block-user-login" data-aos = 'zoom-in'> and after that you can config in css the color, the font and everything else.
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 am using simple form and bootstrap with my rails 4 app.
I'm becoming so frustrated with this that I just can't figure out something that should be 'simple'.
I am trying to make my radio buttons display:block. Instead, the text is all inline and squished up on top of each other because the container is too narrow to fit it all in on one line.
My form element is:
<%= f.collection_radio_buttons :public, [[true, 'Yes, anyone can view this project'] ,[false, 'No, I would like to invite specific recipients']], :first, :last, {style:'display:block', class: "response-project"} %>
I have also tried:
Neither of these work to disable the formatting that either Simple Form or Bootstrap is imposing. I have other form elements that are radio buttons that I want to remain display:inline. I can see from my google inspect element, that there is a label.collection_radio_buttons tag on the form element. I didn't create that and I can't find it anywhere in the css files. it might be an import from bootstrap or a part of the simple form styling but I don't know how to disarm it from my form element.
Can anyone help?
Thank you
If you want your CSS to work you have to user input_html or label_html.
So it would be something like this:
<%= f.collection_radio_buttons :public, [[true, 'Yes, anyone can view this project'] ,[false, 'No, I would like to invite specific recipients']], :first, :last, :input_html => {style:'display:block', class: "response-project"} %>
*label_html is to affect only the label div
Anyway you should read the doc https://github.com/plataformatec/simple_form under the 'Usage' section. Hope this helps.
I'm using html5, JQuery Mobile and KnockoutJS, I Have a foreach template that renders a grid like GUI from an observable array.
However, when I add items to the bound array, the styles are not applied to any new items.
They appear unstyled, most of the times.
some times they appear with style, but once the styling fails, it stays broken for as long as I run my app.
Does anyone have any idea how to resolve this problem?
Snippet:
<div id="timeEntryList" data-bind="foreach: timeEntries">
<div data-role="header" data-theme="c">
<h1>some header</h1>
The odd thing is that it works sometimes.
Hard to guess without any code. But I guess you 're saying jqm doesn't render properly after dynamically adding elements. That's right it doesn't. I guess it's like the list. And you probably can do something like $('#mylist').listview('refresh'); but I don't know what sort of component you're talking about.
you can find more info in the documentation
jQM might not support more than one data-role="header" section. I would try conforming to their standard page layout with one header, one content and one footer section and see if that helps.
I've found that if I update my KO observables in pagebeforeshow I don't have to use .listview('refresh')
I need logic to display images on mouse over of datagrid in asp.net
If you want to know how SO does it do as Wikser suggests and view the source. If you want help to do something similar then I'll need to know what client side libraries yo are using.
Without having looked at SO source I see an empty space that an image appears in when the mouse is over something else. If I were to recreate this behavior I would do something like this for the HTML:
<img src="..." id="flag" style="visibility: hidden"/>
...
<span id="comment">blah blah blah</span>
and I would use JQuery like this to set up the effect:
$("#comment").hover(
function() {$("#flag").css("visibility", "visible"},
function() {$("#flag").css("visibility", "hidden"});
I suggest try jQuery balloon tips
Here are many examples.
http://www.dreamcss.com/2009/05/12-jquery-tooltip-for-web-developer.html
http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/
http://www.lullabot.com/articles/announcing-beautytips-jquery-tooltip-plugin
The logic is that create on fly a cool div set with your informations, and display it on mouse over, in the position you wish.