The problem is that some properties of the react-phone-number2 input are not styled, for example, we cannot change the scrollbar, since not all of its properties are styled, it is also not clear how to make a dropdown with strange ones so that it adapts to the width of the input and is not hardcoded as it goes on absolute.
Exapmple:
https://codesandbox.io/s/react-phone-input-2-forked-jk0gmt?file=/src/styles.css
So, my question is how style scroll for react-phone-input-2 and how make country dropdown
width adaptive for input width
Related
I'm making a sidebar for my project and I'm using div transitions to give a smooth effect on collapse. However I have Material-ui (v4.12.3) TextField inside, and during the transition of opening the div, the height of the text field changes to 496px. Adding maxHeight style doesn't prevent a limit and once you interact with the field, it returns to normal (16px). Has anyone had this interactions with transition and mui text fields before?
I have been working on a Bottom Tab Navigator and try to make tab bar items being highlighted with a circle shape around the icon when they are selected. I tried to set the height and width inside tabBarItemStyle, however, only height changes while width does not change. Is there something else I missed? How can I set the width so that the highlighted part is in a circle shape?
Here is a demo of the tab bar I am working on.
https://snack.expo.dev/qLi7s9qAA
The issue is because the width value is being overridden by the containers flexbox property.
A quick easy fix is to use the maxWidth property instead of width in tabBarItemStyle properties.
There's a nice article here: https://mastery.games/post/the-difference-between-width-and-flex-basis/ that explains it.
I incorporated an accordion in my sidemenu as seen in the image. The Home and Logout are not in the accordion, so their height differs. I request for help on how to reduce the height of the accordion header.
I also request for help on how I can remove the border of an accordion. I tried setting the border to empty in the accordion's UIID but it didn't work.
You can reduce the padding and font of the elements in the accordion to reduce the height of the accordion. This also lets you control the border.
You can find the applicable UIIDs in the component inspector tool. Specifically UIIDs to look at would be AccordionArrow and AccordionItem.
I am trying to get a result looking like this (picture taken from https://material.google.com/components/tabs.html#tabs-usage):
I don't want the tabs to take 100% of the width of the page, as it is by default with material-ui. Is it possible to do this with the implementation of material-ui ? I already played with the width of each tab using the style tab property, but the inkbare seems hardcoded to use percentages according to the id of the selected tab, and therefore doesn't underline properly the resized tabs. Is there a workaround?
There is an issue related to this problem https://github.com/callemall/material-ui/issues/1203
But yes, there is an easy workaround. (unfortunately it doesnt support diffrent widths across the tabs).
You can use the Tabs tabItemContainerStyle property to set the width of the tabs container (make it the width you want to each tab times the number of tabs).
Since the background color is setted on that element, you're gonna need to override the styles for two others Tabs properties (style and contentContainerStyle).
In this example Im setting the same color as my tabs in the style property (for the whole component) and setting the contentContainerStyle back to a white background.
You could use the classes properties as well..
Ex: (Imagine you have a blue toolbar)
<Tabs
tabItemContainerStyle={{width: '400px'}}
style={{background: 'blue'}}
contentContainerStyle={{background: '#FFF'}} >
I've been trying to adjust the height of my combo field. I have tried several different methods, including setting config properties on the combo and its container, tweaking css, and using css mixins. So far, I have had no effect on the height of the combo.
I'm using Ext 6 and the Triton theme.
Specifically, I want the combo box (in certain situations) to look just as it does out-of-the-box, except less white space around the value in the textfield, thus making the label and textfield consume less vertical space.