i have a panel in a page, and in the panel header i have a red delete btn, the panel content contains a form which has a few btns (the red delete btn is not in the form, but its linked to the form via the form="abc" attribute).
in the pic below, When i click the btns in the form, it'll post some values. Before i submit a form (the pink remind button), my red delete button looks like this ( nice and rounded)
enter image description here
but after submit, it became out of shape. ( btn height changed). This only happens after i submit and didnt reload the page, if i reload the page or redirect the page back to itself, then the delete btn will return to its normal shape.
enter image description here
i did not alter the classes of the btns using js or jq, the only thing that happens after i submit are some php scripts which shouldnt affect aesthetics. Also, the panel is reloaded every 5 seconds within the page to update its content, but the whole page itself is not reloaded, so if its html or bs4 issue, then after i submit form, the delete btn should return to normal shape after 5 sec, but it seems like something outside of the panels but within the page needs to be reloaded to change the delete btn back to normal shape. I checked the deletebtn and the parent elements in inspect before submit, after submit, and after reload page, but everything is the same, except that it shows the height px are different.
Can you post snippet of your code?
Alternatively just give inline style attribute to the button and specify height, width, padding etc.
Related
I have a web page with several drop-downs, input fields and buttons that can be accessed with the tab key and the mouse.
When some data is entered, I display a snackbar (https://www.w3schools.com/howto/howto_js_snackbar.asp) with e.g. three buttons.
To prevent that you can click on the drop-downs, input fields and buttons on the main page, I put a <DIV> over the whole web page (width: 100% / height: 100%).
But with the tab key the drop-downs, input fields and buttons on the main web page are still accessible.
How can I temporarily disable the tab stops on the main web page so that the focus remains only on the three buttons of the snackbar when the tab key is pressed?
In the meantime I found a solution.
I added a <DIV> with a 'tabindex' with a lower number than the first button on the snackbar and a <DIV> with a 'tabindex' with a higher number than the last button on the snackbar and when one of these <DIV> gets the focus, I just set the focus back to the buttons on the snackbar.
I Have made a form which contains only a tabbed Canvas with three tabs each tab has one data block, I Have also one button which is the Exit button that belongs to one tab (It's not optional from what I see, I have to make the button belongs to one of the three tabs or more specifically to one of the three data blocks).
My problem is that the button will not be displayed when I run the form Unless I Do something with the tab that it belongs to.
But I want it to be displayed unconditionally.
Is there any way to make the button belongs to the Empty Content Canvas
instead of the tab canvas??
I Figured it out, Indeed the button should belongs to a data block, so I made an empty new block inside the Content Canvas and made the button belongs to it.
User would be initially shown a screen with a card placeholder. There would be a plus button on the card.
On clicking the plus button, the user would be prompted to select an image.
Once the user selects an image, it would be shown in place of the card and a new placeholder card would be generated with a plus icon.
Each image card would have a close button which on click should remove that particular image from the list.
please help me how to approach this above problem
here you can find very basic and simple implementation: ngRepeat error when removing child directive from parent directive. And here is my modifies version: http://codepen.io/anon/pen/mrZOre?editors=1010
I am doing an application which the user receives a list of items to choose. When the user moves the mouse, a DIV:Hover class works backgrounding the color of the div, and when he clicks at one div to select it, an ONCLICK function marks the clicked div and redirects to a website( _blank ). Perfect, but when you go back to this page, there is two div selected. The div user has clicked and another one. If the user moves the mouse, even if a little, the second div goes backs to normal.
What I want is to go back to the page and only the div clicked is marked.
It only happens on Google Chrome
Jsfiddle ---->
https://jsfiddle.net/u4ssywov/23/
Print Screen -->
http://postimg.org/image/ynr6vjdlh/
Is it possible to solve and not mark a second DIV?
If I do not redirect to a website, it works normally, but I need to redirect. =(
I have two updatePanels
UpdatePanel1 contains a button
UpdatePanel2 is inside a Multiview View1:
.
<Multiview>
<View1>
<UpdatePanel2>
</UpdatePanel2>
</View1>
</Multiview>
Multiview ActiveIndex is set to -1.
Now I have attached an AsyncPostBackTrigger on UpdatePanel2 which is associated with the button click.
I want to show View1 when I click the button in UpdatePanel1.
You're going to need to put the update panel around the MultiView, rather than inside View1:
<UpdatePanel2><MultiView><View1></View1></MultiView></UpdatePanel2>
An UpdatePanel will render on the page as either a div or a span (a div by default).
When you do a callback (such as when you click the button inside the UpdatePanel), ASP.NET sends a message to the browser telling it how to update the contents of the divs that represent your UpdatePanels. This message is received and handled in javascript.
If you're not showing View1 when you first arrive at the page, then UpdatePanel2 won't get rendered at all. Therefore, when your button click causes the callback, there's no div on the rendered page for javascript to change the contents of.