I'm trying to implement a dropdown with an input but whenever I try to click the dropdown, it overlaps to the other row of the table since the inputs are inside the table. Please see my screenshot below.
Screenshot:
Note: This is pure bootstrap 3, and didn't add any customization yet.
Related
I need to implement a segment button using only HTML, CSS and bootstrap as shown in the below picture. many people confuse between toggle and segment buttons. toggle-button toggles between on-click but the segment button can have multiple buttons and will toggle only on clicking the particular button. In my case, I need to implement only 2 buttons within 1 segment button. if my statement confuses, please follow the link and there is an example. any help is appreciated. thank you.
In Bootstrap, this feature is called "Button-Group", check this Reference: https://getbootstrap.com/docs/4.0/components/button-group/
You can style your Button-Group as you desire - if you want to e.g. put icons in it, just replace the text in the example ("left/middle/right") with an icon
I am trying to use a v-data-table inside of a v-card, you can see the code from the following codepen
https://codepen.io/benwasin97/pen/eYveZGL
<v-data-table
:headers="headers"
:items="items"
:search="search"
:sort-by="id"
:sort-desc="true"
>
When I click on the rows per page option the menu doesnt show up at all.. in my application, the whole rows per page dropdown menu does not show up entirely at all. So, Im hoping the issues might be correlated.
Just to recap, I am trying to make the rows per page menu show up in the codepen above.
Thank you
You need to put v-data-table inside a v-app. If you do that, rows per page option would work.
I have a requirement where my drop-down values in my select are an expanded div which has 3 lines. For example my options Could be something like below
Honda Accord
19'
Blue
--------------
Honda Civic
17'
Red
This is what my dropdown would look like when expanded. So instead of regular one line option I have a div with more detailed options. The challenge I am facing is when making my selection (I can correctly display the grid as above) my dropdown selection value shows as the context of the whole div. So for example my dropdown after selection would look like this.
[Honda Civic17'Red]
I am using Angular Material for my dropdown. Is anyone aware of a way to set the selection to another value than the option text? For example I would like my dropdown when selected to display [Honda Civic] instead of [Honda Covic17'Red].
Any help would be appreciated.
Thank you.
You can customize the display of the selected item using MatSelectTrigger. An example is provided here: https://material.angular.io/components/select/overview#customizing-the-trigger-label.
I am using kendo grid which has column Action as Dropdown. Its working fine.
But the behavior is when grid load the dropdown column value display as text and when I click on that text then dropdown get display with populated values.
Is it possible to display column value always in Dropdown instead of Text?
Thanks!
Telerik has a sample on how to do it for a checkbox: http://docs.telerik.com/kendo-ui/web/grid/how-to/Templates/grid-with-checkbox-column
I Guess you could do the same for a drop-down:
Create a template for the column with a drop-down.
Add a javascript which updates the underlying model when the user change the selected item in the drop-down.
I'm using three bootstrap modals with identical html forms in each, with the exception of the PayPal button ID.
For some reason, on the live site I cannot type in the forms in modal 1 or 2 unless I've clicked on modal 3 and clicked in one of the text boxes. But the buttons at the end of each form work fine with or without the textboxes working.
(& It's the same for Chrome, Mozilla and IE.)
Any suggestions?
Located at:
http://mytravelagentportal.com/deluxe/test/
Maybe it's because modal 2 doesn't have style="display: none;", it's just have opacity: 0, and you can't click on elements behind it (modal 1). And because of this you can't click on button 2, it's also behind hidden modal 2
Bootstrap does not support multiple modals, so I wrote some javascript to switch out the button value for paypal and used one modal. Code can be seen at the same link.
This alternative was cleaner than using the three different modals anyways.