I'm trying to include several tabs into an existing tab, it works but I have a display problem when I try to display the tab containing the nested tabs.
When I click on it, the content of all the children tabs are displayed instead of the first tab only.
Here is a link to check the problem:
http://www.bootply.com/3hWg0EDCmx
I can't find where I'm wrong.
Thanks
You have the wrong css class assigned to tab-memory and tab-activity. 'tab-io' should have the class "tab-pane fade in active", while the rest should have "tab-pane fade in".
Here is the link to the working code: http://www.bootply.com/3hWg0EDCmx#
Related
I’m stuck with putting one button inside of another one: it’s prohibited, but I use bootstrap, that’s why I appoint class “btn …” to span and it looks like the button.
My button should look like this:
Filename.jpg <small delete button<
When you press on filename, file opens, when on small delete button - it sends request to API and deletes file
But now link is not working, but delete button does work. Putting and so one did not solve my problem
Code:
<span v-for=“link in links”
class= “btn btn-success”
v-bind:href=“<domain> + link.file”>
<button type=“button” class=“btn btn-danger” #click=“deleteFile(`$(link.file_id) `)”>-</button>
</span>
href only works on certain elements. Use <a> anchor instead of <span>.
Generally speaking it is not a good idea to wrap clickable elements inside other clickable elements. It's bad for accessibility and tab navigation and it can lead to easy missclicks from your users.
The right thing to do would be to put your two buttons next to each others to indicate that there is in fact two separate actions your users can take related to the file.
I am using the external component v-image-input in Vuetify. For some reason, the component creates this extra padding/margin on the right and bottom side. I have been unable to find any attribute that can change this. Any ideas?
There are some hidden elements in the HTML.
If you go to https://seregpie.github.io/VuetifyImageInput/ and click on 'hide actions' the elements disappear.
i used twitter bootstrap collapse and the problem is that after the second click on the a tag (to open and hide the div) the div is not hidden.
i see that in the first time i click on a tag the 'in' class disappear and after that is staying (what makes the div appear).
i tried to copy the exact code from bootstrap site (without any changes) and it keeps going.
i read some post in stackoverflow that say the problem came from includes more than 1 bootstrap js or css (i check and it's notmy case).
there is something that blocking the collapse.
http://twitteer_D.com/javascript/#collapse/Twitteer_D used twitter bootstrap collapse and the problem is that after the second click on the a tag (to open and hide the div) the div is not hidden. i see that in the first time i click on a tag the 'in' class disappear and after that is staying (what makes the div appear). i tried to copy the exact code from bootstrap site (without any changes) and it keeps going. i read some post in stackoverflow that say the problem came from includes more than 1 bootstrap js or css (i check and it's notmy case). there is something that blocking the collapse.
I make a partialRefresh on a tab container with 4 tabs:
<xp:eventHandler event="onchange" submit="true"
refreshMode="partial" refreshId="djContentPane1">
<xp:this.action><![CDATA[#{javascript:viewScope.put("hideRelatedDocuments", true);}]]></xp:this.action>
</xp:eventHandler>
The viewScope is then used to some fields which I want to hide/show. Those fields lay on the tab container.
And after this, the tab container looks strange:
What might be the problem? Thanks for your time.
I tried adding a mainPanel, and on this panel I added the TabContainer. Then, I updated the panel but sttill, no work. The result:
You can refresh the fields to show/hide them depending on current value in combobox field if you
put the fields into panels which have an id and always gets rendered
place the panels into the Tab Panels
refresh all panels on onchange event of your combobox with XSP.partialRefreshPosts
Look for the sample code here.
It's because you're refreshing the content pane. I've not pinned down the cause, but refresh either an area outside the Dojo Tab Container or a panel/div that's inside the Tab Container Pane you want to refresh.
I suspect it's something to do with Dojo then processing the response HTML. As a client-side framework, I don't think Dojo is really designed to handle replacing HTML by injection into an existing page.
Tommy Valand added a snippet to handle this problem: http://dontpanic82.blogspot.co.uk/2013/03/fix-for-partial-refresh-on-dojo-tab.html
I'm trying to change the color of a tab in a tabpanel I have when my app goes online or offline. I have the online and offline events already setup but now I need to be able to change the color of the tab from these events.
How do I go about accessing an individual tab and setting it's CSS?
you could use ext component query to get the handle of the component and then add/remove class
Ext.ComponentQuery.query('yourselector')[0].addCls('yourclass')
You can get the individual tab from tabpanel by referring it as following inside the controller class (inside the refs):
myDesiredTab: '#myTabPanelId container[title=myDesiredTabTitle]'
and afterward you can try:
this.getMyDesiredTab().tab.setCls('myDesiredCssClass');
This idea hasn't been tested but might just work as the tabbar does have cls config and we have a way to access the individual tab.