I am using the standard MVC bootstrap template and got a few issues:
1) See the screenshot below. How can I get rid of the cross from appearing in the textfield with focus?
2) The text in the date is too left aligned unlike all the other fields. I am using the bootstrap datetimepicker here.
You will have to create a custom.css class to overwrite the default bootstrap.css.and place a link reference of your custom.css below bootstrap.css
In getting rid of the cross, right click on it, navigate to inspect in your browsers context menu. Take a look at the inspector, The cross and the border color are triggered by the focus state of the Textbox. In Chrome click :hov and select :focus, this will display the css that styles the text control when it is clicked. You should find the element that styles the Cross. Simply copy the whole class into your custom.css and remove the attribute that styles the cross
For the Datapicker you need to rightclick on the date displayed go to inspect, copy the class into your custom.css and add padding-left of the desired pixels you want eg padding-left:20px;
Sample Inspector In Chrome
Related
I'm facing a very weird (& blocking) issue using diagrams.net webapp.
I'm trying to add some nodes in the Format Panel. I created a new tab in this panel & added in it some new inputs.
There are text inputs, checkbox inputs & textarea.
But the behavior is absolutely not the expected one.
For text & cb inputs, everything works fine, but textareas behavior is... at least very weird:
The field can't get focus by mouse clicking (remember that click works on other inputs). The only way to set the focus on it is by using JS focus() method.
Text inside the tag can't be selected by mouse. If element has the focus, text can be updated. Moreover, even if text can be changed, text cursor cannot move from the end of the text.
Textarea box is not resizable. There is the bottom-right arrow to resize it & I added the "resize" value to be sure but the feature doesn't disable but I juste can't. BUT ! If I set the attribute "disabled" then I can resize the box. Unfortunately, I can't disable the textarea since I want to put it because I need to write in it.
I can't show you code for now (it's just a new node creation using document.createElement) but you can easily test this: go to drawio webapp & when the webapp is loaded, use the Inspector in the developer tools to add a new textarea node in the format panel (div with ".geFormatContainer" class) : element is not focusable with the mouse, text inside it is unselectable & box is not resizable as long as "disabled" attribute is not set.
I added a click listener in the component to check if click did something & it does, but it doesn't give the focus to the element (document.activeElement says that body is focused -_-) so I think there is something in mxgraph which avoids the element's classic behavior. But what ?
I've added Magnific Popup gem in my Rails web app, and have initialized it simply with
$('.box p a').magnificPopup({
type:'image'
});
in my application.js.
How do I go about modifying content of the popup window? I would like to add some hover effects on left and right side of the image displayed in popup, in such way that if I, for example, hover on the right side of the image - div container with certain image info slides in.
Thank you for any information!
image.markup option allows you to change the HTML structure of popup content - http://dimsemenov.com/plugins/magnific-popup/documentation.html#image_type
Also, you may just use "inline" type of popup, and provide all the content by yourself.
I just started working with JQM a little while ago. I used the default VS2012 asp.net mobile project to start with. I like how the mobile pages work, but wanted a fixed area at the top of each page that essentially has 3 columns one of which is a logo. I've done that (with a basic table to start with) in the _layout.cshtml, and right below that is where I start the JQM Page layout. This is all working well, and I like how the page transitions happen while keeping a fixed header area at the top.
However, I would like to add a button to my fixed area at the top that is styled similar to the other JQM buttons. This doesn't work because the buttons are not within a valid Page or Header data-role I presume. Is there a way to take advantage of the JQM styles for HTML that is outside of those data-roles?
As an example, I'd like to use the anchor tag for a Log In button and have it styled the same as it is with a gear-icon when it's within a div that has data-role = "header". I'm not sure I have a deep enough understanding to drill down through all the elements that are used in the .css file and was hoping there are other individual classes or something I can take advantage of.
This is the line I am trying to display as a button, but I am only getting text (does work as anchor tag though):
<a data-role="button" data-transition="pop" href="/Vision/Account/Login">Log in</a>
Also, I am using jquery.mobile-1.1.0 and jquery-1.7.2.
You can style any element as a button by calling the jQuery Button Widget on the element:
$('.login-button').button();
The button function also accepts options such as the icon and theme:
$('.login-button').button({
icon: 'gear'
});
See also: http://jquerymobile.com/test/docs/buttons/buttons-options.html
Try adding data-role="button" to your anchor tag.
I'm using a dialog box and a date picker but for some reason there is no close button showing the top right corner and you cannot see the arrow buttons in the date picker. The buttons are there because the border shows when you hover over them but you cannot see them at any other time. Does anyone know why this is?
Border shows means you have loaded the css correctly. But buttons are missing because the button strip image is missing.
Check your css that the image strip path is given correctly. It has to relative to the css file.
You can debug more using Firebug in Firefox, or Inspect Element in chrome.
In jQuery-UI dialog box, the first button appears to be the default, therefore having focus set to itself.
But, this causes a frustrating effect, especially in Safari. Even in IE, you will see a rectangular selection mark around the button. Moreover, the hover effect will not be seen.
How can I set NONE of these buttons as default and therefore NOT having focus set on any of them?
Edit:
Examples can be seen at jqueryui demo pages and a snapshot using Safari is below.
I want to get rid of this blue selection.
I think it could be an css-class, that turns the button to "default".
Check with the Firebug Element Inspector what classes are applied to these buttons, and append the standard css class to all buttons of the form.